Firebug 101 – Master CSS To Redesign Your WordPress Theme!

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

This is an extensive post for absolute beginners to show them step by step how to use Firebug to redesign our Childthemes with the help of Firebug and CSS. Of course you can use this tutorial also to design other themes and website. It doesn’t have to be a WordPress Website or our Framework. But this will focus on our framework.

What you need

  • Firefox
  • Firebug
  • Editor (for example Dreamweaver, Notepad++ or whatever is your favorite editor)
  • FTP Programm (e.g. Dreamweaver, Filezilla and so on)

Installation

Install Firebug on Firefox Start Firefox and go to https://addons.mozilla.org/en-US/firefox/addon/firebug/ and click on the button “Add to Firefox”. A window will show up and click there on “Install Now”, the button will count down from 5 before you can hit the install button. It will open another Window where you can see the installation progress. After it is installed hit the “Restart Firefox” button on the top left. Your Firefox will start again and you can see at the lower right status bar an icon of a bug.

Select area you like to change

Double click on the icon and Firebug will open a panel at the bottom of the page. If it’s not already on the tab “HTML” please click on it. To select a specific area on your website, so you can see what style it has right now, just click on the left button (1) next to the bug icon and hover over the area (2) you like to know the assigned CSS style. In the example of the screenshot we hovered over the post title (2). On the left side (3) it displays the HTML content of this area and on the right side (4) it shows the assigned CSS style. And on the very right it shows in which CSS file and on which line this CSS style is (5). In this case the post title has the following CSS style assigned:

color: #625945;
font-family: Georgia,Times,serif;
font-size: 1em;
font-style: italic;
text-decoration: none;
You can also just click on the specific code in the HTML area (1) and it will highlight the area on the website (2) and it also shows the assigned CSS style on the right panel (3).

Change the CSS style

When you click on the CSS style in the right panel you are able to edit the style and it will show the changes on the website immediately. That’s a good way to test and try how the changes will look like and what maybe are the effects of the changes.

If you right-click on a CSS style it will show up some options, for example “New Property”, select this to add a CSS property to this style. The new property will affect the look of the website immediately.

for example you type in border-bottom, hit the Tab key and then you can enter the values. Firebug auto completes the property. If you messed up the code in Firebug, just refresh the page and the CSS will be reset to the original code of the CSS file.

Make changes in the CSS file

After you are satisfied with the changes you have made in Firebug you can just copy the changed CSS style and paste/replace the code into your theme.css. Upload the file with your FTP program and refresh your website to see if all changes took affect. To see the absolute path of the CSS file, just hover over with your mouse or right click on it and hit “Copy Location”, paste it somewhere to find out the location. Note: Changes in the CSS file should be always made in the theme.css of your Childtheme, even if the current CSS style is in another file right now. Adding the new CSS style in theme.css will overwrite the style in the other file. If you make the changes in the other file you will lose these changes when you update your Framework next time.

Add new CSS selector to your CSS file

Find CSS selector path Normally you see the CSS selector path in the right panel (1), but if you want to add a selector to your CSS file to change a specific area, you can see it in the screenshot below, in this case it would be h2.posttitle a (2) You can also find out the right CSS selector path if you just right click on the code and select “Copy CSS Path”, paste it in your CSS file and delete the unnecessary parts from the path and assign the wanted style to the selector. Of course there are many more possibilities you can do with Firebug and there are also additional add-ons like YSlow available to make Firebug even more powerful and a must have tool for web developer and designer.