Mini-calendar widget styling

[cypressskiclub]

Hello –

I want to modify some styling of my mini-calendar widget. I have a widget-calendar.css file in theme/[mytheme]/tribe-events/pro
I’ve had success in modifying the month’s font color with the following code:

span#tribe-mini-calendar-month {
color: #ffffff;
}

but the following:
a.tribe-mini-calendar-day-link {
color: #000000;
}

span.tribe-mini-calendar-no-event {
color: #000000;
}

doesn’t seem to do anything. I get a feeling that this is likely due to poor css syntax on my part?

Please advise on the correct syntax to customize the font color of the days in the mini-calendar.

Thanks!

[Brian]

Thanks for reaching out to us. I can help you out here. Looks like you are close.

I play around a bit with the css and came up with these two selectors:

/*Change Font Color of Days with Events */
.tribe-mini-calendar-grid-wrapper .tribe-mini-calendar div[id*="daynum-"] a {
color: red;
}
/*Change Font Color of Days without Events */
.tribe-mini-calendar-grid-wrapper .tribe-mini-calendar div[id*="daynum-"] .tribe-mini-calendar-no-event {
color: blue;
}

Drop that into the stylesheet or through a plugin such as Simple Custom CSS.

I could not find this as a selector at least in my mini calender’s source code in my browser:

tribe-mini-calendar-day-link

Let me know if that works for you. Might have to tweak the css a bit to get everything how you would like.

[Brian]

Since there is has not been any activity on this thread for over 2 weeks so I am now closing it. Feel free to start a new thread if you have further issues. Thanks! 🙂

[Author]

Posts