Event Widget Styles

Are you using 2.0.8 or 1.x. I can’t give you advice on 1.x as I no longer have any setups running it.

If you’re running 2.0.8, then you can do all this through a child calendar theme by editing the agenda-widget.twig file and inserting it into the child calendar theme. https://time.ly/document/customize-calendar/create-new-calendar-theme/

If this is exactly what you’re doing, then post what you’ve got here and I’ll do what I can to help. Just remember to wrap it in code tags.

I’m using 2.0.8, but I was just modifying the css. I’ll look at this info on child themes. It sounds exactly like what I need! Thanks!

No problem. Happy to help.

Note: For displaying the event time, you might want to look in event-popup.twig, as it has code that presents the timespan of the event, which appears to be the way you want the event displayed. This file is used in multiple places (eg: month view) so you only want to copy the code from that file, rather than editing it as well.

Quick question – on this part:
Step 1: Turn on Debug Mode
This will turn off caching and allow you to see the changes as you make them.
Edit [wp-root]/wp-content/plugins/all-in-one-event-calendar/app/config/constants.php

What change do I need to make to turn on Debug Mode?

Also, the image path in Step 2 is broken.

Thanks!

Nevermind, I found Debug at the bottom of the constants file. Everything is working well now!

Hi,
I am trying to change the styling of the calender and i have created my child them under–[wp-root]\wp-content\themes-ai1ec\Child Theme and created a css folder for override.css(“[wp-root]\wp-content\themes-ai1ec\Child Theme\css”) and activated the child theme and saved the theme options in the dashboard. And still my changes are not reflected. And i am using version 2.0.8.
Thanks in advance.

It seems as though override.css is being placed at the start of the CSS file, rather than at the end, which is causing this issue.

You can:
1. Add !important to every CSS declaration (works for most things, but still annoying).
2. Use a plugin called My Custom CSS to put the CSS on your pags instead of with a child theme.
3. Insert the CSS in your standard WP themes styles.css or equivalent (if possible).

Thanks @cefiar.
I am gonna give it a try and see how it works.

Hi,
i have tried !important and my custom css plugin both of them did not worked. Any help.

palnal: Can you post the CSS you’re trying to use here, or a link (either to a file somewhere containing the CSS, or to something like pastebin)?

Note: If you laste here, make sure to wrap the CSS in the code tags (backtick at either end, preferably on it’s own line).

PS: If you want to test CSS changes, and you’re using either Firefox or Chrome, I recommend looking at the WebDeveloper browser plugin, as it’s very useful for doing this, as well as inspecting/disabling CSS for testing.