Calendar Background Color

Dave,

Are you referring to the background of the entire calendar? You can already change the event title’s border and background.

I’m not quite understanding what you wish to accomplish.

And thanks for the tip. ??

Andy

Hi Andy,
By default in installing the Event Calendar there is a Event Calenar. This calendar doesn’t have a shortcode. I’m going to use this as my primary calendar because it will inherit all events from my event categories. In my Youth page, I put a background color with Elementor because this calendar has a shortcode. In the future, I plan on changing the Event Slug from “Event” to “Church-Calendar” to inherit my new Nav Bar.

I asked tech support for some background CSS for their Event calendar. This changed my Youth page and the Events. I only wanted to change the Events page. This is what they gave me:

body.tribe-is-responsive {
background: blue;

This did change the background, but also the sidebar. I wanted just the calendar background. They wouldn’t give me anymore help in this area. That’s why I’m writing you.

Does this help you?

Thanks,
Dave

• This reply was modified 5 years, 3 months ago by dadams76.
• This reply was modified 5 years, 3 months ago by dadams76.
• This reply was modified 5 years, 3 months ago by dadams76.

Try this.

For the shortcode try the following.

.tribe-events-shortcode.tribe-events-view-wrapper {
	background-color: yellow;
}

For the main calendar try this.

#tribe-events-content-wrapper {
	background-color: yellow;
}

I’m just guessing as I can’t quite be sure what you’re trying to accomplish. Let me know how close I got.

Andy,
I pasted in your code for the shortcode. This is what I got: calendar. All I got was, the shortcode in place of the calendar.

For the main calendar I pasted your code in the Customize CSS. That worked. I can work with the Events Calendar.

Question: When I rename the “Event Slug” from Events to Church-Calendar”, I assume I’ll have to make the change from events to church-canendar? #tribe-events-content-wrapper {
background-color: yellow;
} All Lower Case Right?

Thanks,
Dave

I think my instructions were misunderstood. Those code snippets should go in your CSS, use the Customizer to add CSS there.

https://en.support.wordpress.com/custom-design/editing-css/

• This reply was modified 5 years, 3 months ago by Andy Fragen.

Andy,
This CSS code worked:
#tribe-events-content-wrapper {
background-color: yellow;
}

I switched the events calendar over to my live calendar and it worked great.
Later on today I’m going to donate to you again.

Thanks for your help.
Dave

Thanks Dave. That was very generous of you, much appreciated.