Custom CSS Example

The Events Calendar offers a few ways to customize the calendar’s CSS. One of the options is creating your own stylesheet to override the plugin’s stylesheet. This process is outlined in the “Customizing CSS” guide, which is worth checking out before proceeding.

Let’s look at an example of creating a custom stylesheet to override the calendar’s default styles. Say you want to change the background color of month view so it’s not so… white.

Create a new folder in your theme

Like template overrides, custom calendar stylesheets go into a folder in your WordPress theme called tribe-events. Add that folder if it isn’t there already.

Screenshot of a theme folder with a tribe-events folder in it.

Create a new CSS file in that folder

You could copy the original CSS file located in the plugin, but again, there’s no reason to do that since your custom stylesheet is loaded in addition to the plugin’s stylesheets rather than replacing them.

Go ahead and create a new file in the tribe-events folder in your theme called tribe-events.css.

Add your custom styles

That’s right, time to code! Let’s break open DevTools to see how we can change the calendar’s background.

Screenshot off the calendar month view with Chrome's developer tools window open.

Looks like we have the class we’re looking for: .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__body

Phew, that’s a long class name! No matter, though. We can drop it into our tribe-events.css file and add our background style. Perhaps a light shade of blue will look nice without washing out the calendar content.

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__body {
    background-color: #f5f6ff;
}

Let’s save the file and check out the results:

Screenshot of month view with a light blue background.

Oh hey, that’s pretty nice! Although this is a fairly simple example, customizing any of the calendar’s styles with your own stylesheet follows this same pattern.