How to Use the Web Developer Toolbar for Firefox to Fix CSS Styles the Easy Way

The old method… (the one I used for far too long)

This involved viewing a web page with a problem, trying to guess which style rules to change and then changing them in the style sheet, saving and uploading it back to the server and then reloading the page in the browser. Inevitably I would forget some really important thing that would mean that my new style sheet still wasn’t correct so that would mean going through the whole process again. Sometimes this recursive procedure would go on for quite a while, especially when my internet connection was being slow thus causing untold stress and shortening of life expectancy! What an arse-ache!

The new method… (the one that is so good that I’m actually going to write this proper tutorial for!)

This uses the excellent Web Developer toolbar for Firefox developed by Chris Pederick allowing you to “audition” style rules directly in the browser. This means you can play around with styles and see how the affect the layout and appearance of the page in real time.

Once you’ve found a set of rules that works you can then save the stylesheet on your local machine directly from the toolbar, upload it back to the webserver (if it’s being served from a remote host) and reload the page safe in the knowledge that the new style sheet is perfectly formed.

….and how does it actually work?

The procedure can be split into the following stages:

  1. identification of the correct CSS selector
  2. auditioning and modifying style rules
  3. saving the modified style sheet file back to the server

Before you begin though you will need to download and install the web developer toolbar here if you don’t already have it installed. Then you need to restart Firefox and then if you are able to see the toolbar (see image below) displayed just beneath the URL field in Firefox you are ready to begin fixing up your styles the easy way.

3-21-2009-3-33-19-pm

Stage 1: Identification of the Correct CSS Selector

With modern CSS layouts that involve lots of nested elements it is often difficult to pin down the exact structure of an element’s selector by simply looking at the page source. The web developer toolbar includes a great tool that displays the CSS style information for the element over which your mouse is currently hovering. As you move your mouse onto a new element the display changes to reflect that new element’s selector.

  1. Browse to the page with the styles that you wish to fix.
  2. On the toolbar click CSS > View Style Information - you should really learn the keyboard shortcut for this one though as you will be using it quite a lot – (Ctrl+Shift+Y)A new field appears immediately below the toolbar and the mouse pointer becomes a crosshair.
  3. Move the cross-hair to the page element that you need to fix and look in the style information field to see the CSS selector path.Note that the currently selected element is framed by a red box. As your mouse moves the red box moves too. In the toolbar display, the sequence of selector elements in the path represents the order of the cascade so you can identify a keyword in the selector that should help you find the appropriate rule in the style sheet. Hierarchical levels are separated by the ‘>’ character.3-21-2009-3-07-18-pm1
    For example, in the screen shot above you can see that the cursor is hovering over the heading of the “Meta” side bar, whilst at the same time the style information field shows the full selector for this page element with the leftmost selector  (html) being the highest (and least specific) and the rightmost selector (h2) being the lowest (and most specific) hierarchical level in the cascade.
    3-22-2009-10-07-28-pm
    So, we can see from this information that the underlying HTML tag structure will look something like this…

    <html>
      <body>
        <div id="rap">
          <div id="main">
            <div id="sidebar">
              <ul>
                <li id="meta" class="widget widget_meta">
                  <h2>Meta</h2>

    and so we may therefore be able to target the heading with any of the following rules …

    li.widget h2 { ...}
    li.widget_meta h2 { ...}
    li#meta h2 {...}

    but if there exists any rule to override h2 tags contained within a tag with id=”sidebar” then we will need to target the element more specifically by adding #sidebar to the beginning of its selector. For example….

    #sidebar li#meta h2 { ... }

    … and remember that in CSS the hash symbol (#) represents an ID and the fullstop (.) represents a class.

    If you find this at all confusing then you may wish to brush up your knowledge about how to form advanced (or complex) CSS selectors. This article by Eric Meyer covers the subject very well.

Stage 2: Auditioning and Modifying Style Rules

Once you have identified your selector it is now time to begin experimenting with your style sheet to see if you can fix the problem. Continuing to use the londonartblog.com example above we will attempt to change the font colour of the sidebar from green to red and give it some extra padding above is so that the heading text does not appear so close to the top of it’s box.

  1. On the toolbar click CSS > Edit CSS (Keyboard shortcut – Ctrl+Shift+E).
    A side frame now opens at the side of your browser. (If it appears at the top or bottom then you should click the 3-22-2009-11-46-46-pm button next to the “Edit CSS” tab label until the style sheet editor appears on the left side of the web page display. This will create more vertical space for you to view when scanning through the style sheet. The CSS editor pane displays the style sheet for the web page that is currently displayed in the main part of the browser window. Whenever there is more than one style sheet associated with the page then the different files can be edited by clicking the appropriate tab.

    3-22-2009-11-37-42-pm

  2. Search the style sheets for the selectors identified in stage 1. This can be done either by scanning through or by using the search box, but remember the search box only works on the currently viewed style sheet. If you don’t find the selector in one style sheet you must then click the tab of another style sheet and repeat the search.
  3. If  you manage to find a rule that looks like it will affect the element you need to fix then you can modify it by typing in the CSS editor. As soon as you begin typing firefox will immediately respond by displaying the web page according to the modified style sheet. In this way you can see whether your edit has had the desired affect or whether you need to keep trying with different rules. Obviously, in order to do this you need to have some prior knowledge of CSS syntax  but that’s not very difficult to learn.
    Now, in our example I used the search box to try to find instances of the keyword “meta” by tying it into the search box and clicking the magnifying glass button. All this returned was a couple of entries for the .postmeta class which is not what I needed(see the image below).
    3-23-2009-12-08-09-am
    In the absence of any existing CSS rule for the element that I wanted to change, I then had to write a new rule directly to the style sheet. So I scrolled to the end of the main style sheet (style.css) and began typing.
    My first attempt was to write the following:

    li.widget h2 {
        color:#f00; //change the font colour red
        padding-top:20px;  //add extra space at the top
    }

    ..but this didn’t do the trick so I added the parent selector:

    #sidebar li.widget h2 { 
        color:#f00;
        padding-top:20px;
    }

    which worked except that it also chaged the colour of the “Blogroll” heading further down in the sidebar. My next attempt was:

    #sidebar li#meta h2 { 
        color:#f00;
        padding-top:20px;
    }

    which finally had the desired affect.

Stage 3: Saving the Modified Style Sheet Back to the Server

Once you’ve got the correct CSS rule written into your stylesheet then you need to save it and upload it back to the server and reload the page in the browser to test that the updated rule has actually worked and more importantly that it hasn’t accidentally broken any other parts of the site layout. If you have analysed the selector carefully then this should not happen.

  1. In the CSS editor pane click the 3-23-2009-12-41-18-am button and save the style sheet on the desktop (or somewhere easy to find.
  2. Assuming that your webserver is on a remote machine then, use your favourite FTP client to upload the updated style sheet to the server replacing the old one in the process.
  3. Once its finished uploading, click reload on your browser and check that it worked.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>