CSS selector for the date numbers on the Calendar?

[James]

Hi, I don’t know why this has happened but my dates in the calendar seem to have gone a bit funny. I want to remove the margin at the top, change the font and size of the numbers.
In Chrome developer tools I grab this selector;
.tribe-events-calendar td div[id*=tribe-events-daynum-], .tribe-events-calendar td div[id*=tribe-events-daynum-] a {
background: none;
font-size: 16px;
line-height: 1;
margin-top: 6px;
padding: 0;
text-align: center;
}
But when I put it into my child theme, style.css file, it doesn’t change but if I do it in Chrome it changes.

This is something like I would like;
font-size: 13px;
line-height: 1;
padding: 10px;
text-align: center;

But I don’t think I have the right CSS Selector.

Any assistance would be appreciated.

Cheers
James

[Courtney]

Hi James

Can you add the following code to your child theme, or in Appearance » Customize » Additional CSS?


.tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"] > a,
.tribe-events-calendar td div[id*=tribe-events-daynum-] {
background: none;
font-size: 23px;
line-height: 1;
padding: 10px;
text-align: center;
}


Let me know if this works for you!

Thanks,
Courtney 🙂

[James]

Hi Courtney,

Thanks for the reply. Your CSS didn’t actually work but I managed to fix my problem all the same. It seems I may have had a caching problem which was causing the weird alignment. After clearing the CDN cache it went back to how I had it before.

Thanks for your assistance Courtney.

You can close this ticket if you like.

Cheers

James

[Courtney]

Thanks James.  Glad it’s working 🙂

[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