How to make a Firefox 3.x.x theme-Tutorial!
2 posters
Page 1 of 1
How to make a Firefox 3.x.x theme-Tutorial!
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
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
Last edited by Jivko on Tue Apr 20, 2010 11:49 pm; edited 1 time in total
Re: How to make a Firefox 3.x.x theme-Tutorial!
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
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
Thank You
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
Re: How to make a Firefox 3.x.x theme-Tutorial!
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.
coach handbags
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
Similar topics
» Last Firefox theme?
» Which Firefox theme do you use?
» Which theme should be updated for Firefox 4 first?
» theme S.S.LAzio for firefox
» FireFox 3.6 uncompatible with Bloody Red Theme :(
» Which Firefox theme do you use?
» Which theme should be updated for Firefox 4 first?
» theme S.S.LAzio for firefox
» FireFox 3.6 uncompatible with Bloody Red Theme :(
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Tue Feb 03, 2015 9:25 pm by terolsa
» looking for title of a movie
Fri Mar 08, 2013 2:25 am by van driver
» Movie Finder
Tue Jul 10, 2012 3:37 pm by trand69
» last movie trailer you watch ?
Fri Mar 09, 2012 5:53 pm by jeseenshern
» I am looking for a song but I don't know its name!
Mon Nov 21, 2011 5:55 am by badbuffalo
» Is there any way to get the old version of the green fox theme for firefox version 6?
Tue Nov 15, 2011 3:16 am by Firesniper
» Nicki Minaj Wows Vogue Earth Having Versace intended for H&M in addition to Victoria's Technique Gigs.
Sat Nov 12, 2011 3:27 pm by snowlin42
» avacs live chat
Fri Nov 11, 2011 1:35 pm by trobos
» Woods: Williams apologized over racial slur
Tue Nov 08, 2011 11:42 am by yidiandiana