Firefox 1.0 Theme Creation For Dummies: Getting Started

Discuss application theming and theme development.
cedsav
Posts: 3
Joined: January 10th, 2005, 10:03 am
Contact:

Firefox 1.0 Theme Creation For Dummies: Getting Started

Post by cedsav »

I found it quite difficult to find up-to-date information on this subject, so I thought this might be helpful to those who, like me, want to create a theme and can't even get started.

<strong>Disclaimer:</strong>This might not be the most efficient or safest way to start a new theme. That's just how I got it working, with little knowledge of the whole Mozilla XUL thing. Please correct me if you find anything wrong or irrelevant.

<strong>Firefox 1.0 Theme Creation : Getting Started</strong>
================================
For Windows XP. I suspect the instructions are similar for other OS, path information excepted.

<strong>Get ready</strong>
Find Mozilla's Application Data folder. Usually:
C:\Documents and Settings\YOUR_USERNAME\Application Data\Mozilla\Firefox\Profiles\[randomly named default]\

<strong>Duplicate an Existing Theme </strong>
<ol><li>First, choose an existing theme to use as a base. Install it if necessary. Any theme compatible with Firefox 1.0 will do, but don't use the default theme, unless you know where to find an install.rdf file.</li><ul><li> Ex: We'll use "Noia 2.0 (eXtreme)" here.</li></ul>
<li>In the [Mozilla's Application Data]\extensions\ folder, find the theme .jar file. </li><ul><li> Ex: {9f08cb5a-76b1-4bcf-aff9-90e1a5d60b1e}\chrome\noia_2.0_(extreme)-2.81-fx.jar</li></ul>
<li>Copy the .jar file to a temporary folder and rename the copy to fit your theme name. Change the extention from .jar to .zip<ul><li> Ex: temp\MyTheme.zip</li></ul></li></ol>
<strong>Make it Yours </strong>
<ol><li value="4">Extract the content of the zip file (make sure you preserve the directory structure). You should now have :
<ul><li> 4 folders: browser, communicator, global, and mozapps (and maybe more)</li><li> contents.rdf and install.rdf</li><li> icon.png and preview.png</li></ul></li>
<li> Edit the contents.rdf file (with notepad):<ul><li>Replace all occurences (a dozen) of the skin name with yours. For instance 'Noia2f' becomes 'MyTheme'. </li><li>Change chrome:displayName, chrome:accessKey, chrome:author, chrome:authorURL, and chrome:description to your taste.</li><li>Save and close the file</li></ul></li>
<li> Generate a GUID (Globally Unique Identifier) for your theme. You can do so by downloading GUIDGen.exe from Microsoft:
http://www.microsoft.com/downloads/deta ... laylang=en
In GUIDGen.exe you will want to use the Registry Format option.</li>
<li> Edit the install.rdf file: <ul><li> Change the first <em:id>{ .. long serie of numbers and letters ...}</em:id> with your new GUID. Don't change the second GUID, as it refers to the target application, Firefox.</li><li> Change <em:version> to your own version number.</li><li> In the targetApplication section, check <em:minVersion> and <em:maxVersion>. 1.0 is ok. (see http://www.mozilla.org/projects/firefox ... pdate.html for versionning info)</li><li> Change the <em:name>, <em:description>, <em:creator>, <em:contributor> (optional), <em:homepageurl>, and <em:internalName> to match the info in contents.rdf.</li><li>Save and close the file</li></ul></li><li> If you have an icon and a preview ready for your theme, you may replace icon.png and preview.png with your own now.</li>
<li> Rezip your theme and revert the extention to .jar. </li></ol>
<strong>Install the Pseudo-New Theme </strong>
<ol><li value="10">Open the Themes Extention Manager in Firefox (tools > theme). Drag your theme .jar file to the Theme window. Firefox will install the theme for you. If there's a problem at this point, check your rdf files and make sure you folder tree in the zip file is correct. </li></ol>
<strong>Configure Firefox for Live Theme Editing </strong>
<ol><li value="11"> In the Firefox address bar, enter 'about:config'<ul><li> Find 'extensions.dss.enabled' and double-click it to set it to true.</li><li> Right click anywhere on the list and select new>boolean in the contextual menu. Enter 'nglayout.debug.disable_xul_cache' as the preference name, and set the value to true.</li></ul></li>
<li>In the Firefox extention folder you should now have a new folder, named after your GUID. In the chrome subfolder, you'll find your .jar file. The next step will be easier if you unzip this file again (or move your theme temp directory) to
a 'YourTheme' subfolder. Ex:
<ul><li><em>The archive</em>: [Mozilla's Application Data]\extensions\{[GUID]}\chrome\mytheme.jar</li><li> <em>Your work folder</em>: [Mozilla's Application Data]\extensions\{[GUID]}\chrome\mytheme\ </li> </ul></li>
<li> Close Firefox. Edit [Mozilla's Application Data]\chrome\chrome.rdf (make a backup first) <ul><li> Find all occurences of your theme name that is in a c:baseURL line (about 5).
Ex: c:baseURL="<strong>jar:</strong>file:///C:/Documents%20and%20Settings/YOUR_USERNAME/Application%20Data
/Mozilla/Firefox/Profiles/default.efn/extensions/%7BC0D2653B-FBCC-415e-A96E-15C3636F50EA%7D
/chrome/YOUR_THEME<strong>.jar!</strong>/browser/"</li><li>Delete the 'jar:' and '.jar!' substrings.
Ex: c:baseURL="file:///C:/Documents%20and%20Settings/YOUR_USERNAME/Application%20Data
/Mozilla/Firefox/Profiles/default.efn/extensions/%7BC0D2653B-FBCC-415e-A96E-15C3636F50EA%7D
/chrome/YOUR_THEME/browser/"</li></ul></li>
<li> You're all set ! Open Firefox.
If something looks wrong, close Firefox, restore the chrome.rdf file, and try the previous step again.
</li></ol>
<strong>Test</strong>
<ol><li value="15">To test, you can edit the global\menu.css file.<ul><li>Add : background-color: #FFCC33; to the 'menu' rule. Ex:
menu,
menuitem {
...
background-color: #FFCC33;
}</li><li>Open a new window in Firefox (no need to restart). The background color for the menu should now be an ugly orange. When you make a change to an image or a css property, you just need to open a new window/dialog box to see the effect.
</li></ul>
</li></ol>
See also: http://www.mozilla.org/projects/firefox ... hemes.html and http://forums.mozillazine.org/viewtopic.php?t=175906

Note: When you're done developping your theme you will want to revert the modifications made in about:config and chrome.rdf.
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

nice... but I just extrace classic.jar from C:/Program Files/Firefox/chrome/classic.jar and rename it to a zip file, after extracting I rename it tto classic.jar
pika9@ deviantART ~Home to the Winstripe Classic theme.
Pikachu90000's Firefox Theme Review Blog
User avatar
Eyes-Only
Posts: 1354
Joined: May 18th, 2003, 9:59 am
Location: La Confédération Abènaquaise

Post by Eyes-Only »

Hi Cedsav!

Thanks so much for taking the time out for writing your method down for basic theme creation. You, Lucx, and Sailfish I believe, have recently done likewise and each has been an extremely valuable contribution to the beginner who would like to attempt theme making. Your method actually seems to be the comprehensible of the three which I've read to date and so I've saved it to copy to my Firefox backup directory (which later is stored to CD-R). Thank you once again for taking the time out for your contribution! :)

Pikachu has likewise come out with another interesting method for theming which has been employed and advocated by the themer Aaron (I believe) and several others, to commence with the theme Classic.jar where it is the simplest and likewise cleanest of all themes codewise. A lot of times people can simply drop their icons into this theme and re-jar (adding an install/contents.rdf of course, or simply the install.rdf---I forget) and they're on their way with a basic theme which requires little or no adjustment depending upon your size of icons, etc. However people: Remember to rename your file upon re-jar to your own theme name AND give credit for the codebase to the original authours as that is only proper and fair!

If you do a theme in this manner you may obtain an install.rdf from: http://www.tecknik.net/themer/

Amicalement et Bonne Chance!

Eyes-Only
"L'Peau-Rouge"
http://eyesonly.no-ip.info/jimmymac/
--
"We never know just how much a kind word, or a gesture, will lift the spirits of a person in need and heal them." KDpup-484, LucidPup-511, SM2+/FX4+/TB31+
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

I did know it, with a litle help from Eyes-Only, which reminds me *goes off and adds Eyes-Only to contubers list on Classic Winstripe*
That link that eyes gave out was what I used, I needed to change navigator to mozapps and lower the Firefox verison to 0.8, all of my themes support Firefox 0.8-1.1+. My Thunderbirds support 0.8-1.1+
pika9@ deviantART ~Home to the Winstripe Classic theme.
Pikachu90000's Firefox Theme Review Blog
Autumnmist
Posts: 62
Joined: August 31st, 2004, 5:54 pm

Post by Autumnmist »

Thank you so much for doing this. Hopefully we'll start seeing more and more themers entering the scene.

@Eyes-Only - can you post links to the other tutorials?
User avatar
Eyes-Only
Posts: 1354
Joined: May 18th, 2003, 9:59 am
Location: La Confédération Abènaquaise

Post by Eyes-Only »

Hi Autumnmist!

The other tutorials are right here in the "Themes" section. There's one either on this page by lucx or the next page, and Sailfish must have one several pages in by now. Not sure how far in Aaron's would be but he's discussed his method's many times as pointers throughout his topics.

I guess that's really not much help? :(

But I'm with you---I hope this does bring on more themers! Myself, if I felt well, I'd love to attempt doing a Pinstripe for the Mozilla Suite. This way we'd have T-Bird, Firefox, and the Suite covered for Pinstripe---at least in Windows anyway. But hélas, I just can't do it, and the Suite is a major undertaking. :(

@Pikachu: Thank you very much for the honour of adding me to the list of contributors but I really didn't contribute anything you wouldn't have found out very quickly from any of the other themers here. ;)

Sorry cedsav... I didn't mean to hijack your thread...

Amicalement et Bonne Chance!

Eyes-Only
"L'Peau-Rouge"
http://eyesonly.no-ip.info/jimmymac/
--
"We never know just how much a kind word, or a gesture, will lift the spirits of a person in need and heal them." KDpup-484, LucidPup-511, SM2+/FX4+/TB31+
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

Eyes-Only wrote:Hi Autumnmist!


But I'm with you---I hope this does bring on more themers! Myself, if I felt well, I'd love to attempt doing a Pinstripe for the Mozilla Suite. This way we'd have T-Bird, Firefox, and the Suite covered for Pinstripe---at least in Windows anyway.

@Pikachu: Thank you very much for the honour of adding me to the list of contributors but I really didn't contribute anything you wouldn't have found out very quickly from any of the other themers here. ;)

Amicalement et Bonne Chance!

Eyes-Only
"L'Peau-Rouge"
http://eyesonly.no-ip.info/jimmymac/

Yeah you did, you fixed some bugs and help made my themes a sucess by telling me that a jar file shouln't go like this:
jarfile/theme/contents.rdf/browser,etc.. I'd love to port Pinstripe to Mozilla Suite, but i don't know a single thing about theming Mozilla Suite
pika9@ deviantART ~Home to the Winstripe Classic theme.
Pikachu90000's Firefox Theme Review Blog
User avatar
Beals
Posts: 652
Joined: November 29th, 2003, 8:25 pm
Contact:

Post by Beals »

I have a question. Does the "Configure Firefox for Live Theme Editing" make the browser less stable or vulnerable to corruption? I have tried doing this twice. Both times I was able to see my changes immediately, but I also had to create a new profile within 24 hours each time because something weird would happen. The first time, my options box was completely wiped out. I don't remember exactly what happened the second time, but it was something that only a new profile fixed. Should you immediately change your settings back to original after messing with this configuration, and if so, is there a way to make an extension that turns this configuration on or off?
Coat hanger halos don’t come cheap
From television shepherds with living room sheep
lucx
Posts: 102
Joined: February 22nd, 2003, 7:06 pm

Post by lucx »

Some perils of Live Theme Editing to watch out for: If the program is expecting a css file and can’t find it, the window or dialog that uses that css file will come up blank, sometimes. You can close the dialog, sometimes, but, other times, you have to force quit the program. It doesn’t happen every time, (ie. it's not predictable) but the problem will crop up consistently.

How to avoid this conundrum:
Don't remove the default css files.
If you use @import, make sure the file it points to is actually there.

Also, if you work directly out of the .jar file, the program, sometimes, locks it, and you have to quit and restart anyways.
cedsav
Posts: 3
Joined: January 10th, 2005, 10:03 am
Contact:

Post by cedsav »

I'm new at this, but so far I haven't seen any 'corruption' while editing the theme directly. I usually just change one or 2 css properties and check immediately the effect in Firefox. If somethings goes awry, undoing the last changes should be enough.

From what I read though, disabling the XUL cache and pointing to a folder (instead of a .jar file) slow down Firefox significantly. So you should revert the settings when you're done.

Eyes-Only: No problem... and I'd love to see more tutorials.

I would also agree that classic.jar is probably better to start with. I had some problem with it in the beginning, probably because it didn't have an install.rdf. But again, I didn't know what I was doing.
User avatar
aaron
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas
Contact:

Post by aaron »

I wouldn't reccommend the classic.jar modifications -- the default theme requires a different setup. It has a different folder structure and other info. I would suggest looking at the default and another theme to see the differences. If you want to make a theme that is installable by yourself and others, then you won't be able to use the folder structure of the default theme.....
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

Unless you change the ID code... in install.rdf
pika9@ deviantART ~Home to the Winstripe Classic theme.
Pikachu90000's Firefox Theme Review Blog
User avatar
Eyes-Only
Posts: 1354
Joined: May 18th, 2003, 9:59 am
Location: La Confédération Abènaquaise

Post by Eyes-Only »

Huh Aaron? I thought for sure that was you who recommended that procedure! *Eyes-Only slaps forehead* Then if you didn't who did? I thought for sure it was you because seems so it was a famous, active, theme producer but I don't think it was Lynchknot. Well... Now I'm embarrassed and I sit in my chair corrected. LOL! But thanks for setting the record straight!

Oh man... and to think of all the people I've told privately this... :(

@Beals: Yes, I myself would recommend that if using live edit to always work from a new profile so as not to mess up your current profile. But myself, I'm not a Mozilla Products themer, just a "retired" former K-Meleon themer/Dev.

Amicalement,

Eyes-Only
"L'Peau-Rouge"
http://eyesonly.no-ip.info/jimmymac/
--
"We never know just how much a kind word, or a gesture, will lift the spirits of a person in need and heal them." KDpup-484, LucidPup-511, SM2+/FX4+/TB31+
Pikachu90000
Posts: 549
Joined: November 29th, 2004, 9:53 pm

Post by Pikachu90000 »

Well you are still active on the fourms
pika9@ deviantART ~Home to the Winstripe Classic theme.
Pikachu90000's Firefox Theme Review Blog
archer7
Posts: 2
Joined: July 23rd, 2005, 4:11 am

Post by archer7 »

cedsav, you said you couldn't find an "install.rdf" file. I'm new too, how did you find it? I'm a little stuck.
Post Reply