Knowledgebase

Check the knowledge base articles to get a jump start on your integrations, modifications, and all around user questions. If you don’t find what you’re looking for hit the help desk.

Search Knowledgebase

Styling events widgets

In this post we will look at styling a number of different widgets provided by The Events Calendar and Events Calendar PRO.

If you are new to either plugin then some great background reading can be found in the form of our Themer’s Guide – this covers many of the basics and will give you a solid foundation for further customization work.

Standard List Widget

If you are only using The Events Calendar and wish to customize the List Widget, look no further! If you are a PRO user, however, please skip this and proceed to the next section, which covers the Advanced List Widget supplied by PRO.

As described in the Themer’s Guide, one of the first things you need to do is setup a custom tribe-events.css file. Normally this lives in your theme’s tribe-events directory, something like this:

wp-content/themes/YOUR_THEME/tribe-events/tribe-events.css

With that done you can start adding rules that target the List Widget – here are a few examples (note the usage of the .tribe-events-list-widget selector for all of these rules – this helps to ensure they target the List Widget and only the List Widget):

Of course, as with much of the example CSS in this tutorial, the end result may not be completely desirable – but it should help to give you a good idea of how to target different parts of the list widget.

Advanced List Widget

If you are a PRO user you will find that your List Widget is very similar in appearance to the list that displays beneath the Mini Calendar Widget.

To target both of these widgets you will need to set up a custom stylesheet as described in the Themer’s Guide. In this case that means creating a file called widget-calendar.css which should live within your theme’s tribe-events/pro directory, something like this:

wp-content/themes/YOUR_THEME/tribe-events/pro/widget-calendar.css

Here are some sample rules which again demonstrate how to target different parts of the widget output:

Feel free to use and modify to your hearts content 🙂

Mini Calendar Widget

To setup custom CSS for the calendar widget you will need to follow the same process outlined for the advanced list widget and create a custom tribe-events/pro/widget-calendar.css file within your theme.

Many of the rules and selectors for targeting the list that displays below the Calendar Widget are near-identical to those used for the advanced list widget itself: the primary difference is that the .tribe-events-adv-list-widget selector needs to be swapped out and replaced with .tribe_mini_calendar_widget for each rule.

Here is essentially the same code, but tailored to target the Calendar Widget:

What that doesn’t cover is the Calendar Widget grid itself – so let’s consider some additional rules that can help you to theme that part of the widget, too:

To style both the featured Venue Widget and the Countdown Widget, you will need to follow the steps described in the Themer’s Guide to create a tribe-events/pro/tribe-events-pro.css file, something like this:

wp-content/themes/YOUR_THEME/tribe-events/pro/tribe-events-pro.css

In this regard, it is slightly different from both the Advanced List widget and the Calendar Widget.

When it comes to styling the Featured Venue Widget, the .tribe-events-venue-widget selector is at the base of most rules. Here are some examples:

Countdown Widget

Please follow the steps described in the Featured Venue Widget section for creating a tribe-events/pro/tribe-events-pro.css file. With that done, it’s time to experiment with some CSS. Try adding these rules:

Note the basic selector we are using for this widget is .tribe-events-countdown-widget which, as in the other widget examples, allows us to focus our changes on this widget only (and not impact on other areas of your theme).

Summary

As you can see, different widgets require different stylesheets to be set up within your theme if you are to succesfully style them to suit your needs.

We hope this post helps you to quickly get to grips with styling each of our widgets, but if you have any questions or need more specific guidance please feel free to contact the support team at our help desk 🙂