Background Page Color change

[Jeremy]

I am trying to change the background color on the events main page as single event page from the default grey to white. what is the CSS that needs to be targeted for this.

Also when first visting my events page. my CSS loads incorrectly after a reload it loads just fine. How can this be corrected.

site is http://4c5.7b1.myftpupload.com/events/

[Geoff B.]

Good evening Jeremy and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with these topics.

I am trying to change the background color on the events main page as single event page from the default grey to white. what is the CSS that needs to be targeted for this.

The first thing I would recommend is to experiment with the first 2 settings found in Events -> Settings -> Display. This can go a long way into providing a more readable single event page.

Secondly, if you have not tried yet, you can play around with our customizer in Appearance > Customize. Look for the Events Calendar section.

If none of that meets your needs, you could try the following CSS rule

.single-tribe_events .content .container {
background-color: #fff;
}

Let me know how that goes.

Best regards,
Geoff B.

 

[Jeremy]

thank you for the CSS for the single page but what about the main event page? what is the target for that?

Also i found the options under customize but there is no option for background color for the general events page. Did I miss that? it has options for the calendar it self but not the whole container which is grey.

Also I changed my settings but they aren’t saving to the events calendar template, so no changes are going into effect.

[Geoff B.]

Good afternoon Jeremy,

Thank you for writing back and for trying out my suggestions.

I am sorry to hear that saving your setting has no effect. That could be because:

1. Your theme prevents it (I have seen this in some themes) that integrate our plugin
2. There is a conflict preventing it.

Either way, here is some CSS to target the main calendar page.

.post-type-archive-tribe_events #tribe-events {
background-color: #fff;
}

It would totally be worth investigating why you can’t change the settings in my opinion. That would provide you with so much more flexibility when it comes to the look and feel.

By the sound of it, it looks like there is some type of conflict at play.
This is usually because of:

1. A conflict with another plugin
2. A conflict with your WordPress theme
3. A template customization for the Events Calendar that requires updating

A first quick test is to simply temporarily revert back to a default WordPress theme such as twenty-sixteen to see if the issue persists.

To do that, you could <u>go through our testing for conflicts procedure</u> (preferably in a staging/dev environment or local install of your WordPress website) and let us know what you find out.

Basically the goal here is to revert back to a bare WordPress installation to see if the problem persists. It also allows us to pinpoint what the cause of the issue is.

But, before you do that, there are 2 things I would advise:

1. Make a backup of your database
2. Consider activating a “Maintenance Page” plugin if you are doing this on your live site (to minimize impact on your visitors)

Have a good week-end,

Geoff B.

[Jeremy]

This custom code still didn’t change the background color of my page.

http://4c5.7b1.myftpupload.com/events/

I will look into the plugins situation soon (revert back to 2016) as it is still happening with my current theme (bridge) and all works until events calendar is activated.

[Jeremy]

So I went ahead and reverted back to 2016 and only activated events calendar (did not populate events calendar pro either) and both of my problems are fixed, loads just fine, and page background is white. So seems as if events calendar and my theme do not play well together can you confirm that? and give a possible solution?

[Geoff B.]

Hey Jeremy,

Thank you for running these tests.

I am pretty sure that we can get your theme to be at least civil with our plugins 🙂

Could you please send me a copy of the latest version of your WordPress theme / child theme via a link to a .zip file link (stored Dropbox or Google Drive) so that I can run some tests on my end ? I recommend a private reply for that purpose.

Please ensure you are using the latest files as found on your actual website.
This way I will get access to any updates or customizations you might have made.

Hang in there as we investigate this further.

Best regards,

Geoff B.

[Jeremy]

This reply is private.

[Geoff B.]

This reply is private.

[Geoff B.]

This reply is private.

[Jeremy]

Thanks but right now I dont even have my theme installed because of the ask to disable the plugins and theme to trouble shoot the loading issue. is that being looked at?

[Jeremy]

.tribe-events-calendar tbody {
background-color: #fff;
}

The above code didnt work either.

[Geoff B.]

This reply is private.

[Jeremy]

Its not present because I took it off when I was reactivating things. I have just put it back in so you can see. I see you targeted the calendar but not the page, im talking about the grey areas around teh calendar not inside the calendar.

[Geoff B.]

Hey Jeremy,

Sorry about that.

If you want to target simply the calendar container (the grey areas around the calendar), you can try:

#tribe-events {
background-color: #fff;
}

If you want the full page container to be white, try:

.post-type-archive-tribe_events .container {
background-color: #fff;
}

Have a great day!

Geoff B.

[Author]

Posts