Widget Calendar CSS

[Derek]

Hello, I’m trying to figure out how to change some colors in the calendar widget…

I’m trying to change the white to a light cream. For example, I tried…
.tribe-mini-calendar-month{
color:#e8d8ad;
}
for the month in the nav bar. I also need to change the right and left arrows.

I need to change the current date from gray to terra cotta and the white number to light cream.

I want to change all the other numbers to a darker color, too.

I’ve been using the inspector to get the css, but can’t figure it out on these ones.

[Derek]

I have the widget calendar on this page…
http://test.epicmag.org/blog/

[Barry]

Hi Derek, could be you just need to be a little more specific with your rules. Can you try:

.tribe-mini-calendar-nav span { color: #e8d8ad }

That should change the prev/next arrows and month name to a cream colour. To target the current day, try something like:

.tribe-mini-calendar .tribe-events-present { background: #c0f }

The numbers can be changed with rules along these lines:

.tribe-mini-calendar a { color: #450 }

Does that help?

[Derek]

Thanks Barry,
I have one more… when you hover over the 27th it turns gray. I tried…
.tribe-events-has-events a:hover {
background: #984a23;
}

[Barry]

Can you try something like this?

.tribe-mini-calendar .tribe-events-has-events:hover a:hover { background: #ff0; }

[Derek]

That worked, thanks!

[Barry]

Fantastic!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts