Change background colour of current day (today) on the mini calendar widget

[Matt]

I have managed to change the colour which highlights current day (today) on the main calendar but I cannot find the equipvalent reference to use in CSS to change the background for the current day (today) in the mini widget calendar. Can you give me the relevant reference please.

[Matt]

[Geoff]

Hello there, Matt!

Good question. You should be able change that out by adding this to your stylesheet:

.tribe-mini-calendar td.tribe-events-has-events.tribe-events-present {
background-color: #ededed; /* or whatever color */
}

Does this help? Please let me know. 🙂

Cheers!
Geoff

[Matt]

Geoff, Thanks for that. I have had to modify it slightly as your code only applies to days where there is an event. see here;

.tribe-mini-calendar td.tribe-events-present {
background-color: #569FD2;
color: #ffffff;
}

You will see I have also tried to set the text to white but whilst the background color changes the text does not. Do you know why ?

When I use inspect element the CSS for this element doesn’t show up so I can’t work out the references to use.

[Geoff]

Hi Matt,

That’s because the text is being styled on a link level:

.tribe-mini-calendar .tribe-events-has-events a {
color: #fff;
}

Cheers!
Geoff

[Matt]

Geoff, Again what you have given me will style the date number on days when there are events. I am trying to style the date number on the present day i.e. today.

[Geoff]

Ah, gotcha. You may need to make the select more specific then:

.tribe-mini-calendar td.tribe-events-present a {
color: #fff;
}

Cheers!
Geoff

[Matt]

Thanks but I already tried that and it doesn’t change the color.

[Geoff]

Hmm, that does indeed work on my setup. Is it possible one of your theme’s styles is taking precedence in this case? Would adding !important to the attribute help?

If you provide me a link to a live example of your site, I may be able to help further.

Thanks!
Geoff

[Matt]

No unfortunately !important doesn’t work either, very strange. Just to clarify I have the calendar widget in the sidebar. I have managed to change the background color for the present day (today) as shown above so the reference you have given me seems appropriate.

Interestingly when I refresh the page today’s date momentarily comes up as white text (which is what I am trying to get) but quickly gets replaced by the default grey when the full formatting of the calendar get put in place.

[Matt]

I have added the events calendar widget to the right sidebar and specified “0” events in the list but it still shows all the events. Is this a bug ?

[Geoff]

Hi there, Matt! Thanks for following up. 🙂

It sounds very possible that one of you’r theme’s styles is overriding the calendar’s CSS. It’s a little tough for me to weigh in on how overcome that without seeing it, but if you provide me with a link, I’d certainly be happy to look.

I have added the events calendar widget to the right sidebar and specified “0” events in the list but it still shows all the events. Is this a bug ?

Will you please open a new thread for this? I just want to make sure we keep our troubleshooting of the original question on the right track. In the meantime, please try following these steps to test whether there is conflict with your theme or plugin that could be causing that to happen.

Cheers!
Geoff

[Geoff]

Hi there, Matt! This thread’s been quiet for a couple of weeks, so I’m going to go ahead and close it. Please feel free to reach back out with a new thread if you still have questions and we’d be happy to help you there. 🙂

Cheers!
Geoff

[Author]

Posts