Different background in photo view based on event category

[Martin]

Dear support team,

I’ve noticed that I can easily set different background colors for regular events and featured events. These colors are applied to all kinds of views, including the photo view (which I’m most interested in). Is there an easy way to set this color based on the event category rather than its status as regular/featured? I will eventually have 3-4 categories and would love for each of them to have their own background color in photo view. Would be great if you could point me in the right direction!

Cheers,

Martin

[Cliff]

Hi. Please check out https://wordpress.org/plugins/the-events-calendar-category-colors/ (third-party, not guaranteed or supported by us), and let me know if you have any follow-up questions on this topic.

If it doesn’t work for Photo View, you could use CSS to target each category. To do so, go to a category page and then a CSS selector like this might work:

body.post-type-archive-tribe_events.events-category-your-category-slug

Please let me know how this goes for you.

[Martin]

Hi Cliff,

thanks a lot for your reply and your help! The plugin gives me some of the functionality I am after but unfortunately doesn’t let me target the background color in photo view. I tried your CSS and added it in the MY-THEME/tribe-events/tribe-events.css as follows:

body.post-type-archive-tribe_events.events-category-MY-CATEGORY-SLUG {
color: #907010;
}

I’m a complete CSS newbie and this didn’t work as expected. Did I put this in the wrong place or is my syntax wrong?

THANK YOU!

Martin

[Cliff]

Could you please link me to your Photo View and tell me an example of a category and its desired color?

[Martin]

This reply is private.

[Cliff]

Here’s some CSS that could do that:

body.events-photo .tribe-events-category-open-painting .tribe-events-photo-event-wrap {
background-color: #0000ff;
}

Here’s a preview of it in effect: https://cl.ly/1X2g0r1l0Q3x

 

You can add custom CSS code via your child theme’s style.css file, via WordPress 4.7’s Customizer CSS settings, or via a third-party plugin (not guaranteed or supported by us), like:

• SiteOrigin CSS (helps you visually build CSS selectors via its Inspector and Visual Editor, if that’ll help you)
• Simple Custom CSS
• Jetpack (supports regular CSS and the LESS and Sass pre-processors)

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Note that if a single event in Photo View has more than one category, it might have a different (possibly unexpected) effect. Additionally, you might want to add a :hover rule, since I saw that in effect on your site for the default color.

I’m happy to have gotten you started toward this customization. If you need additional help with this, please ask your developer or reference our documentation and list of known customizers.

Please let me know how this customization goes for you.

[Martin]

Hi Cliff,

thank you – this works perfectly. Exactly what I was after! I know support with customizations like this actually go beyond the support you promise – I really appreciate it.

Thanks again,

Martin

[Cliff]

You betcha!

We aim to please 🙂

[Author]

Posts