How to change list icon colour?

[Stephen]

HI,

I can’t work out how to change the colour of the list icons on the events pro. Can you please help. I’d like the grey to be a blue to match the colour on my website. Blue colour is the same as buttons in pic below.

[Nico]

Howdy Stephen,

Welcome to our support forums and thanks for reaching out to us. I’ll help you on this one!

To change the icon color paste the CSS snippet below into your theme’s (or child theme’s) stylesheet:


/* Change advanced list widget icon background color */
.tribe-mini-calendar-event .list-date {
background-color: #2877b8;
}

/* Change advanced list widget date name color */
.tribe-mini-calendar-event .list-date .list-dayname{
color: #2877b8;
}


You can also user Simple Custom CSS plugin to apply this custom style.

Please let me know if this works as expected,
Best,
Nico

[Stephen]

Hi Nico,

Thanks for your reply. I’ve tried both of these options and it hasn’t changed the colour.

Any other suggestions?

[Mathew]

You may need to add the !important declaration to the CSS. Give it a try.

/* Change advanced list widget icon background color */
.tribe-mini-calendar-event .list-date {
    background-color: #2877b8 !important;
}
 
/* Change advanced list widget date name color */
.tribe-mini-calendar-event .list-date .list-dayname{
    color: #2877b8 !important;
}

[Stephen]

Thank you very much! Greatly appreciated. Keep up the good work!

[Nico]

Thanks for the heads up and the kind words Stephen!

Mathew, thanks so much as usual for helping out, you truly rock 😉

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts