Main Content

Customizing Toolbar Backgrounds

There are three main toolbars in Firefox, each that can have a separate background.

      1. Navigation Bar
      2. Bookmarks Bar
      3. Status Bar

The main toolbar background graphic is named toolbar-background.png and located in the /global/toolbar/ folder. If you just recreate a new png file, you won’t need to edit any of the CSS code. If you want to make some modifications to how it’s displayed, you can open /global/toolbar.css and edit the toolbar elements. For the most part here, you are just concerned with the toolbar style.

The bookmarks bar background is called bookmark_toolbar_background.png can be found in the /browser/graphics/ folder. The CSS files to go with it are inside /broswer/browser.css and element name is #PersonalToolbar. #ybToolbar also uses the same CSS code as #PersonalToolbar as #ybToolbar is the del.icio.us toolbar if users are using that as a replacement for the built in bookmarks bar.

The status bar background is called statusbar_background.png and located in the /global/ folder. Again, just recreating a png file is all that is necessary. If you want to have a bit more control over the code, like font colors, you’ll need to open up /global/global.css and edit the menu element.

You are free to use images or just color behind toolbars. Keep in mind that toolbars can be different heights based on what is in them, so try and keep that in mind when creating background. You never know what your users will come up with.

This is just one installment into the iPox Remix set of tutorials that will help you learn how to create your own Firefox theme. Visit the main iPox Remix page for more details.

13 Responses

  1. Mugford says:

    It seems like firefox (or iPox?) uses the same background image for the toolbar and the menubar – is it possible to use a different image for the menubar background? Where do I put this image and what css code do I need to add/modify? Thanks.

  2. Thomas says:

    Hi Mugford. Here is the code that will control the menubar background (Windows only)

    #toolbar-menubar {
    background: blue url(http://images.apple.com/ipodshuffle/images/index_colors_20070905.png);
    }

  3. Mugford says:

    Thanks Thomas. I also noticed a slightly different version in this tutorial’s Q&A. Which .css file do I put this in, /browser/browser.css or /global/toolbar.css ? Do I need to remove or change the following code from /global/toolbar.css?

    toolbar {
    min-width: 1px;
    min-height: 20px;
    border-top: 0px solid ThreeDHighlight;
    border-bottom: 0px solid ThreeDShadow;
    background: url(“chrome://global/skin/toolbar/toolbar-background.png”) repeat center;
    }

    toolbar:first-child, menubar {
    min-width: 1px;
    border-bottom: 1px solid ThreeDShadow;
    border-top: 0px !important;
    }

    Thanks, Mugford

  4. Thomas says:

    Hum…. I’d go for global.css or toolbar.css. If the code is already in toolbar.css, put the new code in there and replace the old code. Does that help?

  5. Adnan says:

    I am using Firefox 2. I have downloaded quite some plugins now that I often use.

    The problem is the all the plugins are not showed in status bar as well as it completely messes up webpages view because it needs more space to show. It stretches too much and so on….

    At the same time, I work as a Website Quality Assessment and if these things will effect the layout of the site, my work will GREATLY get disturbed.

    How to get more space to status bar?
    How to customize status bar?
    Where to get the files?

    I have tried to see where can I find the files you mentioned above like global/menu/ etc… Please help.

    Thank you.

  6. Tim says:

    I using Firefox 3 on Vista and I checked for those css files. I check in my profile folder and they are not there. I don’t know if is a Vista thing or a bug.

  7. not applicable says:

    I can’t find

    statusbar_background.png

    anywhere!

  8. Thomas says:

    I think in the latest version it may have changed to statusbar-background.gif in the global folder.

  9. Harry says:

    What do these affect?
    ” 2. Bookmarks Bar

    3. Status Bar”
    Affect? I changed it to a black image but don’t see any difference….

  10. Harry says:

    (sorry said affect twice lol)

  11. Alex says:

    Hello,
    I edited the bookmark toolbar by replacing it with another image. But it won’t show up as my image when I install the add-on! I’m not sure what to do, what do you think? Do I need to edit something in css?

  12. Thomas says:

    You shouldn’t have to do anything with CSS Alex as long as the file names are exactly the same. It’s hard to troubleshoot over comments so if you still need help, email me twistermc/gmail

  13. John says:

    Is there a way to make from the menu bar down to the bookmark bar all one image?

Leave a Reply