Managing CSS…

[[email protected]]

Hello,

I am using Events Pro, and looking to tweak the colours of the calendars in month/week view (replace the grey with something similar to lime or rose), and to change the ‘Upcoming events’ heading (both text and CSS).

I’ve been reading the tutorials, and the first (and seemingly fundamental) problem I’m coming up against, is that I can’t find any tribe-events/pro/ folder inside wp-content/themes/[my theme’s name].

I’ve tried creating the file structure with some custom CSS within, but it is ignored. Can anybody point out the inevitably stupid mistake I’m making…? Might it be my WP version? I’m running 4.1.8 at the moment…

I’m a designer-turning-site manager, so please be gentle…

Thanks in advance,
Steven

[Cliff]

Hi Steven.

I think you’ll be excited about the upcoming “Color Pickers in WordPress Customizer” feature: https://theeventscalendar.com/some-favorite-features-in-the-upcoming-4-0-release/

But to answer your question how to override our CSS files, you’ll want to do it via a Child Theme. References:

• DIY: https://codex.wordpress.org/Child_Themes
• DIFM (Do it for me): https://wordpress.org/plugins/one-click-child-theme/

Once your child theme is created, you’ll need to manually add a ‘tribe-events’ folder inside.

If you want to load your own custom stylesheet in addition to the file at /wp-content/plugins/events-calendar-pro/src/resources/css/tribe-events-pro-theme.css, you’d want to create a file like this:

/wp-content/themes/YOUR-CHILD-THEME/tribe-events/pro/your-css-file-name.css

Here’s an excerpt from the comments at the top of our plugin’s tribe-events-pro-theme.css file:

To add your own custom styles, create a stylesheet with the name tribe-events-pro.css in the tribe-events/pro/ directory of your theme.

Your new stylesheet will be loaded after our own stylesheet.

To replace our stylsheet altogether, you can use the ‘tribe_events_pro_stylesheet_url’ filter.

Using that PHP filter is documented in our Themer’s Guide.

I hope this information gets you on the right path.

Just know that if there’s ever a file you want to override, there’s likely a “how-to” comment at the top of the plugin’s actual file. (Just don’t edit the actual plugin files or else your changes will be lost whenever there’s an update.)

[[email protected]]

Thank you for this—very helpful. I’ll give it a go today… 🙂

[[email protected]]

(And yes—I love the idea of a styles picker!)

[Cliff]

Sounds good. Feel free to update this ticket if you need anything else — or open a new ticket if for a different issue.

[Author]

Posts