[tribe_events] shortcode CSS not rendering correctly from main calendar

[Tommy Chamings]

I can’t get the border between events on the main calendar (highlighted in red on the attached image) to show up when the calendars are displayed using the [tribe_events] shortcode. This CSS from the main calendar isn’t showing on the shortcode calendar. How can I get the dividers to show on the shortcode calendars?

.events-archive.events-gridview #tribe-events-content table .type-tribe_events {
border-color: #363d4d;
margin-bottom: 0px;
}

Here’s my main calendar
https://test.bigrockclimbing.com/sessions/

I have no direct menu link to this, instead I use 2 seperate calendars fltered by category since the business (climbing gyms) operates 2 separate locations in the same city.

Here are my 2 calendars built using [tribe_events category=”location inserted here“]
https://test.bigrockclimbing.com/mandeville-drive-book/
https://test.bigrockclimbing.com/bond-avenue-book/

[Victor]

Hi Tommy!

Thanks for reaching out to us! Let me help you with this topic.

It seem the css selectors you are using do not apply to the shortcodes. Try using the following css instead:

#tribe-events-content table .type-tribe_events {
border-color: #363d4d;
margin-bottom: 0px;
}

Does it work? Let me know about it.

Thanks,
Victor

[Tommy Chamings]

Hi Victor,

The CSS you have supplied is sames as I wrote in my original post and only works for the main calendar, not the shortcode calendar.

So unfortunately I still have the same problem. It’s actually quite frustrating how differently the shortcode calendar renders to the main calendar. I’ve had to apply a lot of CSS changes to get them to match. This problem with the border is my last hurdle so I’d be really happy if you can crack it!

Thanks

[Victor]

Hi Tommy!

The CSS code I sent is slightly different from the original. You can see that I removed the .events-archive.events-gridview selector, which is targeting elements that differ from the main events calendar and the shortcode.

I tried using the new CSS code and it works for me in your page. If it still does not work, please try clearing your browser cache and see if any difference.

Let me know how that goes.

Thanks,
Victor

[Tommy Chamings]

Hi Victor,

Thanks for pointing me in the right direction. It required a bit more code, but this works:

#tribe-events-content table .type-tribe_events {
    border-bottom: 1px solid #363d4d !important;
    margin: 0 5% !important;
    padding: 2px 0px !important;
}
#tribe-events-content table .tribe-events-last {
    border-bottom: 0 !important;
}

[Victor]

Right on Tommy! Great to know you could find a way to make it work!

Thanks for following up to let us know and to share the solution so others needing to change that can use the code 🙂

It seems you are all set with this, so I’ll go ahead and close the thread. Don’t hesitate to open a new topic if anything comes up and we’ll be happy to help.

Cheers,
Victor

[Author]

Posts