Mobile Calendar Styling help.

[Martin]

How can I change the stlyng of the selected date? So in the screen shot, the selected date of the 15th is Blue with the custom color (#9e2121) for the date font. I would like the background color to be #9e2121 and the color of the date font to be white, this is for the selected date only. Is that possible? Or at least can I change the selected date background color?

Thank you!

[Caroline]

Hi Martin,

Thanks for reaching out! While customization services are typically beyond the scope of what support we can provide, I’d be glad to see if I can point you in the right direction here. 🙂

If you’d like to make changes to the calendar display for the 15th day of this month, you can do so by targeting the .tribe-event-day-15 class selector. This selector is applied to the <td> that contains the entire block for this particular day. However, it’s worth noting that this will apply the same changes to the 15th day of all months, not just the current month.

A better approach might be to designate your event on the 15th as a featured event, then change the CSS properties for all featured events by targeting the .tribe-event-featured selector. For more information on featured events, check out our Knowledgebase article here:

https://theeventscalendar.com/knowledgebase/featured-events/

And for more information and helpful tips regarding customizations in general, our Themer’s Guide is always a great resource to keep in mind!

https://theeventscalendar.com/knowledgebase/themers-guide/

I hope that helps to get you on your way here! Thanks again, and let us know if you should have any other questions!

[Martin]

No, this is not the answer to my question. I don’t want to change the color specifically for the 15th day. In the mobile view when you select a day that day becomes the default color blue. I want it to be a different color. You can select any date and the color changes to blue, I don’t want it blue. Make sense? It has to be an easy fix since you can customize all the other colors.

[Caroline]

Hi Martin,

Thanks for following up to clarify–I apologize for my confusion here! If you’d like to target the class for a selected day in the mobile month view, simply add the following CSS to the Additional CSS section of your WordPress Customizer:

.tribe-events-calendar td.mobile-active, .tribe-events-calendar .mobile-active div[id*=tribe-events-daynum-] a {
     background-color: #9e2121;
     color: #FFFFFF;
}

.tribe-events-calendar .mobile-active.tribe-events-has-events:after {
     background-color: #FFFFFF;
}

This will change the background, text, and dot colors for active dates on mobile to fit your stated requirements. 🙂

Thanks again, and let me know if you should have any other questions!

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts