Change color of date icons based on category

[Neil Heird]

Hi. I am using the Community Events addon and The Events Calendar Category Colors by Barry Hughes. The color addon works great (as you know), but I would like to tweak the appearance of the date icon that appears next to an upcoming event in list view (see link). I have a calendar where users create events that fall into 1 of 3 different events. Each event has the colored bar next to it which is great, but I would like the corresponding mini date / calendar icon that is displayed next to the listed event to be the same color as the colored category assigned.

is this possible? see my page here: http://oxleyparent.com/portal/dashboard/scheduling-center/

[George]

Hey Neil,

This is indeed possible – the trick is to find what the HTML classnames are for events of a certain category, and then style the .list-date elements on a per-category basis.

For example, I went to the link you provided, and on that page the topmost event on the right-side widget area has the category class of .tribe-events-category-co-parent-1

So some CSS to adjust the coloring of that List-date element within events with that category would look like this:

.tribe-events-category-co-parent-1 .list-date {
    background: #ecb897 !important;
}

If you want to get fancy with it, you can extend this to other elements within the .list-date item, like the day name and the day number separately.

Styling the day number would look like this:

.tribe-events-category-co-parent-1 .list-daynumber {
    color: #fff !important;
}

And the day name like this:

.tribe-events-category-co-parent-1 .list-dayname {
    color: #000 !important;
}

Here’s how all three of these rules make your event look → https://cloudup.com/cAq8DMtr-E6

Pretty cool – you can do this for each individual category as need, and if you’re not sure about how to find the class name for a given category on an element, check out a tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They’re all free, and have an “Inspector” tool which, when clicked, you can hover right over the element you want to style and look for a category-based class name – here’s a screenshot of how I found this on your site using the Inspector tool for Firefox: https://cloudup.com/cF0hjTO5NZv

I hope this all helps!

Cheers,
George

[Neil Heird]

thanks! worked perfectly. one quick follow up…

i see that in the list view of upcoming events, certain meta is displayed. how difficult would it be to have the event category name displayed there as well? so perhaps in a third line on its own, below the address?

[Neil Heird]

Hi again… any update to my last question?

[George]

Hi Neil,

You can indeed add categories anywhere you need, but it’s a bit more involved of a customization – your best bet is to search around the forums for pre-existing threads related to this, as we’ve shared code before, but the general idea is to first make custom theme templates of any parts of The Events Calendar you want to want to customize. To learn more about that, check out our official themer’s guide here → https://theeventscalendar.com/knowledgebase/themers-guide/

Once you’ve got custom template files in place, you can use functions like tribe_get_event_categories() to display the event categories quite easily – check this function out in the source code of your plugin files to learn about, and play around with adding it in your custom template files. This should be a great start!

Cheers,
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts