Home › Forums › Calendar Products › Events Calendar PRO › Mini-calendar widget styling
- This topic has 2 replies, 2 voices, and was last updated 9 years, 5 months ago by Brian.
-
AuthorPosts
-
October 22, 2014 at 11:13 pm #828782cypressskiclubParticipant
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!
October 23, 2014 at 6:02 am #829417BrianKeymasterThanks 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.
November 11, 2014 at 4:40 pm #877784BrianKeymasterSince 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! 🙂
-
AuthorPosts
- The topic ‘Mini-calendar widget styling’ is closed to new replies.