change color of list widget(theevents calendar pro)

[kortris]

Hi,

Please let me know how i can change the color of the date icon at the list widget.

Thank you in advance.

[George]

Hey @Sotiris,

Doing so would require writing some custom CSS on your site.

To do this, get a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose CSS you want to customize.

For a quick example, you could use these methods to find the CSS selectors to change the background color of the date icon in the list widget, like this:


.tribe-mini-calendar-event .list-date {
background: #cc9900 !important;
}


If you put that code in the bottom of your theme’s style.css file, that would make them a light burnt-orange color instead of the default gray coloring.

Use these methods for any further customizations you might want to make – let us know if this helps!

Cheers,
George

[kortris]

thank you for your answer,

Please let me know where is the code i need to edit located?

[George]

Hey @Sotiris,

You do not need to edit any existing code. You should just need to add code, to the very bottom of this file in your theme: style.css

If you do not know how to edit files on your WordPress website, you should search online for how to do so; there are many ways, including the “Editor” built right into your wp-admin.

I hope this helps!

Cheers,
George

[kortris]

This reply is private.

[kortris]

This reply is private.

[George]

Hey @Sotiris,

It’s possible to change just about everything on your site with custom code – we unfortunately can not help with custom code here, however, so the best I can recommend is to check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome.

They have “Inspector” tools that let you zoom right over the element whose styles you would like to change; then, just use those styles in your theme’s style.css file and customize away!

Research online for CSS tips and instructions if you’re not familiar with CSS – there are fortunately many great resources out there for free.

Also – make good backups of your custom code! 😉

Best of luck with your customizing,
George

[kortris]

This reply is private.

[George]

Hey @Koro,

You can implement custom CSS on your site by directly adding the code to the bottom of your theme’s style.css file.

If you’re not familiar with editing that file, then you can do it a number of ways. First is to just go to Appearance > Editor in your wp-admin, and then edit the file through there. You can also use something like FTP instead; if you’re not familiar with FTP, there are plenty of YouTube videos and such on how to do it, so just find a tutorial that works well for you and you should be set. It’s an easy process! 😀

Best of luck with your customizations,
George

[Author]

Posts