Style events of different venues with different CSS

[Lukas]

Hi everyone

I use Facebook Importer to get events of two different venues (two different Facebook pages) and show it on my wordpress site.
I want my visitors easily notice of wich venue the event comes when they look at the overview.
Now my question: Is it possible to style events from different venues with different CSS?
Example: Events from venue 1 have red titles, events from venue 2 have green titles..

Thanks for your answer.
Best regards
Lukas

[George]

Hey Lukas!

This is absolutely possible. It will take some custom coding a bit outside the scope of the support we can provide here, but in general these are the main pieces of information you’d need to know to make this sort of customization:

1. Every event has a CSS class name added to it like .tribe-events-venue-{venue_id}, where {venue_id} here is just a placeholder for the actual Venue ID number of the venue where the event takes place. For example: .tribe-events-venue-433, .tribe-events-venue-19433, .tribe-events-venue-19, etc.

2. You can use the “Inspector” tool found in any of the free developer tools like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome, to hover over an event on your page and see all of its CSS class names.

3. With this information, you can then write custom CSS to target events tied to specific venues. If there’s a venue with an ID of 123, for example, and another with an ID of 456, then you can make events at these venues have different-colored titles with CSS like this:


.tribe-events-venue-123 h2.tribe-events-list-event-title,
.tribe-events-venue-123 h2.tribe-events-list-event-title a {
color: red !important;
}

.tribe-events-venue-456 h2.tribe-events-list-event-title,
.tribe-events-venue-456 h2.tribe-events-list-event-title a {
color: blue !important;
}


If you take all this information, the code example, and use good ol’ Google to quickly check any CSS-code-specific things you’re not sure of, you should be able to whip something up quite quickly.

Oh, and that CSS can go in the bottom of your theme’s style.css file 🙂

Cheers!
George

[Lukas]

Hi George

Thank you for your help. I will try your explanations.
There is only one problem: Facebook Importer makes a new venue for every event imported from this FB site: https://www.facebook.com/pages/sihl3/1413104925578181?fref=ts

The other FB site, that is captured has no problem and Facebook Importer uses the same venue for every event of this site: https://www.facebook.com/dukesrestaurant?fref=ts

I found this problem in another thread in this forum, but i think it was not solved yet.
Do you know what problem causes this issue?

Thanks and best regards
Lukas

[Lukas]

Sorry, correction. First FB Site is the one, that works well – second is the one that makes problems..

[George]

Hey Lukas,

Damn, really sorry about the problems with your FB venues and duplicates there. We’ve unfortunately uncovered this bug with Venues, and another bug with Organizers, and are working hard to fix these because they’re vital to the plugin functionality.

However, I don’t know when a fix for these bugs will be publicly released 🙁 Sorry to bear that bad news.

One thing that might help is to just filter post_class for now, and then add an automatically-generated Venue class name that adds a Venue CSS class based on the venue title instead of its ID number. This way, even if duplicates arise, as long as their title is the same then the same CSS class name should work fine.

I wrote code for you to achieve this, check it out – add the following code to your theme’s functions.php file:


add_filter( 'post_class', 'tribe_add_venue_title_post_class' );

function tribe_add_venue_title_post_class( $classes ) {
global $post;

if ( 'tribe_events' !== $post->post_type ) {
return $classes;
}

if ( tribe_has_venue( $post->ID ) ) {
// $venue_id = tribe_get_venue_id( $post->ID );
$venue_name = tribe_get_venue( $post->ID );
$classes[] = 'tribe-venue-' . sanitize_html_class( $venue_name );
}

return $classes;
}


This works really well for me! And hopefully it does for you, too. That function there sanitize_html_class() is a bit aggressive, but we have to use it here or else an invalid class name could be applied and that could literally break the HTML on your page…not good.

But with that in mind then, this sanitize_html_class() function can be a little aggressive and will remove spaces from names, etc.

So for an example of this, I have a venue whose title is Duncan Regional Airport. With this new function I wrote above, all events that take place at this venue, regardless of duplicate venues, will now how have the following CSS class name:

.tribe-venue-DuncanRegionalAirport

Not exactly a very pretty CSS Class name 🙂 But hopefully this code works for you and you can use it to hold you over until we get a proper fix out to prevent duplicates from Facebook.

Venues that don’t have a title will have really long, gross class names, so use a title wherever possible. And use those Inspector tools in Firebug, or chrome/safari Dev Tools like I mentioned earlier in the thread to look up any class name if you’re not sure what it is…

I hope this helps!

— George

[Lukas]

Hi George

Thanks again for your great support.
I now work with the solution, that i only change the style of the venue, that works. The other venue i do style over the general stylesheet..

Works for me, because i have only these two venues, but i’m sure other people will be glad to have your solution, that works for more than 2 venues.

For me the issue is solved.
Thanks and best regards
Lukas

[George]

Hey Lukas,

Thanks for the update, I’m glad something is working for you for now. Stay tuned to updates for the Facebook Importer, we are working on preventing duplicates and have updates coming out in the coming weeks and months.

Thank you!
George

[Author]

Posts