Styling mini calendar

[Brian]

Hello,

I’m have some trouble styling the mini calendar.
I was able to do most of what I want, but there are 3 things remaining:
– I was not able to replace the dot (for the days having events)
– I’d like to have a white border at the top of the calendar (where there is the month and days names)
– I’d like to have a small space between the days names and the border bottom

Can anyone help me do that ?
Thanks a lot

[George]

Hi @Therese,

We do not offer any support for custom coding here, so unfortunately you will have to take the reins on these remaining three customizations 🙁

For starters, replacing the dot may require more than CSS; you might have to head into the widget template files directly and edit that dot, as described in our Themer’s Guide here → https://theeventscalendar.com/knowledgebase/themers-guide/

To add a border to the top of the calendar, you’d use CSS like this:

.tribe-mini-calendar {
border-top: 1px solid #fff;
}


For spacing and borders on the names of the days of the week, you unfortunately cannot apply margins because these are locked into an HTML table and this is a limitation of tables 🙁 You can use padding however, which is exemplified below – this following example also shows adding a border along the bottom that is white:

.tribe-mini-calendar th.tribe-mini-calendar-dayofweek {
padding: 0 5px 0 5px !important;
border-bottom: 1px solid #fff !important;
}


For any further CSS-related customization questions, please check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome – these all come with “inspector” tools which are immensely helpful for finding out CSS for customizations like this!

Cheers,
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