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

Basic font and color changes with CSS

In this post we’re going to look at some basic modifications such as adjusting fonts and colours within your event pages.

If you haven’t already done so it is well worth reading through the Themer’s Guide first of all, particularly this section, which covers setting up a custom stylesheet for event views. To summarize, though, this basically boils down to creating a new file called tribe-events.css in the following location:

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

Of course, change the theme name accordingly!

It’s all about the CSS!

While it’s beyond the scope of this post to teach you CSS (the language we’ll be using here), remember that general help with the basics is often just a short internet search away and there are lots of fantastic resources out there that can help on that count 🙂

Having a basic working knowledge of CSS and HTML is definitely an asset when the time comes for you to make changes to your site by yourself.

Main page title

Let’s start by looking at the list view title. Normally it looks like this (this actual screenshot was taken with no other customizations and just the Twenty Fifteen default theme):

List view screenshot

It may be that we want to add a little more “punch” to the title. To do this, simply open your custom tribe-events.css stylesheet and add the following code:

#tribe-events h1 {
	color: red;
	text-transform: uppercase;
}

The result should be something like this:

Screenshot of modified list title

Notice also that if you flip to other event views (such as month view, shown below) that same change will be applied there, too:

Screenshot of styled month view title

Often this is exactly what we want – consistent formatting across all views. Yet what if we want to add special formatting for the month view title that applies there and only there? With a little creativity, and thinking back to the observations we made at the start of the post, we can.

Try adding the following rule to your tribe-events.css file:

.events-gridview #tribe-events h1 {
	color: green;
}

You should now find that the month view title is green – while all other event view titles remain red (if you kept the first set of rules in place). What we’re essentially saying with this new rule is, “Make any level two headings green – but only if they relate to events and only in grid view (month view).”

Styling single event pages

Let’s visit a single event page and look at a different possible customization.

Screenshot showing upper half of the single event page

Our views are designed to blend nicely into a wide range of themes, but occasionally you may hit up against issues, such as the blue colour of items like the Google and iCal export buttons not meshing well with your own theme.

In this case the text colour is white and what we’re really interested in altering is the background colour of the button. Try this snippet:

#tribe-events .tribe-events-button {
	background: purple;
}

This time we’re changing any “Tribe event buttons” within the event area so that they are purple rather than blue.

Further tweaks

There are so many areas that you can change it is impossible to list them all here. There are certainly a wide range of further examples you can search for on our Knowledgebase and help desk – but you’re probably wondering how you can figure out the CSS code for yourself.

One of the best tools at your disposal, if you have a fairly modern web browser, are the developer tools. The steps for using your developer tools vary according to the browser you are using, but they mostly all allow you to do something like this:

  • Right click on the item you wish to change
  • Select “Inspect Element”
  • You will then see a ton of information about that element and the other items surrounding it

We also have a separate article that will help you learn more about your browser’s developer tools, as well as some sample CSS that you can use to help explore the process of theming your calendar with CSS: you can grab that here – instructions are in the opening comments 🙂

We hope that gives you some further insights into theming The Events Calendar — and good luck with your customizations!