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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
2
Introduction
I started working on Firefox themes when I found an older theme that I really liked
(Abstract PC by Pizzach) which wasn’t updated to work with the release of Firefox 2.0. He
hadn’t 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.
3
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
4
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 don’t 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
5
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 theme’s 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.
6
<?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.
7
<?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>
8
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
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.
9
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.
10
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