Customizing CSS

There are three distinct ways to customize calendar styles:

Adding custom styles directly in your stylesheets.

This is best when you have just a few changes and are certain you won’t lose your changes if your theme updates.

Using the WordPress Customizer.

Use this by navigating to Appearance → Customize from the WordPress dashboard, then selecting the Additional CSS option.
Note: Customizer only applies to legacy view.

Learn more about our customizer settings.

Replacing the calendar’s stylesheets with your own.

This is best when you’d like to customize a majority of the events pages styles because it safeguards your work from future updates.

Overwriting CSS files

It’s possible to override the calendar’s stylesheets with your own custom versions the same way you would override the calendar’s other template files. In other words, you still make a copy of the file, add a tribe-events folder in your theme directory, then drop the copied file in that folder to start customizing.

The difference between overriding calendar templates and calendar stylesheets is that your custom stylesheet will load in addition to the plugin’s stylesheets. Put differently, it overrides the styles but doesn’t fully replace the original file. That means you can erase all of the content in your copied CSS file because anything you add there isn’t replacing what’s already being loaded.

The Events Calendar offers 3 default stylesheet options to choose from:

  • Skeleton Styles – Includes only enough CSS to achieve complex layouts like calendar and week view
  • Tribe Event Styles – More detailed layouts, relying heavily on the plugin styles.
  • (legacy views only) Full Styles – More detailed styling, tries to grab styles from your theme.

Stylesheets reference

The following is an outline of what to name and where to put your custom stylesheets for each plugin and add-on.

PluginStylesheet NameTheme Location
The Events Calendartribe-events.css/tribe-events
Events Calendar Protribe-events-pro.css/tribe-events/pro
Calendar Widgetwidget-calendar.css/tribe-events/pro
Event Ticketstickets.csstribe-events/tickets
Community Eventstribe-events-community.css/tribe-events/community

Class naming and CSS structure

One of the many good things about the CSS styles and structure we introduced in the upgraded views is that we’re using BEM. It stands for “Block Element Modifier”, and is a naming styling that provides a better structure for the CSS code and scalable CSS. In the large list of pros, we can find that most of the HTML elements should contain a pretty unique CSS class. This will make it super easy when it comes to customizing styles!

Another good thing to know is that the new views are contained by a wrapper that works flawlessly to target the styles within each view.

The Events Calendar views are wrapped in a container that has the following class: .tribe-events

The entire implementation is described in our developer docs

Replacing Default Stylesheets

If you’d like to replace the default stylesheets offered by The Events Calendar, you can simply use WordPress’ built-in functions for enqueuing and deregistering stylesheets: wp_enqueue_style() and wp_deregister_style(), respectively.

You’ll want to use wp_deregister_style() as opposed to wp_dequeue_style() here, because The Events Calendar and its add-ons register stylesheets and scripts first before later enqueueing them. This comes with many benefits, but it means that wp_dequeue_style() will only work some of the time.

An example of this approach in action is as follows—put the following snippet in your theme’s functions.php file to disable most of The Events Calendar’s and Events Calendar PRO’s main built-in styles:

<?php
add_action( 'wp_enqueue_scripts', 'deregister_tribe_styles' );

function deregister_tribe_styles() {
    wp_deregister_style( 'tribe-events-pro-views-v2-skeleton' );
    wp_deregister_style( 'tribe-events-pro-views-v2-full' );
    wp_deregister_style( 'tribe-events-views-v2-skeleton' );
    wp_deregister_style( 'tribe-events-views-v2-full' );
    wp_deregister_style( 'tribe-common-skeleton-style' );
    wp_deregister_style( 'tribe-common-full-style' );
}

You can then use wp_enqueue_style() in a separate function to load all of your own styles.

Details

Report an issue