Coloring Your Category Events

Published on: November 23, 2011 |Tags: ,,, | Categories: Tutorial

Hi there folks! Today I’m going to show you how to color coordinate your calendar, i.e. give some color to your events so events in each category have a unique color.

Note: If your events are only in one category this will not be as helpful for you but maybe this is the motivation you’ve been looking for to categorize your events!

Screenshot of What We’ll Be Doing

Adding The CSS

You can add the CSS needed to achieve this effect in your theme’s main style.css file or you can also use The Events Calendar events.css file located in /wp-content/plugins/the-events-calendar/resources/events.css. If using events.css, make sure you are overriding the plugins stock events.css file by duplicating it and placing it in an ‘events’ folder within your theme. This will ensure you won’t lose your styles the next time you update.

For demonstration purposes say you have three categories named: Presentations, Conferences and Celebrations. An event under one of these categories will then be given a class with the name of it’s category prefixed with ‘cat_’, for example: ‘cat_presentations’ for the Presentations category.

This class will be used for every event displayed on the calendar that is in that category so you can add a background color to that class in CSS and have that background used for all the events in that category. In CSS all you need to do to target this class and apply styling to it is use:

.cat_presentations {
background: #fed64c;
}

This would apply a yellow background to events in the Presentations category.

Then for example in the next category Conferences, you want to give it a blue background, you would just add below the above CSS:

.cat_conferences {
background: #68a7d3;
}

Now since these classes are also used in the events list view and on single events you’ll want to more specifically target your CSS selectors so the backgrounds are only used in the calendar view. To do that, just add:

.tribe-events-calendar .cat_presentations {
background: #fed64c;
}

‘.tribe-events-calendar’ is another class that is added to the entire calendar and the category classes are children of that class so by prepending with the parent class you are indicating to only style the category events that are within it and not on the list view or single event pages.

There is a lot more you could do with styling your calendar, like changing the background of the strip in the tooltip popup to match your calendar event background. For example:

.cat_presentations > .tribe-events-tooltip .tribe-events-event-title {
background: #fed64c;
}

And you can combine this with the other background CSS like so:

.tribe-events-calendar .cat_presentations,
.cat_presentations > .tribe-events-tooltip .tribe-events-event-title {
background: #fed64c;
}

And since event links might not be looking so hot on that new background, you can style those in same way, specifically for each category like so:

.tribe-events-calendar .cat_presentations a {
color: #333;
}

I’m also only using one property at a time but you can add as many styling properties as you want:

.tribe-events-calendar .cat_presentations a {
color: #333;
font-weight: bold;
text-decoration: underline;
text-transform: uppercase;
}

The skies the limit! Here is a full snippet from the examples I used here and from what you see in the screenshot above:

.tribe-events-calendar a {
font-weight: bold;
}
.tribe-events-calendar .cat_celebrations a,
.tribe-events-calendar .cat_conferences a {
color: #fff;
}
.tribe-events-calendar .cat_presentations a {
color: #333;
}
.tribe-events-calendar .cat_celebrations,
.cat_celebrations > .tribe-events-tooltip .tribe-events-event-title {
background: #6da351;
}
.tribe-events-calendar .cat_presentations,
.cat_presentations > .tribe-events-tooltip .tribe-events-event-title {
background: #fed64c;
}
.tribe-events-calendar .cat_conferences,
.cat_conferences > .tribe-events-tooltip .tribe-events-event-title {
background: #68a7d3;
}

This should give you a pretty good base to work off of and actually even a pretty good CSS primer if you didn’t know much about CSS before. Hopefully it will inspire you to learn more about the powers of CSS and how much you can do to customize the look of your events in The Events Calendar.

If you have questions, hit me up in the comments!

Tags: ,,, |

68 Responses to Coloring Your Category Events

  1. Joe says

    I got this to work, simply adding the code to colour code in the calendar itself, but I also have a strip across the top of the page with the same color.

    This appears behind where it says ‘Calendar of Events’, but only comes hafway down the words.

  2. Jonah says

    Hi Joe, do you have an example I can look at?

  3. Lise says

    Is there a way to colour event on all the widgets and calendar view but not in the event list?

    • Jonah says

      Hi Lise,

      The above CSS should only style events in the calendar and not in the event list already. Are you not seeing it this way?

      Unfortunately, there’s no current way to style the mini calendar by category in this way but I have added this as a future feature request.

      Regards,
      Jonah

  4. Steven says

    This is on the agenda for one of my clients. Glad to see this tutorial up!

    • Jonah says

      Glad to be of service Steven :)

  5. karen says

    @jonah
    I simply applied the first bit of code,
    .cat_presentations {
    background: #fed64c;
    }
    and changed the presentations to my event category .cat_tubac…
    The WHOLE background turned yellow.. What is that about? did I not capture the loop or something?
    Obviously I am a newbie, and will figure it out eventually.. but it is easier just to ask. thanks for listening. I will play with it when I have more time.

    • Jonah says

      Hi Karen, can you tell me your website address so I can take a look? You might need to get a little more specific with your CSS declaration.

  6. Robert says

    Hi Jonah,

    with the tutorial I managed to change the text (title) but the background couldn’t be changed.

    • Jonah says

      Hi Robert, do you have a URL I can take a look at?

      • Robert says

        Hi Jonah,
        Sorry I managed to fix this. I think adding the tool-tip declaration seemed to stop the background color functioning for some reason.

        • Jonah says

          Glad you figured it out Robert!

  7. Sarah says

    Thanks for the great feature! I’m having a little trouble, I’ve added the info to my theme style sheet but not sure what to name my category when it’s more than one word (For Family Caregivers is one). I tried using the slug but that did not work. Sorry, new at this! Any help would be greatly appreciated!

    • Jonah says

      Hi Sarah, you should be able to use cat_for-family-caregivers – the category name will always be preceded by ‘cat_’ and then followed by the slug of your category name. And in cases where the slug is more than one word, the words will always be separated by hyphens. You can also always use a tool like Firebug or Chrome Developer Tools to view page elements and look at the classes there.

      I hope that helps,
      Jonah

  8. shanny says

    For some reason the tooltip seems to be breaking things, if I add it the color not only doesn’t appear on my tooltip but the color of the category on the calendar also goes back to default..? I’ve played with the settings and it seems I can get either or working but not both hmm..

    • Jonah says

      Hey shanny, do you have an example I can look at?

      • shanny says

        Sure, may I email you the details? My website requires a username and password to enter. Thanks for the help!

        • Jonah says

          Sure, just email jonahcoyote [at] gmail [dot] com

  9. Yazmin says

    Thanks so much for the article. It works great. Is it possible to change the color based on the Venue rather than the category? Or do I need to create a category for each venue and color accordingly? The site I’m working on is not live. If you cannot answer without seeing it, I’ll ask again when it’s live. Thanks again!

  10. adam mclane says

    Thanks for this tip. I was able to apply it fairly easily. For those using the Thesis framework who may be new. When adding these elements to custom.css make sure to drop .custom in fron of everything. Also, you may need to separate selectors out into individual lines to control everything you want. A bit more tedious but totally doable. (And worth it!)

    • Jonah says

      Thanks for the Thesis tip Adam!

  11. Mummy Ninja says

    This is really nice. Exactly what I’m looking for. I hope that you’ll release a free theme where this feature is built-in or is there an existing plugin for this feature? Sorry for such a noob question. T_T

  12. oliver dupont says

    Hi!

    How to get the event calendar attached to one of your wordpress pages? I can’t figure that out.. I can only say “preview changes”, and then see the calendar..

    • Jonah says

      Hi Oliver, your question is unrelated to this post so can you please post it to our forums so we can start a new thread there?

      Thanks,
      Jonah

  13. Dominic says

    Jonah

    Having tried to get this to work, it seems that the background wont change colour..

    http://conventionscene.co.uk/events/2012-05/

    • Jonah says

      Hi Dominic, it looks like you either didn’t assign your events to categories or the category classes are not being populated for you which is probably a theme issue. Did you assign your events to categories and match those category names with the classes you are targeting in your CSS?

  14. Terri says

    Hi:

    Here’s the production site:
    http://few.modernmediajapan.com/events/2012-04/

    I have 2 kinds of events: FEW events and non-FEW events. I wanted the non-FEW event category and tooltip title background to be blue, but I was only able to make the Calendar view blue: not bad, but not the whole thing I need to do. Lots of trial and error (more error). Can you let me know what I’m doing wrong? Thanks,

    Terri

    • Jonah says

      Hi Terri,

      The problem is this declaration in your style.css:

      .tribe-events-tooltip .tribe-events-event-title {
      color: white!important;
      background-color: #C00!important;
      }

      You need to get rid of the !important rule and apply the background color based on category like so:

      .cat_non-few-event .tribe-events-tooltip .tribe-events-event-title {
      background: #68A7D3;
      }

      And set your other titles according to category. If you remove the !important rule that can serve as the default and then you can override specific categories with the example I provided.

      I hope that helps.

  15. Dozza says

    This is a handy post!

    I noticed a slight error in the above supplied code, at least in Safari ….

    The 4th block of css is displaying ‘>’ as the hex/iso equivalent ‘>’

    Maybe fix that one!

    • Jonah says

      Thanks for the comment and pointing that out Dozza! I just corrected the code so it should be all good now :)

  16. Sandra says

    Hi Jonah,
    Thks for that but unfortunately I have no idea where to copy this CSS in my WordPress’ theme CSS….
    I also try to find event.css somewhere with FileZilla but can’t find it.
    The theme I use is named “Admired” and I try to paste it at different places in with it but nothing change…
    Thank you very much for your help,
    S

    • Jonah says

      Hi Sandra, sorry, I was not explicit enough in my explanation of where to find events.css – I’ve updated the post accordingly – it’s located in /wp-content/plugins/the-events-calendar/resources/events.css

      I hope that helps but let me know if you need anything else with this.

      Cheers,
      Jonah

  17. Sandra says

    Thanks Jonah, but this is the point I only have “events-admin.js” there, event.css can’t be find, nowhere… how strange…

    • Jonah says

      Hi Sandra,

      That’s not good. Please try reinstalling both plugins (free and PRO) to get the missing files back.

      - Jonah

  18. John says

    Jonah,

    When I try this, it breaks the hover popup. When I hover over the event title, the popup opens inside of that days cell of the calendar grid.

    John

  19. Jonah says

    Hi John,

    Do you have an example I can look at? It sounds like you may have edited the CSS incorrectly but I need to take a look and see what’s going on to know more.

    - Jonah

  20. John says

    Jonah,

    Here is a screenshot:

    This is the code I added to my custom child theme:

    ‘.tribe-events-calendar a {
    font-weight: bold;
    font: 12px/1.5em ariel, helvitica;
    }
    .tribe-events-calendar .cat_hunterdon-county a,
    .tribe-events-calendar .cat_bergen-county a {
    color: #fff;
    }
    .tribe-events-calendar .cat_morris-county a {
    color: #EFE9D1;
    }
    .tribe-events-calendar .cat_hunterdon-county,
    .cat_celebrations > .tribe-events-event-title {
    background: #6da351;
    }
    .tribe-events-calendar .cat_morris-county,
    .cat_presentations > .tribe-events-event-title {
    background: #AF8903;
    }
    .tribe-events-calendar .cat_bergen-county,
    .cat_conferences > .tribe-events-tooltip .tribe-events-event-title {
    background: #68a7d3;
    }’

    • John says

      Here is the screen shot: http://indianrockinn.com/images/screen-cal-bnj.jpg

      • Jonah says

        Hi John, thanks for posting the code and the screenshot. Unfortunately this doesn’t give me enough – I need to be able to look at the site and the code directly to determine what the issue is. Can you please provide me a link to view the website?

        Thanks,
        Jonah

  21. John says

    Jonah,

    Just sent you an email.

    John

    • Jonah says

      Hi John,

      I see what the problem is – you only have your custom code in your copy of events.css but you actually have to have all the code from the base file (/wp-content/plugins/the-events-calendar/resources/events.css) in addition to any changes you want to make. I know this is not ideal and we have a ticket out to do something about this in the future, but for now, if you’re going to override the base events.css, you must have all of the CSS from that file and your modifications.

      Try that out and let me know if you’re still having problems.

      Cheers,
      Jonah

  22. John says

    Jonah,

    It worked! Thank you so much.

    I had assumed that I only needed the relevant code. Including all the other code like that is something I used to do a long time ago. It does work though.

    It would be good if this could be written into the plugin in the future as an option. Do you think that is possible?

    John

    • Jonah says

      Hi John, glad that worked. By written into the plugin as an option do you mean the ability to only override what styles you want in events.css?

  23. Amy Spain says

    Hi Jonah,

    I am not really sure where to input the code in my events.css file. This snippet
    “.tribe-events-calendar .cat_presentations a {
    2
    color: #333;
    3
    }
    -I couldn’t find it in the css; am I supposed to input it somewhere particular?
    I thought I should put it after
    “.tribe-events-calendar a {
    2
    font-weight: bold;
    3
    }” but I couldn’t find that either….my code reader isn’t working too well, though, so I’m hoping it’s just that my eyes are missing it. I haven’t altered anything else in the css here. Can you supply me with a line number where I should insert these things?

    Thank you,

    Amy

    • Jonah says

      Hi Amy,

      It should be fine if you just put it at the end of the file, that’s actually what I would suggest for all changes to events.css because then it’s easier to re-implement the core stylesheet when anything change. You have your custom CSS at the bottom and the core stuff is left untouched at the top, when anything changes to the core file you can easily just copy/paste the core file back in above your changes.

      Hopefully that works but let me know if you have any more troubles with this.

      Thanks,
      Jonah

  24. Vladimir says

    Although, I’m quite sure about the answer…. is there any way… or setup… or hack how to deal with categories written in cyrillic (none latin letters, bun in Unicode)?

    • Jonah says

      Hey Vladimir, I’m not sure. What’s the problem you’re having with cyrillic letters? Got some examples?

      Thanks,
      Jonah

      • Vladimir says

        Sorry for my late answer.
        The problems I have are related with categories which are written in Cyrillic. Regarding instructions, category name must always present inside CSS with prefix “cat_”, isn’t it?
        For example, I have a category with name “Кирилица” (it’s Cyrrilic) and the CSS code must be as follow:
        .cat_Кирилица {
        background: #fed64c;
        }
        So… my question was is there a way to overcome the Cyrillic naming issue. I’m sure the same problem exist with any categories which are not in Latin alphabet, because in CSS fiile, all identifiers must be in latin.

        • Jonah says

          Hi Vladimir, I’m not quite sure what to do about this so I’m checking with another developer. We may just have to use category ID’s instead of names to get around this… Stay tuned :)

        • Jonah says

          Hi Vladimir,

          The developer got back to me on this and said that the function that generates the classes should return the category id if it can’t strip a category down to an alphanumeric and has asked me to ask you if you’ve tried deactivating other plugins to see if this helps with at least getting category classes with id’s…

          Let me know,
          - Jonah

          • Vladimir says

            As far as I understand, the idea is to leave the rows inside CSS with Cyrillic category names (.cat_Кирилица {background: #fed64c;}) and to relay that WordPress is going to strip them to categories IDs? If it’s so… it’s not working :)
            But I’ve a try with comment’s slug – if the slug is in latin and it’s a single word, everything works fine! So, for me that is the compromise which do the job. Ahyhow, may be it’s better such possibility to be mentioned somewhere (in documentation, as remark… etc. )

          • Jonah West says

            Hi Vladimir, I don’t quite understand your response/suggestion. It sounds like you maybe found a workaround for this but not completely? What is it that you are suggesting we update in the documentation?

            Thanks,
            Jonah

  25. Andy says

    Jonah, I’m working on a plugin for this. https://github.com/afragen/events-calendar-category-colors
    I could you a little help with a few questions. I’ve emailed Rob, as suggested in the forum, but I thought I’d make a note here as well. Thanks.
    Andy
    andy [at] thefragens [dot] com

    • Jonah says

      That’s awesome Andy! I’ll take a look at the email and see what I can do. Feel free to email me directly at jonah [at] tri [dot] be too.

      Thanks,
      Jonah

  26. Agatha says

    Hey Jonah,

    Thanks so much for this! It’s amazing… I have a question though.

    When I insert your code, it only changes font colour… and when I change ‘color’ to ‘background’ all it does it highlight the words. I’d like to display the fun full rectangles your example displays.

    I’m a complete CSS noob, so any help will be GREATLY appreciated.

    Here’s our calender (beware, it’s huge): http://ontarioculinary.com/events/

    • Jonah says

      Hey Agatha,

      Hmmm, have you tried adding this CSS?

      .tribe-events-calendar .cat_uncategorized > .tribe-events-tooltip .tribe-events-event-title {
background: #F4FC03;;
}

      It’s looks like you’re missing the CSS to affect the tooltip titles.

      - Jonah

  27. Andy says

    I’ve converted this tutorial to a plugin. Let me know how it works for you.
    http://wordpress.org/extend/plugins/the-events-calendar-category-colors/

    • Vladimir says

      I do confitm – the plugin also works with Cyrillic, if the slugs are typed in Latin. May be this is a side effect, but only categories with “proper” slugs are shown. This way, it’s even better. Thanks!

  28. Shane Pearlman says

    Andy, that is truly awesome! Thanks for the handy contribution.

    • Andy says

      Just updated the plugin to allow for styling of left border.

  29. Rob says

    Is this still applicable with today’s version (8/15/12)? I can’t find the .categories in the css…

    • Rob La Gatta says

      Rob: this should be functional, yes. Are you trying to use our tutorial or Andy’s plugin? The two should not be used together, as they are two means to the same end…

  30. Dave Reed says

    Hi,

    I’ve followed your tutorial above and it works like a charm – thanks. I have two other questions though:

    1) On the event detail page, how can I style the event category so it matches the colour of the event category on the calendar view. So for example I’ve used this:

    .tribe-events-calendar .cat_ladies a {
    color: #ff0000;
    font-weight: bold;
    text-decoration: underline;
    }

    To colour my ‘ladies’ category red, but when I go into an events page like this http://www.leamingtongolf.co.uk/diary/ladies-captains-away-day/ the category link is still black.

    2) How do I hide the tooltip on the calendar view? My theme seems to be chopping it off quite a lot so you can’t see any of the info in it, so I’m thinking it’d be better to just remove it completely.

    Thanks so much for your help.

    • Rob La Gatta says

      Hey Dave. I can definitely get a dev (Jonah, most likely) to respond to this…but would you mind bringing the discussion into the forum (at http://tri.be/support/forums), so we can better track the discussion there? Comments aren’t quite robust enough for us to have a solid back-and-forth discussion on this.

      Jonah, who wrote this tut, has been out on sabbatical the past month but returns this week. I can totally get him to take a look at the thread over the next few days if you can post it before then. Thanks for your patience on this so far.

    • Jonah West says

      Hi Dave,

      That CSS will not apply on single events because the css classes are different. You’ll also need to make a modification to the single event template to get the event category classes added for each category so you can target them in the CSS. First, make a copy of /wp-content/plugins/the-events-calendar/views/single.php and place in an ‘events’ folder in your theme. Then, in your copy of single.php find on line 34 where tribe_meta_event_cats is called and replace with the code here: https://gist.github.com/2967263

      Then, you can modify the colors of those links like so in your CSS:

      .category-meta .cat_ladies {
color: #ff0000;
font-weight: bold;
text-decoration: underline;
}

      …and to be most efficient with your css it would be best to just put the styling in one declaration like so:

      .tribe-events-calendar .cat_ladies a,
.category-meta .cat_ladies {
color: #ff0000;
font-weight: bold;
text-decoration: underline;
}

      I hope that helps!