Highlighting Events in Calendar View

[Chris Stevens]

I tried searching but was unsuccessful. Sorry, if this has been answered already. I operate a beer event site (queencityfresh.com) that can have up to 15-20 events per day. A lot of the events are recurring and are not ‘special’ events. I have been using the word FEATURED in my header to try and make those stand out.

Besides the sticky option in calendar view, is there a way to either make the event description in bold, a different color, a different background color — anything to help it stand out.

Thank you for your time and assistance.

Chris

[George]

Hey Chris!

There are indeed some additional ways you can “highlight” specific events, the easiest / most-recommended way of doing so in a case like yours would be to do the following:

a) Make an event Category for highlighted/featured events to reside in.
b) Write some custom CSS for events with this category to alter their styling to make them stand out, in terms of appearance.

For example, if you add an event Category “featured”, you can use it in addition to any other categories you might select. See this screenshot → https://cloudup.com/cVv7RwPI9V8.

Then, WordPress and The Events Calendar will generate CSS classnames for that event on the front-end of your site. The formula is that for each Event Category, a CSS class name is added to the event like tribe-events-category-{insert category name here}.

So that event in the screenshot above will have three category classnames:

• .tribe-events-category-barbecue
• .tribe-events-category-concert
• .tribe-events-category-featured

I highlighted .tribe-events-category-featured because that’s the one you’ll use for “Highlighted” or featured events.

Once you have all this, Chris, let your creative juices flow and come up with whatever works best to highlight the event. Background color, bolder text, combinations of these and other things, all are good ideas.

For a quick example, maybe you want to add a thick top border with a vibrant color to the featured events, to draw attention without making things too busy if there are many events on the page – you would head to the bottom of your theme’s style.css file, and add custom CSS like this:


.type-tribe_events.tribe-events-category-featured {
border-top: 10px solid yellow !important;
}


I hope this information helps! If you’re not familiar with CSS much, a tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome can help you pinpoint what CSS to overwrite. Very helpful.

Finally, one of our community members Andy – who just happens to be a trauma surgeon in his spare time, crazy! – wrote a plugin called “Events Category Colors” which does just what I recommended above: it applies custom coloring to events based on category, which you can configure and such. It is not an official plugin we can support or anything, and might not quite suit your needs, but worth sharing – many users do find it useful.

Check out that plugin here → https://wordpress.org/plugins/the-events-calendar-category-colors/

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