CSS: Change Colors

If you want to change colors beyond the theme color options, you can also use CSS code to do so.

CSS Commands:

You can change the font color with the color CSS command and the background color with the background CSS code:

.page-element {
color: #fff;
background: #333; /* background color */
background: url(IMAGE-URL) repeat; /* background image */
}

You have to replace the .page-element class with the right CSS id or class which you like to change colors. You can find out the right CSS id or class by using Firebug.

Examples:

Please note that CSS codes are different and depend on the theme you’re using. Most of the time our themes use the same CSS classes and ids, but different CSS styles for each page element.

Change color of site title

#logo .site-title {
color: #ff0000;
}

Change colors of navigation menu items

#mainnav-menu a, #mainnav-menu a:link, #mainnav-menu a:visited {
color: #fff;
}

 


In case you need any help with CSS customizations, we can highly recommend these WordPress Customization Experts.