Don’t like your theme header color? Want to Change header background color or your theme. I use Metro Pro theme from Genesis Framework for my WordPress blog. So I can show you, how I change my theme header background color by editing CSS. You can apply this procedure to every theme.
If you don’t mind about spending money and don’t want to waste time, you can buy CSS Hero WordPress plugin. By using CSS hero plugin, you can edit any theme or any plugin CSS within seconds. It is a great plugin for new bloggers, it will save a lot of time. It will also provide a color palette to check your colors.
If you don’t want to spend money, then continue reading this article.
How to get hex code for Color
When you want to change color, you must know hex decimal code of your required color. You can use the paletten website to get color code.
First Click on the circular pattern at left side. Now click anywhere on the right side you will see that colors hex code.
Try different colors on live website
Before going to make changes to your theme CSS, you can check that color on the live site. If you don’t like color, then get hex code for another color and try. Now let us see how you can try different colors on the live website.
Open your site in any browser. I use Google Chrome. Check below screenshot. Initially, this site header background is white.
Right, click on the header.
Select Inspect. You will see below screen.
Look for a <header on the right side. Click on that section. When you click anywhere on right side, the corresponding section of your website will be highlighted.
You can note down header class here, i.e., site-header. You may need it later.
Click on color code right to background-color at the bottom section, now you can edit that code. Paste your hex code, and press enter. You can see live changes to your theme. Remember these changes are not permanent. These are only temporary changes.
If you don’t like your color, get another color code from the paletten website and paste that here. If you satisfy with your color code, remember that code.
How to Change Header background color
Now you know your header class and your required color code. I will show you two methods to change header background color.
1.Change header background color by editing theme style.css file
Entire theme styles are placed in a file called style.css. You can access and modify this file from WordPress dashboard itself.
Go to Appearance -> Editor. By default, you will see theme style.css file. Otherwise, click on Stylesheet at right bottom.
Scroll down up to Site header section.
Replace existing background color code(Here fff) with your copied color code. After replacing color code, you will see change in above sentence like,
No need to change remaining sentences.
Click Update File at the bottom. You can see changes.
2.Change header background color using jetpack plugin
In the first method, you are editing theme CSS file directly. If you make many changes, It is tough to remember all changes. When you want to change one more time, you need to spend time for finding your required class.
Now let us see how to use jetpack Edit CSS feature.
If you did not enable jetpack Custom CSS feature, enable it by going to jetpack -> Settings -> Appearance -> Custom CSS
Go to Appearance -> Edit CSS. You will see empty space where you can place your own CSS styles.
Now use header class which was noted earlier. Just paste below code thereby replacing the color code with your own color code. The code which you see in above screenshot is what I had used for my header.
Here you can add as many styles as you need. You can also change the background color of your title area by following the same procedure.
Remember, if you deactivate Jetpack plugin, you will lose all changes. So copy all changes in Word or text document on your computer to remember your changes.
I prefer to use jetpack edit CSS method instead directly editing CSS file. If you are a new blogger, these methods will consume your time. You better go with CSS Hero plugin which helps to edit any part of your website within seconds.
I hope now you can Change header background color of your theme. If you like this article, please share it with your friends on social media. Let us know which method you are using to edit your CSS in the comment section.