How to change the background color of an element
Note: In this tutorial we are using Firebug. If you don’t know what Firebug is, please first visit the How to Customize Your Theme With Firebug article.
One of the easiest tweaks you can make to an element of the theme is to change the background color of that element.
In this example I will show you how to change the background color of the services box in the Acoustic Theme. What I have to do first is to right click on this section and select “Inspect Element”. In the firebug panel that will get opened on the bottom of the page I can see that the HTML element is
<div class="services-description">
and in the CSS panel on the right I can see that that the background color of that element is #FAFAF7:
background-color: #FAFAF7;
Now all you have to do is click on the background-color property and change its value to the color you want.
Tip: You can use the Color Wheel to find the code for the color you like.
When you change the property of the element in Firebug and you would like to save the changes, you have to copy the whole class and go to:WordPress Dashbord -> Pexeto Panel -> Styles Settings -> Additional Styles and paste the code. Then you can remove the lines from the code that you have not changed and press Save the changes .
The same principle can be applied to almost all of the elements of the theme.