mini calendar list wrapper fonts

[Amber Smith]

Hey there –

I’m trying to edit the size, line height and color of the fonts on the mini calendar list wrapper. There are three locations I’m interested in editing and hoping you can help because I can’t seem to find it anywhere in the support forum/documents. I did see someone who edited their style sheet but the response was that assistance couldn’t be provided with customized user code. Having said that, I’m hoping you could help me with some of your own code 🙂

Screen shot attached of the two fonts I’m hoping to edit.

Thanks so much!!
Amber

[Geoff B.]

Good evening Amber and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

In order to gain full power on your site’s look and feel, I would highly recommend reading the following articles:

• https://theeventscalendar.com/knowledgebase/wordpress-customizer/ (Avada has its own Customizer including for the Events Calendar – so that won’t work with your current theme)
• https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/
• https://theeventscalendar.com/knowledgebase/changing-fonts-and-colours/
• https://theeventscalendar.com/knowledgebase/styling-events-widgets/

With that in mind, I believe the 3 CSS elements you are looking for are:

1. .tribe-mini-calendar .tribe-events-othermonth and .tribe-mini-calendar .tribe-events-othermonth
2. body .tribe-mini-calendar-event h2 a
3. .tribe-mini-calendar-event .list-info .tribe-events-duration

Let me know if that helps.

Have a great day!

Geoff B.

[Amber Smith]

This reply is private.

[Geoff B.]

This reply is private.

[Amber Smith]

That’s great! Thanks Geoff, I was able to update those. I have one more question if you don’t mind. I would like to decrease the line-height but when I do this nothing happens:
body .tribe-mini-calendar-event h2 a{
color: white;
font-size: 15px;
line-height: 5px;
}

I’ve tried em an pt in place of px but still haven’t had luck. Screenshot attached 🙂

Thanks again so much!!!

[Geoff B.]

Good evening Amber,

I am super stoked that you were able to change a few things to your liking.

The reason why the line-height rule is not kicking in is because the “a” CSS element is part of a “H2” CSS element (parent-child).
The H2 has a font-size of 36px on your theme which renders the “a” element line-height rule useless unfortunately.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

body .tribe-mini-calendar-event h2 {
font-size: 16px;
line-height: 20px;
}

Have a good weekend,

Geoff B.

[Amber Smith]

Hi Geoff,

Thanks for the clarification, unfortunately that did not work. I tried just adding it in, I tried removing the the other css, and I tried editing both. Are there any other work arounds for this by chance?

Thanks so much!
Amber

[Geoff B.]

Good evening Amber,

I am sorry that did not work.
You actually need to keep the previous CSS in place.

What might be happening is that the rule is not at a higher priority.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox instead of the last one I shared:

.tribe-mini-calendar-event .list-info h2 {
font-size: 16px !important;
line-height: 20px !important;
}

That should do the trick!

Have a great day!

Geoff B.

[Amber Smith]

Thanks Geoff! You’re a legend! That worked 🙂

[Geoff B.]

Good evening Amber,

I am so glad hard work helped us achieve your goals together!
Good job.

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts