How to change the mini calendar widget's css styles

[Lluís]

Is it possible to obtain an appeareance of the mini calendar widget, when there’s an event, like in this wireframe?

We would like to change the css styles (the background-color in particular).
Thanx for your help.

• This topic was modified 10 years, 2 months ago by Lluís.

[George]

Hi Lluís,

While making CSS customizations is indeed possible, it is not something we can help with much here—check out the “Product Support” section of this page for more information about his: http://theeventscalendar.com/terms

---

If you need to write custom CSS on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose styles you would like to change.

As an example, you could use these tools to hover over mini calendar days that have events—and then you can just add some background-color styles to these elements to change their background to black, which appears to be the goal in your screenshot.

That CSS would look something like this—try pasting this into your theme’s style.css file:


.tribe-mini-calendar td.tribe-events-has-events {
background-color: #000 !important;
}

I hope this information helps!
George

[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