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/menu/ 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.
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.
- Mugford February 21st, 2008 at 10:23 pm
Mozilla Firefox 2.0.0.12 - Windows Vista
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);
}
- Thomas February 22nd, 2008 at 6:38 am
Safari 523.15 - Mac OS X
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
- Mugford February 24th, 2008 at 4:00 pm
Mozilla Firefox 2.0.0.12 - Windows Vista
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?
- Thomas February 28th, 2008 at 9:23 pm
Safari 523.15 - Mac OS X
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.
- Adnan May 2nd, 2008 at 1:03 pm
Anonymouse
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.
- Tim September 14th, 2008 at 5:37 am
Mozilla Firefox 3.0.1 - Windows Vista