- This topic has 11 replies, 2 voices, and was last updated 10 years ago by
.
-
Posts
-
Is it possible to change the font of certain category titles for events?
For example, we have one category titled Parents and another titled Kids. We would like to change the Kids title font to something more “fun” than the rest of the event titles.
I tried inline styling, but the code (a portion of it) displays when hovering over the event hover and in the event list view.
When I added an inline style, the title in list view output “Children rel=bookmark Children”. When I tried adding something like an H3 tag, no code was in list view, but the H3 tags showed when the event was hovered over.
Thanks in advance for your help!pdelite,
Thanks for getting in touch! It greatly depends on exactly where you’re wanting to change the titles (ex: single event page, list view page, etc), but for the most part, our events have CSS classes associated with each Event Category that are applied to individual event elements.For example, when inspecting an event in list view, you’ll see a CSS class that looks similar to this: ‘tribe-events-category-convention’ (where ‘convention’ would be the event category slug). So, you should be able to use that as a selector in your CSS to target the specific titles that you want to change.
Hopefully that gets you pointed in the right direction, but let me know if you have further questions. Thanks! 🙂
-Casey-
That’s great to know we can change the style in list view. I would also like to change the style in the calendar view as well and on the individual event page itself. Is that possible?
pdelite,
Yes, you should be able to do the same thing in calendar view and single event view. In calendar view, you’ll notice the event category CSS classes on the individual event title. In the single event view, you’ll need to add some code to your functions.php file to add the category classes to the <body> tag in order for you to style your desired items appropriately. Just paste this code into your theme’s functions.php file to accomplish this: https://gist.github.com/ckpicker/9555637Give that a try and let me know if you have further questions. Thanks! 🙂
-Casey-
Thanks so much Casey! Can you give me an example of what a styled body tag would look like? Are you saying I need to add the CSS itself into one of the PHP files or just in the CSS?
The body tag itself won’t be styled, but this snippet just adds a category-specific CSS class to the body tag that you can then use as a selector in your CSS. In this screenshot, you’ll notice the ‘tribe-events-cat-shindig’ class, which corresponds to the category slug ‘shindig.’ So, you can use that in your CSS like this:
body.tribe-events-cat-shindig h2.tribe-events-single-event-title {
// change the font styling for 'shindig' category event titles here
}
Let me know if that answers your question. Thanks! 🙂
-Casey-
Glad I could help! 😀 Since it looks like you’re all set, I’m going to mark this thread “Answered” and close it out.
By the way, if you have a minute or two, we would love it if you’d write a few words for us here: http://wordpress.org/support/view/plugin-reviews/the-events-calendar?filter=5
Thanks in advance. 🙂
Cheers,
CaseyHmm, I think I’m missing something here…
Here is my code, where family-events is the category, but it’s not changing the styling…body.tribe-events-cat-family-events h2.tribe-events-single-event-title {
font-family: “Comic Sans MS”, Cursive !important;
}pdelite,
Unfortunately, we can’t help with specific troubleshooting regarding customizations. However, you’ll definitely want to make sure you’ve added that code that I shared above to your theme’s functions.php file, so that the appropriate category classes are getting added to the body tag.Good luck! 🙂
-Casey-
Could you confirm this would be the right code to add to the theme’s functions.php file to add a body class for the family-events category?
add_filter(‘body_class’, ‘event_category_body_classes’);
function event_category_body_classes($classes) {
if ( tribe_is_event() && is_single() ) {//Query event categories
$event_categories = wp_get_post_terms( get_the_ID(), ‘tribe_events_cat’ );
if( !empty( $event_categories ) ) {
foreach( $event_categories as $single_category ) {
$classes[] = ‘tribe-events-cat-family-events’ . $single_category->slug;
}
}
}
return $classes;
}
- The topic ‘Change the font of certain category titles?’ is closed to new replies.