WordPress live customizer may or may not have the option to change the colors of all visible items on a page. A WP theme generally adds these options, but if it doesn’t, there are two ways to play with the colors of any WordPress theme – use a WordPress CSS plugin or add a CSS code that will do this task for you. We’ve discussed the same in the following paragraphs:
Text
Many WordPress themes let users change the text foreground from their settings/options page. If your WP template’s settings page lacks it, you can change it manually with the following CSS.
.entry-content p { color: red; }
Why entry content? Many WordPress themes put the post content in paragraphs inside the div with class entry-content. If you’d like to change the appearance of heading items in the content i.e. h1 to h6 tags, simply add the heading name in front of .entry-content e.g. .entry-content h1 That’s it!
Link
A link can appear inside the post, in the header, footer, sidebar, etc. To change its appearance, you should first find out the element in which the link is present. For example, if the link is in the post content section, you can change its color using the following CSS class:
.entry-content p a{color: red;}
If you’d like to make the link look different when the user moves the mouse cursor on it, you can use the CSS hover selector to do so. In the above CSS code, just append :hover to the link element a and change red to something else. For example, if you want the link to appear black when the mouse cursor is on it, use the following CSS code:
.entry-content p a:hover{color: black;}
In addition to making the link black, you can also make it look bold using the CSS font-weight: bold; property.
Background
The body is the parent container of everything that you see on the page. The sidebar, post content, related posts, comments section, etc are part of this section of a website. Changing the way it appears is easy.
body {background-color: black; color: white;}
The above code will change the color of the entire site’s body to black, and the text will turn to white.
Menu
A WordPress menu can be present in the header or footer. Not many themes will let you change their color. Should you change the color of the navbar? Changing it is a bad idea if the header’s background is perfect but if you still want to do so, first find out the element in which the navigation system is present. For instance, if the element is the header and the navbaritems are wrapped in the div menu, then the following CSS snippet will change its color:
header .nav {color: black; font-weight:bold; background-color:grey; }
In the above snippet, nav is the class of the menu bar. It can be div, ul, etc.
Button
In WordPress releases that shipped with the classic editor, the user had to change the button color manually with the help of CSS code. Now, you can change the button’s appearance with the Gutenberg editor. When you click the button, the editor’s sidebar will show the button-related settings. You should change the setting as per your requirement.
Page title
As you may know, the page title appears at the top of the post content. It is nothing but a text within h1 or h2 heading tag. Changing its appearance is easy, as a well-designed theme will have a single h1 tag on the page. Here is a CSS snippet that will change its color to purple:
h1{color: purple;}
Changing the color of only one menu item
To change the background or foreground color of only one menu item, you should use the :nth-child CSS selector. nth-child is similar to a function. It accepts a number as a parameter. For example, if the number of the links in the navbar is 7, you should put the numbers 1 to 7 between the parenthesis i.e. nth-child(1) where 1 is link number 1 to work with link number 1. The nth-child selector works like a charm with div, lists, tables, etc.
Note: Unless you modify the layout or hide content, CSS code won’t have any SEO implications. Make sure you check the page before keeping the code on your website. Where can you learn CSS? W3Schools CSS section is one of the best free CSS resources on the internet.
Where to put the CSS code? Open the WordPress live customizer tool and find the custom CSS section. Modify the code as per your requirement and paste it into the text area. Save the changes.
