Unable to Use widget-calendar.css to Format Event List Widget

[Rand]

I’ve been having a lot of trouble changing the coloring and other style elements of the events list generated by [tribe_events_list] and/or the pro events list widget. The presence of widget-calendar.css has an effect, but not its contents.

As per docs, I created a widget-calendar.css file in the …/themes/Divi/tribe-events/pro folder. I’ve found that changes I make to that file have no effect on the colors and format generated by the [tribe_events_list] shortcode when it’s inserted in my main page column. I’ve also found that the presence or absence of that .css file in the folder does change the formatting of a widget events list in a footer between the normal format and an outlined, red background version I tested awhile ago but have changed since. I know of no place the old version is stored on the server, assuming that’s what’s causing the change, and it may not be – it may just be generating random effects that happen to match a previous trial. The format change happens whenever even an empty file with the name widget-calendar.css is present, and regardless what instructions are in it. It goes back to normal when the file is deleted and no .css file is in the directory.

Instructions in the .css file are one or more items directly taken from the examples given in the documentation, with just a change to the color:

/** Set of rules that change the colour of the date markers from dark grey to blue */
.tribe-events-adv-list-widget .list-date {
background: blue;
}

I’d really appreciate it if you could help me figure this out and get control of the list formatting.

Thanks much!

[Courtney]

Hello Rand

I’m sorry you are having this problem. This might be a simple fix that also helps fix the width of the little calendar icon under the date. Could you try this code instead?


.tribe-mini-calendar-event .list-date {background: blue;}


Let me know if that works for you.

Thanks,
Courtney 🙂

[Rand]

Excellent, Courtney! Thanks so much for setting me on the road to solving this problem!

The css line you provided (which I put in the widget-calendar.css file located in the /themes/Divi/tribe-events/pro folder) now correctly turns the date background blue if the events list widget is placed in the footer (and, I assume, sidebars). It still has no effect on the default dark gray date background when I insert the [tribe_events_list] shortcode to produce a similar list in the body of a main page column text/html. How to I control the colors in the little event list generated by the shortcode that’s not in a sidebar or footer?

Thanks!

[Rand]

Wow! Actually, it looks like it >did< solve the problem in the main column, too! It must have just taken a minute or two to refresh and update correctly.

Problem solved!

Thanks very much, Courtney!

[Courtney]

Great Rand 🙂

Let us know if you have any other questions.

Thanks,
Courtney 🙂

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts