How to make a Firefox 3.x.x theme-Tutorial!

View previous topic View next topic Go down

How to make a Firefox 3.x.x theme-Tutorial!

Post  Jivko on Sun Oct 18, 2009 3:37 pm

Hi! In this tutorial I'll show you the basic things you need to make a Firefox theme.

Before I started making themes I knew nothing about how to make them.There were a few tutorials made by Twister Mc and Bozzile(I think that this was the guys name.) which helped me a lot with making these themes.

The things you need for the theme are:Text editor like Notepad ++.I use it and it's really nice and easy.Programs like Photoshop , Gimp and so on.I use gimp because my PC is not that powerful and because it's free and easy.Making a Firefox theme will be much easier if you have basic CSS knowledge.I started making themes without knowing css and it was very very hard and I realized that I have to learn it in order to make my themes.

1.Getting started-Theme archive!

First of all you'll need to know what is a Firefox theme.The Firefox theme is a jar file.In it you'll find 5 or more folders 2 images and 2 text files.Take a look of the archive of my Bloody Red theme.You can download it from the Firefox site.

http://1.bp.blogspot.com/_j5Q8M-I7aMw/SnE3IQ5EoqI/AAAAAAAAAEI/nXlXTDPOnu8/s1600-h/dd.png

In the folders there are more folders,text files and images but in this step one will see these 9 files.The other files are text files and images.The images are the icon image and the preview image which you can see when you open your add-on window and click on the theme.

The text files are the install.rdf file and the contents.rdf
These files are really important and you better don't make mistakes when you're writing them because if there are the theme won't work.

2.Install.rdf and contents.rdf files.

Now lets take a closer look and these files.Open the install.rdf file.You can use my theme for example.Download it from here https://addons.mozilla.org/en-US/firefox/addon/10724

The install.rdf is the main theme information. You’ll need to add your own version number, theme name, description, creator and homepage information.Don’t Change the area that is inside the em:targetApplicaton as this is the coded needed for Firefox.

http://2.bp.blogspot.com/_j5Q8M-I7aMw/SnE7_z23GQI/AAAAAAAAAEQ/E3jOBMg0V80/s1600-h/install.png

As you can see you need to change a few things.

Take a look at the image.You need to change the following things.

Fist you need to change the UUID number.The UUID must be different if you want to upload it on the FireFox site.If it's the same as mine you won't be able to upload it.Just go to this page http://www.famkruithof.net/uuid/uuidgen and generate you own UUID.
After that you can see the version number.In my case it is 0.8.All you need to do is change it to 1.0 or something.
Next is the Firefox UUID.DON'T CHANGE IT!
After that you can see the theme minimum and maximum version number.In this case it is from 3.0 to 3.1b3.This means that this theme works with all Firefox versions from 3.0 to 3.1b3.You need to change this when you update your theme in order to install.
Next is the Theme name.Change it to whatever you want.
After that is the description.The description appears when you open the add-on window and chose themes.There you'll see sentences under the theme name.
Creator,contributor and homepage internationalName.Change them the way you like.

Next File for update is the contents.rdf Like in the install.rdf open it with the text editor and change the theme name. and stuff.

http://3.bp.blogspot.com/_j5Q8M-I7aMw/SnFu8QM6j9I/AAAAAAAAAEY/c2bsV2F-11g/s1600-h/c.png

3.Folders and the 2 images.

Now it's time putting all the elements together.You can get the folders and the icons from the default theme and modify theme the way you want.You can find the default Firefox theme by going to C/Program files/Mozilla Firefox/chrome.In the chrome folder you'll find few jar files (archives) You'll need the classic.jar file.Copy and paste it on your desktop and open it.
When you open it you'll see two images and a folder called skin.Make a new folder on your desktop.Copy and paste the 2 icons in it.After that open the skin folder.There you'll find another folder called classic.Open it and you'll find more folders called browser,communication,global and mozapps.Copy and paste these folders in the folder you where you put the 2 icons.After that put the in stall and contents.rdf in it.Make an archive.Change the last 3 letters from rar to jar.

Now you have your theme all you need now is to edit the images and text files.

4.Editing images and text files.

The images and text files are located the the browser,communication,global and mozapps folders.
All you have to do now is start editing stuff.You can edit the images with programs like photoshop,gimp,fireworks and so on.Also you can add new images,navigation buttons.
About the text files.This is where css knowledge comes very handy.It's good to know at least the basic css stuff.this way you can change colors,borders and so on.

5.Final step.

When you're done open up Firefox and drag your theme to the themes window to install. Restart and see how it goes.Check for bugs and stuff.If there are try to fix them.Finally go to the Firefox site,make a registration and upload your theme.

I hope that this tutorial will help people who want to start making Firefox themes.
Best wished Jivko Wink


Last edited by Jivko on Tue Apr 20, 2010 11:49 pm; edited 1 time in total
avatar
Jivko
Admin

Posts : 377
Join date : 2009-10-17
Age : 24
Location : South East Europe

View user profile http://firefoxthemes.hostei.com/

Back to top Go down

Re: How to make a Firefox 3.x.x theme-Tutorial!

Post  Jivko on Thu Jan 28, 2010 3:22 am

Hi guys!
I want to let you know that the contents.rdf file won't work on Firefox 3.6.The theme won't install properly and you won't be able to see the changes.

Here's the way to Fix this
Create a new text file with this name: “chrome.manifest”
insert the follow lines (except start and end!!!):
— start —
skin browser BlueFox browser/
skin communicator BlueFox communicator/
skin global BlueFox global/
skin help BlueFox help/
skin mozapps BlueFox mozapps/
— end —

Save this file and add it to your BlueFox.jar file.
That’s all.

MORE INFO:
In Firefox 3.6 “chrome.manifest” replace “contents.rdf”.
You can leave “contents.rdf” to make retrocompatibility with old Firefox versione (3.5, 3.0, ect.)

You can replace BlueFox with the name of your theme.

I'd like to thank Francesco Milioni.Thanks to this code I managed to get my themes working on Firefox 3.6
avatar
Jivko
Admin

Posts : 377
Join date : 2009-10-17
Age : 24
Location : South East Europe

View user profile http://firefoxthemes.hostei.com/

Back to top Go down

Thank You

Post  sixlead on Tue Apr 20, 2010 11:25 pm

First of all thank you for posting this tutorial and your theme. I really like the theme but (yes there is always that word) I wanted to make it less dark. So I found the background.png file and altered it to a lighter shade saved it and recompressed the directory. renaming it from .zip to .jar allowed firefox to use the theme but it was messed up it seems that the theme would not use the altered background.png file. Did I miss understand the directions or making improper changes to your theme?

sixlead
Guest


Back to top Go down

Re: How to make a Firefox 3.x.x theme-Tutorial!

Post  Jivko on Tue Apr 20, 2010 11:48 pm

sixlead wrote:First of all thank you for posting this tutorial and your theme. I really like the theme but (yes there is always that word) I wanted to make it less dark. So I found the background.png file and altered it to a lighter shade saved it and recompressed the directory. renaming it from .zip to .jar allowed firefox to use the theme but it was messed up it seems that the theme would not use the altered background.png file. Did I miss understand the directions or making improper changes to your theme?

Let me see an image of the browser and the part of the code which has been modified for your image.
avatar
Jivko
Admin

Posts : 377
Join date : 2009-10-17
Age : 24
Location : South East Europe

View user profile http://firefoxthemes.hostei.com/

Back to top Go down

coach handbags

Post  Darrel on Wed Dec 01, 2010 11:54 am

designer handbags, edhardy womens hoodies hermes burberry leather wallets and suits louis vuitton crisp shirting classic knitwear and smart jerseys have always been the focus and core to the Merc brand. From the button down shirt of 1967 to the mod Harringtons of 2010 Merc has prided itself on developing classic designs that always s

Darrel

Posts : 25
Join date : 2010-11-16

View user profile

Back to top Go down

Re: How to make a Firefox 3.x.x theme-Tutorial!

Post  Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum