The Bodizzle Guide to Creating and

Editing Your Own Firefox Themes

Table of Contents
Introduction.Page 2
Materials Needed..Page 3
Unpacking Files & Getting Started.Page 5
The Browser Folder..Page 8
The Global Folder.Page 10
Other Folders....Page 13
Repacking Your Theme...Page 14
Uploading to Firefox..Page 15

Introduction
I started working on Firefox themes when I found an older theme that I really liked
(Abstract PC by Pizzach) which wasnt updated to work with the release of Firefox 2.0. He
hadnt updated his theme in over a year and many people other than myself had expressed
a desire for an updated theme. I decided to take on the project and create a version that
worked with FF 2.0.
There were very few tutorials other than some basics that explained how to open .jar
files and where to find a UUID and so on but I was left mostly to explore through trial and
error until the theme did what I wanted it to. After creating and redesigning several themes
now, I decided a fairly in-depth breakdown of how to make or alter your own themes would
be greatly appreciated.
Depending on what you plan on doing with your themes, you can spend a few
minutes on adjusting font sizes and colors, changing background colors, changing a
background image, or you can spend hours upon hours making a new theme of your very
own.
I mainly work in Windows with some things done in Ubuntu Linux. I have not done
any theme work in OSX so my directions will be in reference to Windows. This mainly
applies to folder directories and possibly to unpacking and repacking .jar files.
I hope you find this tutorial useful and detailed enough to help you accomplish what
you set out to do in your theme creation endeavors.

Materials Needed
The first thing you need is a theme to start building from. The default Firefox theme
is a very basic theme that requires quite a bit of customization in order to make it look like
the other available themes. This theme can be found in the directory:
C:\Program Files\Mozilla Firefox\chrome\
The file you need is called classic.jar and you can copy this file and save it to your desktop
where it will be available for unpacking and tinkering with.
Because you may have some ideas on what you would like your theme to look like,
there may be some other themes out there that have already included some things you
want in your theme. If this is the case, send the author an email asking if it is ok to use
their theme as the foundation to make one of your own. Most often they will not have a
problem with this meaning you can go to the themes download page in Firefox Add-Ons
and right click the download button. Select save as to save the .jar file to your desktop.
Without going into too much detail, a .jar file is simply a specific type of .zip file that
compresses several files into one. This is the file that contains everything you need for
your theme to work. In order to change the theme, you must unpack it. In Windows, I have
found the best program for this is WinRAR. You can also use this program for Linux and
OSX along with others. Linux comes installed with a very good archive manager and I
believe OSX can use stuffit. WinRAR has a free version that is good enough for what you
need in theme creation that allows you to unpack and repack .jar files. You can download it
at:
http://www.win-rar.com/downloadnow.html
You will also need a good paint program. Most image files are saved either as .png
or .gif files. I use, and strongly recommend Paint Shop Pro (I purchased it for $25 after
3

mail-in rebates), to do all of graphics and color selection. It is a great and inexpensive
program that is very easy to use. If you dont want to pay for a paint program, GIMP is
another great image editor/creation program that is free. GIMP can be downloaded at:
http://www.gimp.org/downloads/
My main focus in writing this how-to is on theme creation rather than the icons but I
will provide a couple of tips to help you with icons as well. There is a lot to explain and
discuss when it comes to using these programs to create icons and there are great online
tutorials and several books written on how to use them. One option for icon sets is to find
an one that you like by searching the web and asking the creator if it would be possible to
use them for a Firefox theme. Another is to find an abandoned theme that you like, such as
I did with Abstract PC and Aquatint, and use those for a new theme. There are tons of icon
sets out there that the creator would most likely be more than willing to allow you to use.
Be creative.
Other than that, all you really need is a basic text editor (in Windows, note pad and
word pad work great), Firefox, and patience.

MAKE SURE YOU BACK UP FILES OFTEN IN CASE YOU MESSED SOMETHING UP
WHEN YOU MADE A MINOR CHANGE FROM THE PREVIOUS VERSION

Unpacking Files and Getting Started

After you download and install WinRAR ( any other you decide to use), right click
your .jar file and select extract to file name\. This will create an extracted folder on your
desktop that contains the following folders and files:
Text Files:
contents.rdf, install.rdf
Image Files:
icon.png, preview.png
Folders:
browser, global, communicator, help, mozapps

The first thing you need to do is change the contents.rdf and the install.rdf files using
word pad or note pad (If you are just altering an existing theme and do not plan on
uploading your new theme to Firefox, you can skip this section). This gives the basic
information about your theme and makes it unique in case you decided to upload it to the
Firefox Add-Ons site.
On page 6 you will see the text from the install.rdf file. You need to get a unique
UUID for you theme by going to http://www.famkruithof.net/uuid/uuidgen then copy and
paste the UUID in the appropriate line.
On page 7 you will see the text from the contents.rdf file. Make sure you change
every on of the lines containing the internal theme name to your own themes name. Most
of these files will remain as they are; the only things you need to change are those lines
with information specific to each theme.

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>{526fd696-27a0-11dc-8314-0800200c9a66}</em:id>
ADD YOUR UUID HERE
<em:version>Insert Version Number Here</em:version>
<!-- Target Application this extension can install into,
with minimum and maximum supported versions. -->
<em:targetApplication>
<Description>
<!-- Firefox's UUID -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>2.0</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!-- Front End MetaData -->
<em:name>Name of Your Theme</em:name>
<em:description>Description of Your Theme</em:description>
<em:creator>Your Name</em:creator>
<em:contributor>Add a Name</em:contributor>
<em:homepageURL>Your Website</em:homepageURL>
<!-- Front End Integration Hooks (used by Theme Manager)-->
<em:internalName>Internal Theme Name Such As aquatint_black</em:internalName>
</Description>
</RDF>

After you change the necessary lines, save and close the files. Any time you
change your theme and plan on uploading it to the Firefox site, you must change the
version number in the install.rdf file.

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<!-- List all the skins being supplied by this theme -->
<RDF:Seq about="urn:mozilla:skin:root">
<RDF:li resource="urn:mozilla:skin: Internal Theme Name "/>
</RDF:Seq>
<RDF:Description about="urn:mozilla:skin:Internal Theme Name From Install.RDF"
chrome:displayName="Your Theme Name"
chrome:accessKey="S"
chrome:author="Bodizzle"
chrome:authorURL="Your Web Page"
chrome:description="Your Theme Description"
chrome:name=" Internal Theme Name"
chrome:image="preview.png" >
<chrome:packages>
<RDF:Seq about="urn:mozilla:skin: Internal Theme Name:packages">
<RDF:li resource="urn:mozilla:skin: Internal Theme Name:browser"/>
<RDF:li resource="urn:mozilla:skin: Internal Theme Name:communicator"/>
<RDF:li resource="urn:mozilla:skin: Internal Theme Name:global"/>
<RDF:li resource="urn:mozilla:skin: Internal Theme Name:mozapps"/>
<RDF:li resource="urn:mozilla:skin: Internal Theme Name:help"/>
</RDF:Seq>
</chrome:packages>
</RDF:Description>
<!-- Version Information. State that we work only with major version 1.5 of this package. -->
<RDF:Description chrome:skinVersion="2.0" about="urn:mozilla:skin: Internal Theme
Name:browser"/>
<RDF:Description chrome:skinVersion="2.0" about="urn:mozilla:skin: Internal Theme
Name:communicator"/>
<RDF:Description chrome:skinVersion="2.0" about="urn:mozilla:skin: Internal Theme
Name:global"/>
<RDF:Description chrome:skinVersion="2.0" about="urn:mozilla:skin: Internal Theme
Name:mozapps"/>
<RDF:Description chrome:skinVersion="2.0" about="urn:mozilla:skin: Internal Theme
Name:help"/>
</RDF:RDF>

Changing the Browser Folder Contents

After you get those two files ready, you can move on to the folders. The contents of
the browser folder are responsible for the overall look of the theme. It contains the main
toolbar background image, the toolbar icons, the URL bar features, the search bar icons,
the bookmarks folder, the preferences folder, and most importantly the browser.css file.
This file is where you start telling your theme what to do. The main things you are going to
look for when modifying your theme are lines such as
color: #ffffff;
background-image: url("chrome://browser/skin/bookmark_toolbar_background.png");
#forward-button, #back-button[chromedir="rtl"] {
-moz-image-region: rect(0px 64px 32px 32px);
The part that says 0px 64px 32px 32px most often refers to where it will take a portion of an
image to display on the browser (see picture below). The first number refers to the top
pixel location of your image, the second number refers to the right pixel location, the third
number refers to the bottom pixel location, and the fourth number refers to the left pixel
location. More often than not, you will not have to adjust this line unless you really alter the
image files.

This is my toolbar.png file for aquatint. The four numbers would define a region of the image to use. In this
case it uses the region for the forward button.

The other lines show up quite a bit and will be used to adjust any text color or image
used as the background. chrome://browser/skin/bookmark_toolbar_background.png
means that it is using the bookmark_toolbar_background.png file which is located in the
browser folder.
8

The browser.css folder is where you will find information on bookmarks including
whether or not favicons are displayed, your main toolbar and icons, your URL bar features,
the throbber icon, and your go button. Also in the browser folder is your preferences folder
and you bookmarks folder. The main changes here are to icons and not to the .css file.
Some have mentioned that it would be nice to know how to change a specific icon to
something you would like to use. The best and easiest way is to insert your personal icon
on the image map in place of the button you want to replace. For example, if you want to
replace the reload button, resize the icon so it is the same size as each button (most large
icons are 32x32 and most small icons are 24x24). Then, using your paint program, insert a
new layer. Copy and past the new icon image you selected into the new layer and position
it over the old icon. Erase that specific icon from the original layer, then merge layers to
create one solid image again. (If you do not know what layers are, please check out an
online tutorial or buy a user guide to the paint program you have. There is way too much
information regarding how to use these paint programs than I could even begin to include in
this guide).
You can use this method to change any icon in the theme, including smaller 16x16
individual icons. If you have an icon, just resize it to the same size as the icon you want to
replace, copy and past it as a new layer, delete the original, and merge as a single image.
Save the file as the same name as it was.

Changing the Global Folder

The global folder is where you can add all of the uniqueness to your theme including
dropdown menus, the progress meter, tabs, the throbber, checkboxes and radio icons,
buttons, scrollbars, icons and other backgrounds. Most of the changes can be made by
replacing the existing icons with your own. As with the icons in the browser folder, the
easiest way I found was to find the new icon you wanted to use, save it to the same size as
the icon you want to replace, then copy and paste it over the old icon as a new layer in your
paint program. Then, delete the layer containing the original icon. This allows you to
maintain the correct spacing and use the same file name saving time and energy from
having to alter the appropriate lines in the .css file. As long as your spacing matches up
with the old icon, there will be no need to adjust the .css file.
If you were able to find a theme that had much of what you were already looking for,
you can leave many of these files along.
There are a lot of .css files that do many different things in this folder. The main files
to focus on are:
browser.css, button,css, checkbox.css, formatting.css, global.css, menu.css, menulist.css,
popup.css, preferences.css, progressmeter.css, radio.css, scrollbars.css, toolbar.css, and
toolbarbutton.css. Conveniently enough, the icons and images associated with these files
are located in the folders using the same names.

10

Many of the files can be left untouched with no effect to your theme.

The browser.css file in my themes is where you adjust the tabs. Here you can
change the font color (hint, look for the lines that say text followed by lines
containing font names and the color: #ffffff; line.) To change the colors, you
need the html color code which is the # followed by a six letters/number
combination. You can get this in the color selector tool in your paint program
when you choose which color you want.

The button.css and scrollbars.css files will most likely be left unchanged if you
find a theme that has buttons you like. If you use the button.css file from the
default theme you will get the standard gray rectangle buttons with black text.
Scrollbars and buttons are also easily changed by using the method for changing
icons I previously described. If you do this, you can leave the .css file alone.

The checkbox.css, the progressmeter.css, and the radio.css files work like the
button.css file. If you like the ones your selected theme uses, dont mess with it.
Again, you can change the icons and leave the .css file alone.

The formatting.css file sets specific font sizing and colors and will usually be left
alone unless there is something you specifically want to look a certain way. If
there are certain colors you want for certain areas of text, mess around by
changing one text at a time until you get the one you want. (Dont forget to back
up in case you do something you regret and cant figure out how to go back.
Trust me, I have done this and it took a long time to fix).

The global.css file is another that sets specific colors and backgrounds. The
status bar and side bar background and font colors for each can be found here.

11

You can change the color of the menubar fonts here in case you are doing a
darker theme and need a lighter font color. (#000000 is black and #ffffff is white)

The menu.css file controls your menu font color and size. One of the most
popular questions I get asked is how to make the menu text bigger. One way is
to add the line font-size: 12px; to the menuitems line n this file, or by adding it to
the top of the browser.css file under the menuitems line file located in the
browser folder.

The menulist.css file is where you adjust the look of the dropdown lists from the
preference window and anywhere containing a dropdown list.

The toolbar.css and toolbarbuttons.css files will most likely be left unchanged but
contain some details about those features.

Most of the changes done to this folder will include icons and images. The changes done
to the .css files will mainly include colors and font size adjustments. Once you get more
familiar and comfortable with changing themes, you will start altering the .css file. The
icons and images you use will usually create the changes you desire as long as you keep
the file names and image sizes the same as the originals.

12

Other Folders
The other folders found in the main location include the communicator (which you
will most likely not need to change), the help folder (mainly icon changes if any), and the
mozapps folder. The only changes to the mozapps folder would be some icon adjustments
for colors or consistency with your theme, and maybe some adjustments to text colors.
Like the others, this folder does not contain much. Inside the mozapps folder is the
extensions folder which contains the icons for the add-ons page for themes and
extensions along with the downloads folder which controls how the download progress
window looks for files downloaded from the web.
Most of what I have learned has come through searching each file and making minor
adjustments to see what happened.

13

Repacking Themes
Once you are finished customizing your theme, you are ready to repack your .jar file
and install. To repack, highlight everything in your main folder as seen below. With all of
the files highlighted, right click the mouse button and select add to archive.

You will see the window on the right. Make sure you choose ZIP as the archive format then
name your theme in the box below Archive name. Be sure to end it with .jar rather than .zip
or your theme will not install properly. If you are using Linux, the archive program allows
you to select which type of format you want to use and you only need to name it. It is not
necessary to add the .jar at the end. Click ok to start the archive.
This creates a .jar file which is what you install in the add-ons popup window in
Firefox. To install, simply open Firefox the click tools>add-ons>themes. Drag and drop
your .jar file in the theme window and select install. Go back into the theme window and
select use theme and restart Firefox. If/when you make changes to your theme and
repack the .jar file, you must uninstall your previous version and close Firefox before you
install the new version.
14

Uploading to Firefox
For those of you who would like to make your new theme available for public
download on the Firefox Add-Ons page, register as a user and click on the developer tools
from the list on the left hand side then select submit add-on. You will see this screen.

Click on the browse button under Add-on file and select your saved .jar file. If you would
like to make your theme available for a specific operating system, lick on supported
platforms, otherwise leave this alone to make it available to all OSs. If you want to use
your icon file, load that image in the second box. Click next. From there it is pretty selfexplanatory. Just type in the appropriate information and keep hitting next until you are
finished.
This loads your theme in the Sandbox area where people can download and install it
but it is not yet public. To make it public, you must go back into the developer tools menu,
15

click on your theme name and select nominate to appear on public site. Getting your
theme public can be a pain because the testers look to see if everything is working properly
and wait until users have left positive feedback and high ratings for your theme.
Sometimes a theme can be made public quickly or it can take what seems like forever.

Please let me know if there is anything else that needs to be added to this guide. You can
leave comments at my website:
http://bodizzlethemes.blogspot.com
or you can email me at:
blbodine@verizon.net

I hope this helps out. Remember that these can take a lot time and require a lot of patience
and searching. Look for key words in the .css files to help you find the lines you are looking
to change. Look around through each of the files, back up copies of the files then make
minor changes to see how it affects your theme. As long as you make copies of icons and
files before you change them, it will be easy to revert back to what you had before making
the change.

16