16
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

Firefox Guide

Embed Size (px)

DESCRIPTION

firefire

Citation preview

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

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.

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

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.

11

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.

12

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.

13

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.

14

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.

15

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

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

16

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:

[email protected]

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.