Styling the Events Calendar Mini-Calendar Widget

[Mike]

Hi,

I’m running WP 3.4.1, TEC 2.0.7, TEC Pro 2.0.7, and Genesis 1.8.2 with my own child theme.

I’m trying to style the Mini Calendar Widget. It looks like the styling is controlled by TEC Pro, in this file:
/events-calendar-pro/resources/events-mini-ajax.css?ver=3.4.1

If I try to change the style declaration in my child theme’s style sheet, it is overwritten by the plugin, because it is called after style.css. (I could use !important on every selector, but yuck.)

I tried to copy events-mini-ajax.css to my child theme’s events folder, but it does not appear to load from the events folder.

Any suggestions?

[Rob]

Hey Mike. Thanks for the note and for explaining what you’re working with here. Two bits of documentation that might be of value to you, before we go any further here. The first is this tutorial on how to completely customize widgets (https://theeventscalendar.com/how-to-completely-customize-widgets/). The second is our Genesis integration guide (https://theeventscalendar.com/tutorial-integrating-the-events-calendar-w-genesis/), which seems it’d be useful since you’re on the same theme.

Want to give those (along with our themer’s guide, at https://theeventscalendar.com/themers-guide-to-the-events-calendar/) a go and let me know if you’re still stuck from there?

[Mike]

Hi, Rob.
Thanks for your prompt reply.

I had read through these documents and tutorials prior to posting my question. Right now, I’m just making edits to TEC’s style sheets.

It looks like the events-mini-ajax.css file in TEC Pro plugin is handled differently than the events.css file.

[Jonah]

Hi Mike,

You can always override other styles by getting more specific, i.e. using #sidebar .my_class {} instead of just .my_class {}. I highly recommend reading up on CSS specificity for a better understanding of this. Here is a great article on it: http://css-tricks.com/specifics-on-css-specificity/

So, you can add CSS to override existing styling either to your theme’s style.css or by making a copy of our plugins CSS located in /wp-content/plugins/the-events-calendar/resources/events.css and placing in an ‘events’ folder in your theme.

I hope that helps but let us know if you need anything else with this.

Cheers,
Jonah

[Mike]

Jonah,

Thank you.

The issue I’m trying to point out is with the handling of the events-mini-ajax.css file in TEC Pro plugin, and how it differs from the handling of events.css file in TEC.

If I copy the events-mini-ajax.css file to an events folder in my child theme, changes to that file are not recognized by TEC or TEC Pro.

[Jonah]

Hi Mike,

Changes to events-mini-ajax.css are not supposed to be recognized because that file cannot be overridden like the events.css file can. Please see our themer’s guide for a more detailed explanation on this and what can actually be overridden in the plugin: https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/

I hope that helps!

– Jonah

[Mike]

While the Themer’s Guide doesn’t specifically say the events-mini-ajax.css file can be overridden in the same manner as the events.css file, neither does it say it cannot.

That it cannot be handled in the same fashion is a subtlety I missed when first reading the guide. You might want to clarify the guide.

Or, you might consider making css overrides work consistently in the plugins.

Remembering inconsistently implemented interfaces is always a problem for developers.

[Leah]

Thanks Mike. We’ll definitely take that under consideration 🙂

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts