Overall Background color for calendar

[bits]

Hello,

I searched the forum and was surprised no one actually had this exact question:

My site has a background image, On specific modules I use a cream colored background so that the text can be seen better. I would like to do the same with the calendar page (that is having a cream colored (E0E4CC) background but with the main background image behind that for the sake of consistency. How can I do this in Events Pro?
I tried using a module on the calendar page which can have a background color but that did not work.
I do appreciate your help!

[Geoff]

Hi there, Maria! Welcome back to the forums–nice to see you again. 🙂

Try adding this to your theme’s style.css file:

.tribe-events-content-wrapper {
background: #e0e4cc;
}

Give that a shot and let me know if it helps. We’re limited in how much custom support we can provide, but I’m happy to try to answer any questions you have and point you in the right direction, if I can. 🙂

Cheers!
Geoff

[bits]

Thanks Geoff! Unfortunately that had no effect. Any other suggestions?

thanks again

[Geoff]

Oh shoot, sorry! There was a typo in there. Try this instead. 🙂

#tribe-events-content-wrapper {
background: #e0e4cc;
}

Let me know if that works any better.

Cheers!
Geoff

[bits]

Thanks Geoff, we are getting there!
On the menu view the “export month’s events” has a background that’s not included in my site’s colors. Same color is the background for the CURRENT time/day/week header.
I would like to change the whites, grays and charcoal headers throughout the events calendar also although this is not as important as the others.
I’m surprised that Event Pro does not allow one to configure colors.
Where/How can I change any fonts, backgrounds, etc to reflect the colors of my site?
Thanks again for your help Geoff.

[Geoff]

Hi there, Maria!

Great question. I do want to note first of all, though, that we are fairly limited in terms of helping out with custom development questions like these. That said, I’d love to point you in the right direction if I can.

On the menu view the “export month’s events” has a background that’s not included in my site’s colors.

That button one is controlled with the .tribe-events-button class. You can use CSS to update the background color.

I would like to change the whites, grays and charcoal headers throughout the events calendar also although this is not as important as the others.

There is a CSS class for each and every element in the calendar. I’d highly suggest checking out this handy tutorial we have on using your browser’s DevTools to identify the CSS class you’re targeting so you can modify them in your theme’s style.css file.

I’m surprised that Event Pro does not allow one to configure colors.

This is a feature that’s come up in conversations and would certainly be interesting. I’d be great if you suggested it on our UserVoice page. We check there for popular ideas to include in future releases.

Where/How can I change any fonts, backgrounds, etc to reflect the colors of my site?

I believe the tutorial I linked to above will help you find the classes for these. 🙂 In general, the calendar does not set its own fonts but will instead inherit what is already set in your theme’s CSS.

Cheers!
Geoff

[bits]

Thanks Geoff. Just one more thing. The background css addition you provided works for all views except in the specific event. The event details does not have the background (E0E4CC).

What can I add to the css to get this view to have the background?

[bits]

Figured it out…thanks anyway Geoff

[Geoff]

My pleasure! Thanks for following up and nice work.

I’ll go ahead and close this thread, but please feel free to hit us up with a new thread if any other questions pop up. We’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts