Most themes you install on WordPress will have a couple different skin options to change to colors of your site. But what if you want a color that is not in the options? Maybe you want custom colors to match your existing logo or maybe you want to rebrand your company without building an entirely new website. A simple change of the color scheme can create the illusion that it’s a new site, just like repainting a room.
The first step to editing a color is to right click on the element you want to change and click “Inspect element” from the drop down.
Whether you are using Chrome or Firefox, this will pull up a menu that shows the html code or page source of the page that you are on and highlighted should be the element you right clicked on. It should look something like this:
I have highlighted the important information you should be looking at. The html element is in the left side of the menu and on the right side is the css that the element pulls its styles from. You can see that there are 2 things that are highlighted that are important. First, is the actual css code that determines what color you want your element to be. Here you can test out different colors to see how they look. Second is the file path of the css file that you will need to edit to make these changes permanent.
If you hover over the css file name, it will show you the file path of the css file you will need to edit. Take note of this because there may be multiple css files for your website. The last number will be the line the code is on. In the case below, it is on line 984.
Open the css file with an HTML editor and find the line and edit the code. Save the file and reupload it to your website. If all goes smoothly, you should have successfully changed the color of your element.
Please be aware that only experienced users should attempt this and always have a back up of your website. If you accidently delete something, you may end up crashing the website.