FireFox - AquaFox - Theming Mozilla Firefox

Aluminum Alloy Graphics by Max Themes

Siro Graphics by Daisuke Yamashita

Default Buttons with an Aqua Desktop as background.

Theming Firefox. I decided that I wanted to make a Firefox theme, but I didn't want to spend the time to learn how to make official themes. So I did some research and found out that you could change the button area via style sheets. This tutorial is how to make a CSS theme under Mac OS X. If a PC user knows how to find their userChrome.css folder this should work for them too.

One important note: This way of Theming Firefox does have an issue. You can only use default icons in the toolbar. This means forward, back, home, etc. Any extension icons that you add to the toolbar will not work. You will end up with a mess. The icon between the address bar and google bar, as shown here, is an example of an extension icon that I had added to Firefox's toolbar and can't use with this Theming method.

To theme Firefox this way is pretty easy, just a few steps to follow.

1) download four graphic files. Buttons Big Buttons Small Pinstripe Header Now open your favorite graphics program and edit these files, replacing what you want. Pinstripe and Header can also be edited to be any size. When finished save them out as PNG files, just as you found them. Tiffs also work and I'm pretty sure any graphics file will too.

2) quit Firefox

3) navigate to your Firefox's Chrome folder.
home -> library -> application support -> firefox -> profiles -> (random letters).default -> chrome

4) create a folder in here for your theme. I'm calling mine alloy. Copy the four files you created into this folder.

5) inside the chrome folder you should see a file called userChrome.css. Duplicate this to make a backup copy. Then open userChrome.css in a text editor.

6) add the following lines to the bottom of that file.

/* theming firefox by TwisterMc */
#PersonalToolbar {
background-image: url("alloy/pinstripe.png") !important;
background-repeat: repeat !important;
border-bottom-width: 0px !important;
}
menubar, toolbox, toolbar {
background-image: url("alloy/header.png") !important;
background-color: none !important;
}
.toolbarbutton-1 {
list-style-image: url("alloy/Toolbar.png") !important;
}
toolbar[iconsize="small"] .toolbarbutton-1 {
list-style-image: url("alloy/Toolbar-small.png") !important;
}
/* end theming firefox by TwisterMc */

Make sure to change the folder name (alloy) to your own.

7) Restart Firefox to see your changes!

Too un-install a theme you can do two things. a) delete your folder and userChrome.css and rename that version that you backed up to userChrome.css and restart Firefox. b) open userChrome.css and remove the lines you added.

Would you like to see more about Firefox customization?

Do you have some tips or tricks? How about questions? Join our Firefox discussion. Need more things to customize? Check out Mozilla's Tips.

Old Sites | Christmas/Holiday Desktops | Firefox Customization