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.

Advertisements