How to Customize Your Theme With Firebug
If you want to make a few quick design tweaks to your WordPress theme, Firebug can help you do it. Firebug is a free add-on for the Mozilla Firefox browser that allows you doing CSS changes in real-time and will help you locate the files where the CSS rules are defined and their exact location in the file. In this tutorial we are going to show you how to make some basic customizations to our themes using Firebug.
Installing Firebug
The first thing you’ll need to do is install Firebug. There are two ways to install firebug:
1. Open Firefox, go to Tools > Addons > Get Addons and then search for firebug. Then click on install and restart Firefox after installing.
2. Or you can download Firebug by visiting the Frefox Add-ons page here. After the install you will have to restart your browser.
Using Firebug
You can open Firebug easily either by clicking the Firebug icon on the task bar, or by pressing the F12 key. Once you have Firebug opened, you’ll see something that looks like this:
Inspecting Elements and Finding the CSS
To change a style in Firebug, right click on the area you wish to change and choose the Inspect Element option. The Firebug window will open up at the bottom of the screen, and you will be able to see the HTML of the page on the left, and the CSS of the selected element you clicked on the right.
Another option to inspect an element is to press “F12” and click on the “inspect” icon of the opened Firebug section:
After that you can move your mouse to any element and then you’ll be able to see a blue rectangle surrounding that element and its code in the firebug window – once you find the element you would like to modify, you have to click on it. You’ll see a panel with lots of info at the bottom. On the left side is the HTML code and the right section contains the CSS that is applied to the element you have selected. You can also quickly see exactly where the style is located.
Changing The CSS Styles Of The Theme
With Firebug you can change any of the CSS styles of an element in the theme and it will automatically update the page so you can see your changes in action. To do this you just have to click on the style property you want to change ( in the CSS panel ) and you will find that Firebug will let you edit it. When you change the property of an element in the Firebug window, the change will be automatically displayed on the page opened.
Please note that in order to change a CSS attribute you need to have a basic knowledge of CSS. There are a lots of resources online for CSS and a simple goolge search can provide you tons on information about a CSS property and how you can change it. The most popular site is w3schools where you can find almost anything you need to know about CSS.
http://www.w3schools.com/cssref/default.asp
Also you can visit cssbasics for more organized and simplified CSS resources:
http://www.cssbasics.com/
Saving Your Changes
It is important to mention that the changes you are doing in Firebug are not permanent and if you refresh the page, your changes will be lost – this is because Firebug is only editing on the client side (eg. your web browser) and not on your web server. When you do the change in Firebug and you want to save it, you have to copy the whole class/id section, go to WordPress Dashbord -> Pexeto Panel -> Styles Settings -> Additional Styles and paste the code in there. Before pressing the Save the changes button, delete the properties that are not modified and make sure that you have inserted only the modified properties.
Finding the CSS selector of an element
Sometimes you will want to edit an element that doesn’t have any specific styles assigned to it and you won’t see a specific section for this element in the Firebug panel, so you will have to build the CSS selector by your self.
The best case would be if the element has an ID or class assigned to it – for example if the element has an ID assigned:
<span id="comments">3 comments</span>
you can select this element by prepending a # to the ID – in this case it will be #comments
#comments{
color:#ffcccc;
}
or if the element has a class assigned to it:
<span class="comments">3 comments</span>
you can access this element by prepending a . to the class name – in this case it will be .comments
.comments{
color:#ffcccc;
}
There may be cases in which the element doesn’t have neither ID or class assigned to it. In such cases, you have to find the closest parent of this element that has either ID or class, and the selector will consist of two parts – the ID/class selector of the parent + empty space + the tag name of the element. For example, if you have the following structure:
<div class="post-info"> <span>3 comments</span> </div>
then you can access the span with the selector .post-info span , example:
.post-info span{
color:#ffcccc;
}