Small CSS Change for calendar header

[Paul]

I have a similar issue to https://theeventscalendar.com/support/forums/topic/small-css-change-in-view/ and want to change the background of the calendar header, thats all. Is it possible to let me know where.

Thanks

[Geoff]

Hi Paul, thanks for writing in!

Try adding this CSS snippet to your theme’s style.css file or using the Simple Custom CSS plugin:

#tribe-bar-form {
background: orange; /* or whatever color you want :) */
}

Will that work for you? Please let me know.

Cheers!
Geoff

[Paul]

No unfortunately that didnt work.

[Paul]

Hi Geoff
theres doesnt seem to be anything like #tribe-bar-form in the original css sheet?
Thanks

[Geoff]

Hi Paul,

Will you please send me a screenshot of what you’re trying to change? I was going off the screenshot of the previous thread you shared, but it looks like this is something slightly different and a visual would help me out a lot.

Thanks a ton!

Geoff

[Paul]

I just need to change the grey calendar header background.

Thanks

[Geoff]

Thats super helpful, thanks!

This should do the trick:

.tribe-events-calendar thead th {
background: orange; /* or whatever color you want :) */
}

Let me know if that does a better job. 🙂

Thanks!
Geoff

[Paul]

Hi Geoff

It is and it isn’t working. When the page loads or refreshes it flashes orange (just using that to see if it works) and then the dark grey settles over it. So something is overriding it. I had put the code in the custom style sheet of the child theme. so not sure what is overriding it, I will continue to fiddle and get back to you.

Thanks

[Geoff]

Thanks Paul!

Not sure if it will help at all, but you could try this as well:

.tribe-events-calendar thead th {
background: orange !important;
}

Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts