Browser DevTools is at your service OR how to change theme colors

Markup Hints | January 29, 2016

Perhaps, you were not aware of the simple fact that each browser may help you to customize your WordPress website colors of the theme and many more. Such a handy tool right at your fingertips.

I know that many of you use our themes and have no idea how to change color of the background, for example, or font color.

Let's consider the first one question that is the most relevant.

How to change the background for the theme?

1) Background of a theme can be set as an image, look at the example:

body {
	background:url(images/background.jpg) top center no-repeat;
}

*This code has been taken from the Musical theme.

Here we can see that there is the background.jpg image inside the theme folder "images". So you may upload another image with the same name to this folder or specify another path to the needed image in the style.css file of the theme.

Thanks to its top center position we may see it only at the top of the page and scrolling down the page we may already see that the background has already changed to black.

"How does it happen?" - you may reasonably ask me.

The reason for this is that there are two layers, which cover all the elements on the page - <html> and <body>. But body appears physically closer to you than html.

2) Since we had to show the image over the black background we set black background for the <html> tag:

html {
	background: #0d0d0d;
}

6 characters after the dash is a hexadecimal color value. For example, #000 means black and #fff - white. Using some online services or even Chrome DevTools you may select the needed color:

You need just to click the rectangle next to the background value and you will open this magic tool ;)

Thus you may see how the background for the Musical theme is set:

the first down layer <html> has black background and
<body> has the background image.

Use Chrome DevTools To Help You Change The Background

Browser console may tell you almost everything about your website. This is our main tool for website creating for sure. Open it by pressing the function key F12 on your keyboard.

First of all you have to hover over the element you need to edit and right-click on the needed element and select "Inspect Element". Right after this you will see the DOM structure of your page and the needed element will be highlighted there.

Now you may add or edit styles for this elements with ease (see the screenshot above).

How To Save Your Changes Made To The Styles?

I can't miss the opportunity to praise this developer tool - everything is so easy with it! Just click the name of the file next to the code (see the picture below) and copy the code to this real file on your server - that's all!

By Ann Nightingale

Elyse 7 years ago

I am using the World Cars theme and cannot figure out for the life of me how to remove the red car in the static header. It looks to be placed there separate from the background image (which I cannot figure out how to change based on this tutorial.. specifically where to change the image/top or image/back). boompas.com is the website I am working on.