Not able to change the Color of my Events calendar Widget

[premraval010]

Site URL: https://ivca.in

I am unable to change the Widget color of the events calendar plugin I am using. Please help me sort this.
Check my home page for the widget.

Please help me asap.

Thanks a ton for the plugin.

[Support Droid]

Hi! Thanks for reaching out. We’re experiencing a high volume of support requests right now, but please do bear with us and we’ll review your question as quickly as possible.

[Andras]

Hi Prem,

I think I can help you here.

What colors exactly would you like to change?

What did you try so far?

Cheers,
Andras

[premraval010]

The present one is a combination of Dark & light Grey, Instead I would like to have dark & Sky bluish kind of color.
I tried changing it via the customize option which has a separate option for changes in the events calender, but it did not effect in change.
Can you introduce me to any other way in which I could change the color of my events calendar.
See the attached images of customization, the selected color in it does not effect in change on my widget calendar but only changes the main events calendar page.

Please help me out asap.

Site URL: https://ivca.in

Thank you

PS: If you need I can give you a temp admin access & maybe you can help me change it that way.

[Andras]

Hi, thanks for the details. And thanks for the login offer. As per our current support policy we cannot accept logins to customer sites and creating customizations is beyond the scope of our support.

You can change the colors of the widget with adding the appropriate css rules to your child theme’s style.css file.

To find out the needed css selectors you can use the built-in Inspect tool of your browser. Here is a guide for Firefox and Chrome:

• https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
• https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

To give you some examples:

To change the background color of the cells:

.tribe-mini-calendar td {
background-color: blue;
}

To change the bg color of cells that have events:

.tribe-mini-calendar td.tribe-events-has-events {
background-color: red;
}

To change the color of the header row with the days:

.tribe-mini-calendar th {
background-color: green;
}

Hope this helps you get started.

Cheers,
Andras

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts