[tribe_events] shortcode CSS doesn't match the "main events page"

[Tommy Chamings]

Here’s my main events page:
https://www.bigrockclimbing.com/sessions/

And I’ve tried Embedding Calendar Views with the [tribe_events] Shortcode here:
https://www.bigrockclimbing.com/home-old/

As you can see, the CSS rules are different. I can rewrite new CSS rules for [tribe_events] but I before I do this, I’d like to know why the rules are different.

Thanks
Tommy

[Hunter]

Hey Tommy,

Welcome back to our premium plugin forums. I did a quick test and I’m not experiencing the same behavior as you. When I make a change to my main calendar, it also affects the [tribe_events] shortcode styles. For example, I added the following CSS to my theme’s style.css file and it changed the background color of the active day in month view to red on both the main calendar and the calendar seen when using the [tribe_events] shortcode.

#tribe-events td.tribe-events-present div[id*="tribe-events-daynum-"] {
background-color: #ff0000 !important;
color: #fff;
}

Have you tried different options under Events > Settings > Display to see if you get the desired results? Let me know if that makes any difference and we’ll go from there. Cheers!

[Tommy Chamings]

Hey Hunter,

Thanks for taking the time to respond.

I’m using Avada Theme. CSS for my main events page is picked up from styles.css as you’d expect.

I’ve run a few tests using Theme Options on my dashboard, e.g. I can specify Primary Color (currently using Orange #f26522) and this will change things like the tool tip head, month view calendar header, active day colour etc. I’ve checked and if I make changes here, the main events page is updated, but not the [tribe_events] shortcode calendar.

Reference main events page http://www.bigrockclimbing.com/sessions
The day headers currently have an orange bar. Here’s the CSS after inspecting the element:
tribe-events-calendar thead th {
font-size: 15px;
font-weight: normal;
border-bottom: 1px solid #000000;
}

Reference [tribe_events] page http://www.bigrockclimbing.com/home-old
The day headers currently have a grey bar. Here’s the CSS after inspecting the element:
tribe-events-calendar thead th {
background-color: #666;
color: #fff;
font-weight: 700;
padding: 1em 0;
white-space: nowrap;
border-left: 1px solid #666;
border-right: 1px solid #666;

I tried adding this to styles.css and it changed the CSS for main events and for the shortcode.

.tribe-events-calendar thead th {
background-color: #ff0000 !important;
}

However I’m still left with my original problem: the [tribe_events] shortcode is not reading styles.css in the same way that the main events page is. Yes, I could manually input CSS in styles.css to match the main events page calendar to the shortcode calendar, but the underlying problem still exists.

[Hunter]

Welcome back,

I notice one site is served over http and the other https. Can you updated version 4.3.3 for both TEC and PRO and let me know if you’re still experiencing the same issue? According to our Release Notes, we just included a fix which might be the cause of conflict:

Fix — Prevent HTTPS websites from attempting to load plugin assets over HTTP.

Please update and let me know if the conflict is still occurring and we’ll continue investigating. Thanks again and have a great afternoon. Cheers!

[Tommy Chamings]

Hey Hunter,

I’ve updated to 4.3.3 but I’m afraid the issue is still present. I’m using site wide https.

[Hunter]

Hey Tommy,

I would love to continue troubleshooting this issue with you but without the ability to reproduce the behavior, there isn’t much I can do. I personally tested the issue on my local environment using the latest version of Avada (5.0.5) and our plugins, but when I made changes through Avada’s Theme Options > CSS, the code was honored for both the main events calendar and any calendars being called onto pages/posts/CPTs using the [tribe_events] shortcode.

Sorry I can’t do more here and I encourage you to reach out to Avada to see if they have any insight on the matter. You might also want to revisit our New User Primer and Events > Settings > Display to see if different options produce the desired results.

Best of luck and have a great week ahead. Cheers!

[Tommy Chamings]

Okay Hunter, thanks for trying though.

I can get around the issue with custom CSS so it’s not a huge deal anyway.

[Hunter]

Tommy,

Thank you for understanding the situation. I’ll be sure to keep an eye on the bug reports for anything resembling the behavior you’re experiencing. Have a great week ahead and please feel free to create a new thread if you have any additional questions or concerns. Cheers!

[Author]

Posts