Code help to change colors

[Rhonda]

1. This is a widgets for the week view and I can not figure out how/where to change the color. I have DIVI theme and I was able to modify all the other areas. Would I need a css code to change it? I need the bar to be my braanded green vs the blue. Along with the dashes on the calander.

2. Again can’t figure out where this would be modified. I just want to change the top bar to a diff color. Maybe just a light gray or something.

[Andras]

Hello Rhonda,

Thanks for reaching out!

Yes, I believe you need some CSS to change this.

1. If you can share with me  URL where the widget can be seen and what part of it you would like to change, then I might be able to help you with this.

2. By the top bar I guess you mean the super-dark-grey bar at the top.

If that is the one, then paste this code into the the theme’s style.css file (can be found under Appearance > Editor) or go to Divi > Theme Options > General tab > Custom CSS box and paste it there:

.tribe-events-calendar thead th {
background-color: #6a8950;
color: #ffffff;
}

The first line will set the background color to green. The second line will set the font color to white.

Hope this helps you get started.

Cheers,
Andras

[Rhonda]

1. This is the page – http://chathamcountyevents.com/ for example today the
31st is a blue, and the 3 lines between the dates. We want it to be green
to fit our branding colors. The color is #6b8950 and it’s a week widget.

2. Did what I needed, thank you so much!

[Rhonda]

One more thing, when in mobile view, the November on the top and the September and November at the bottom have a gray
block/button can it just be made white?

[Andras]

Hi Rhonda,

This should fix those:

.this-week-today .tribe-this-week-widget-header-date {
    background-color: #6b8950;
}
.tribe-this-week-event {
    border-left-color: #6b8950;
}

@media only screen and (max-width: 768px) {
    .tribe-events-sub-nav li a {
        background-color: #fff;
    }
}

Hope this helps.

Cheers,
Andras

[Rhonda]

Thank you, that did it! The only thing left is the problem #1
from earlier –
1. This is the page – http://chathamcountyevents.com/ for example today the
31st is a blue, and the 3 lines between the dates. We want it to be green
to fit our branding colors. The color is #6b8950 and it’s a week widget.

[Andras]

Hi Rhonda,

The above snippet should have solved it, but it looks like it needs a bit of adjustment. Try like this:

.this-week-today .tribe-this-week-widget-header-date {
    background-color: #6b8950 !important;
}
.tribe-this-week-event {
    border-left-color: #6b8950 !important;
}

@media only screen and (max-width: 768px) {
    .tribe-events-sub-nav li a {
        background-color: #fff;
    }
}

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