Colour change and potentially a small bug?

[Jason Thresher]

Hi support

I am having a problem changing the background color of the calendar. I thought this would be a simple operation, but have tried every different setting in your new customizing feature, nothing seems to change the background.

The other thing I notice, and this may be the small bug – When you select the general theme accent color, the view of the calendar does not change. IT does with the other setting changes leading me to believe this is not working correctly.

I have attached a screen shot.

Please let me know where the background color can be change so I can make the changes.

Many thanks
Jason

[Geoff B.]

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

Thank you for reaching out to us.

We are sorry to hear about the changes of the background color not working as expected on your installation.
I would love to help you with this topic.

Normally, the Customizer should display many other options (see screenshot), under Appearance > Customize

Could you try that and tell me if that impacts the colours as you would expect it to ?

If not, could you tell me which version of Avada you are using ?

Best regards,

Geoff B.

 

[Jason Thresher]

Hi Geoff

Thanks for the reply.

I am using Avada v 4.0.3

I tried those changes and have attached a screen shot for you to look at.

Pretty much everything changes with teh exception of the dark grey background, and the accent colour is not applying either.

Thanks for the help

Jason

[Geoff B.]

Good evening Jason,

Thank you fro trying these out.
It does seem like something in Avada is interfering with the Customizer.

The good news is that we are in the process of integrating the customizer in our plugins instead of in themes which should help with this type of issue.

In the meantime, you can always override this with CSS. Just go to Avada > Theme options > Custom CSS and use the following rules

#tribe-events-content .tribe-events-calendar td {
background-color: #fff;
}
#tribe-events td.tribe-events-present div[id*="tribe-events-daynum-"], #tribe-events td.tribe-events-present div[id*="tribe-events-daynum-"] > a {
background-color: #000;
color: #fff;
}
.tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"], .tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"] > a {
background-color: #000;
}

.tribe-events-calendar div[id*="tribe-events-daynum-"], .tribe-events-calendar div[id*="tribe-events-daynum-"] a {
background-color: #000;
}
.tribe-events-calendar thead th, .tribe-events-grid .tribe-grid-header .tribe-grid-content-wrap .column, .tribe-grid-header {
background-color: #000;
border-left-color: #000;
border-right-color: #000;
}
#tribe_events_filters_wrapper input[type=submit], .tribe-events-button, #tribe-events .tribe-events-button, .tribe-events-button.tribe-inactive, #tribe-events .tribe-events-button:hover, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover {
background-color: #000;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Jason Thresher]

HI Geoff

Thanks that code worked well.

Looking forward to the new color plugin.

One final question please – What would the code be to change the header color with the days in please? I think this final change will give me enough customization until your new plugin comes out.

Many thanks for your help, it is appreciated.

Regards
Jason

[Jason Thresher]

HI Geoff

Sorry, just have one more question as per the screen shot please. If one hovers over the day should something display in the header?

Screen shot is attached.

Thanks

[Geoff B.]

Good evening Jason,

I am glad my CSS rules helped.
Try to keep an eye out for the customizer announcement.

What would the code be to change the header color with the days in please?

.tribe-events-calendar thead th, .tribe-events-grid .tribe-grid-header .tribe-grid-content-wrap .column, .tribe-grid-header {
background-color: #83bc59;
}

If one hovers over the day should something display in the header?

Yes, this header should display the event title.

You can address this with the following rule:

#tribe-events-content .tribe-events-tooltip h4, #tribe_events_filters_wrapper .tribe_events_slider_val, .single-tribe_events a.tribe-events-ical, .single-tribe_events a.tribe-events-gcal {
color: #fff;
}

Let me know how that goes.

Best regards,
Geoff B.

[Mathew]

Jason,

The CSS suggestions that Geoff B. has provided clearly demonstrates just how great the support that Modern Tribe’s provides to their customer.

As he mentions, Avada is interfering with the settings. This is intentional by Avada. If you look at the Avada Theme Options, you will see that it has control over MANY of the color and design elements of The Events Calendar, including the background and border color. There are controls in several different places within Avada’s Theme Options, so please take some time to familiarize yourself with them inside the theme.

Attached is a screenshot of some of the basic TEC settings in Avada.

Hope this helps.

[Geoff B.]

Hey Mathew,

Thank you for chiming in and bringing your Avada expertise to the table. It is much appreciated.

Have a great day!

Geoff B.

[Jason Thresher]

Hi Matthew

Thanks for the input. I found those settings yesterday and submitted a ticket with Avada. Their settings are indeed the problem and not working correctly at all with the Pro calendar. At the very least there should be an option to turn them off so that one can use the calendars default colour settings.

The support has been great, very appreciative of the time Geoff has taken to help us.

———————–

Geoff that second bit of code has unfortunately not worked, but I will also now check if there is a way to workaround the Avada settings that are causing the issues.

Many thanks
Jason

[Geoff B.]

Good afternoon Jason,

I do believe Avada meant well in providing extensive color customization control for their amazing theme. But I have to side with you on this one, it is kind of confusing that this overrides the default WordPress customizer. The option of turning this on or off is a great idea (as I am sure many people love that feature as well).

In any case, about that last piece of CSS, adding a !important argument should make this work.

#tribe-events-content .tribe-events-tooltip h4, #tribe_events_filters_wrapper .tribe_events_slider_val, .single-tribe_events a.tribe-events-ical, .single-tribe_events a.tribe-events-gcal {
color: #fff !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Jason Thresher]

Thanks Geoff

Adding the !Important has solved all the issues.

Many thanks for the help.
regards
Jason

[Geoff B.]

Good evening Jason,

I’m super stoked that we found a solution for all of your issues.

You are welcome back on our support forums any time 🙂

For now, I am going to close this thread.

Have a great weekend!

Geoff B.

[Author]

Posts