Firefox Themes

Document Sample
Firefox Themes Powered By Docstoc
					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

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.


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: 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 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: 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.



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 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.


<?xml version="1.0"?> <RDF xmlns="" xmlns:em=""> <Description about="urn:mozilla:install-manifest"> <em:id>{526fd696-27a0-11dc-8314-0800200c9a66}</em:id> <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> ADD YOUR UUID HERE

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="" xmlns: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.


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, don’t 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. (Don’t forget to back up in case you do something you regret and can’t 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.


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.


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.


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 OS’s. 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: or you can email me at:

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.


Shared By:
Description: The Bodizzle Guide to Creating and Editing Your Own Firefox Themes