Aqua-Soft Forums: [tutorial] Packaging Firefox Themes - Aqua-Soft Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

[tutorial] Packaging Firefox Themes Rate Topic: -----

#1 User is offline   Relativity_17 Icon

  • Group: Member
  • Posts: 293
  • Joined: 11-June 03

Posted 18 March 2004 - 11:31 PM

***Updated for Firefox v0.9***
Scroll down to the next long post...


Disclaimer: *removed* because it pisses people off...

Ok, so a lot of you are now making FireFox themes, and a lot of you are wondering "How the hell do I make this classic.jar file into an installable theme?"

Here's the method which I found to work well. You'll probably have a copy of Classic.jar laying around on your computer. UnJAR the file with WinRAR and lets see what you had in there. Looks like you have some directories, structurally similar to:

skin> classic > more folders.

Go ahead and make yourself a nice clean workspace, like a new folder. Now make a new text file.

Paste following code into a text file and rename it to Contents.rdf. Make sure you replace the *** *** entries with the appropriate information.

Beginning of code:


xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<!-- List all the skins being supplied by this theme -->



chrome:displayName="***THEME NAME***"
chrome:accessKey="S"
chrome:author="***AUTHOR***"
chrome:authorURL="***WEBSITE***"
chrome:description="***COMMENTS***"
chrome:name="***THEME NAME***"
chrome:image="preview.png">


browser"/>
communicator"/>
global"/>
mozapps"/>




<!-- Version Information. State that we work only with major version 1 of this package. -->
browser" chrome:skinVersion="1.5"/>
communicator" chrome:skinVersion="1.5"/>
global" chrome:skinVersion="1.5"/>
mozapps" chrome:skinVersion="1.5"/>


End of Code

Go into your theme folder (skin > browser >). Copy folders "global", "browser", "communicator", and "mozapps" into the folder with Contents.rdf in it. Make a new ZIP folder with the same name as your theme. Rename the ZIP to JAR and put your files in it.

Also note: If your theme has directories other than "global", "browser", "communicator", and "mozapps", you will need to edit the Contents.rdf file to reflect these directories. The places which need editing are marked in RED in the above code. You'd just need to add in an extra line of code for each directory.

Example:
Lets say I had a directory called Messenger which contained stuff used in the theme. I'd add a new line of code in the Contents.rdf file to reflect this:

<?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:PinstripeXP" />
  </RDF:Seq>
  <RDF:Description about="urn:mozilla:skin:PinstripeXP"
        chrome:displayName="PinstripeXP"
        chrome:accessKey="S"
        chrome:author=" "
        chrome:authorURL=" "
        chrome:description="Thanks to the original author of Pinstripe, and the AquaSoft people for porting it to Windows."
        chrome:name="PinstripeXP"
        chrome:image="preview.png">
    <chrome:packages>
      <RDF:Seq about="urn:mozilla:skin:PinstripeXP:packages">
        <RDF:li resource="urn:mozilla:skin:PinstripeXP:browser"/>
        <RDF:li resource="urn:mozilla:skin:PinstripeXP:communicator"/>
        <RDF:li resource="urn:mozilla:skin:PinstripeXP:global"/>
        <RDF:li resource="urn:mozilla:skin:PinstripeXP:mozapps"/>
        <RDF:li resource="urn:mozilla:skin:PinstripeXP:Messenger"/>
      </RDF:Seq>
    </chrome:packages>
  </RDF:Description>

  <!-- Version Information.  State that we work only with major version 1 of this package. -->
  <RDF:Description about="urn:mozilla:skin:PinstripeXP:browser"      chrome:skinVersion="1.5"/>
  <RDF:Description about="urn:mozilla:skin:PinstripeXP:communicator" chrome:skinVersion="1.5"/>
  <RDF:Description about="urn:mozilla:skin:PinstripeXP:global"       chrome:skinVersion="1.5"/>
  <RDF:Description about="urn:mozilla:skin:PinstripeXP:mozapps"      chrome:skinVersion="1.5"/>
  <RDF:Description about="urn:mozilla:skin:PinstripeXP:Messenger"  chrome:skinVersion="1.5"/>
</RDF:RDF>


There, I just had to add two lines of code for the Messenger directory. Note that in the above example, the details of the theme (such as the name) have been filled in.

To make preview: Take your image (default size is 355x85px), name it preview.png, and insert into your JAR.

The new JAR should be installable by the Themer extension or the form at Texturizer.net.

The screenshot included should show what ends up getting put into the final JAR. For the Pinstripe theme, I found that stuff inside the Editor, Messenger, and Navigator folders served no real purpose, so I deleted those folders before I packaged everything to reduce the filesize. You may find that those directories are redundant, and choose to delete them, but you don't have to.

Attached File(s)


0

#2 User is offline   Stevie BM Icon

  • Group: Member
  • Posts: 2,243
  • Joined: 04-May 03

Posted 19 March 2004 - 09:31 AM

Posts Removed, Topic Pinned, Topic Closed.
I think this'd be something worth keeping for skinners.
@Relativity_17: Let me know when you want to update this, and I'll unlock it.
-----------------------
Stevie BM

0

#3 User is offline   contrasutra Icon

  • Group: Member
  • Posts: 3,922
  • Joined: 29-November 02

Posted 20 March 2004 - 12:06 AM

I don't see why this thread should be closed. What if there's a mistake or question? They shouldn't have to start a new thread for that.

So if you want this closed, you better damn well start a flame war. :P (just kidding folks)
0

#4 User is offline   carbonfiber Icon

  • Group: Member
  • Posts: 1,711
  • Joined: 28-November 03

Posted 20 March 2004 - 12:15 AM

w007, flame war :D lol
0

#5 User is offline   Relativity_17 Icon

  • Group: Member
  • Posts: 293
  • Joined: 11-June 03

Posted 20 March 2004 - 02:44 AM

People could always PM me if they need help with anything...

*goes to clean out inbox*
0

#6 User is offline   Lord Zoltan Icon

  • Group: Member
  • Posts: 8
  • Joined: 21-December 03

Posted 29 May 2004 - 11:27 PM

Good :rock:
0

#7 User is offline   Relativity_17 Icon

  • Group: Member
  • Posts: 293
  • Joined: 11-June 03

Posted 06 June 2004 - 03:38 AM

Quick overview of changes:
- New elements need themes. These include the Extension Manager and Theme Manager.
- New icon allowed in skin directory.
- New file "install.rdf" should be created. Your theme should be assigned a unique ID number.

With the upcoming release of Firefox 0.9, you should all be aware of some changes with skins. Mainly, for older versions of skins, authors are strongly advised to add additional images to the new theme and extension managers. I'll do what I can here and write up a quick tutorial on how to package themes according to the new guidelines set forth by 0.9. Be assured however, that themes packaged according to these new standards will be backward compatible with older versions of Firefox. Now, lets get to it.

I will go on the assumption that you can figure out how to skin the new extension and theme manager by taking apart some of the updated themes and going by example. I used "Mostly Crystal" by CatThief as a template to update a skin.

In the first post up there, I gave instructions on how to create a contents.rdf file for your theme. If you don't already have one, then those instructions still work (yes, you do still need a contents.rdf file too).

To make a theme recognizable by FF0.9, we need to add an "install.rdf" file into the main directory of the JAR file. This is the basic structure of install.rdf, taken from Mostly Crystal, by CatThief:

Note that there is an additional image attached with all the pretty things you need to replace highlighted.

==========-Begin install.rdf-==========

<?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>{*UNIQUE THEME ID*}</em:id>
    <em:version>*COMPATIBLE VERSION OF FIREFOX*</em:version>
    
<!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --> 
   <em:targetApplication>
    <Description>
      <em:id>{*UNIQUE THEME ID*}</em:id>
      <em:minVersion>*MINIMUM COMPATIBLE VERSION OF FF*</em:minVersion>
      <em:maxVersion>*MAX COMPATIBLE VERSION OF FF*</em:maxVersion>
    </Description>
  </em:targetApplication>
    
    <!-- Front End MetaData -->
    <!-- *THEME NAME* -->
    <em:name>*THEME NAME*</em:name>
    <em:description>*THEME DESCRIPTION*</em:description>
    <em:creator>*CREATOR NAME*</em:creator>
    <em:contributor>*CONTRIBUTOR INFO*</em:contributor>
    <em:homepageURL>*THEME HOMEPAGE*</em:homepageURL>
    <!--em:updateURL-->*THEME URL FOR UPDATE*<!--/em:updateURL-->
    <!--em:aboutURL-->*URL FOR THEME INFO*<!--/em:aboutURL-->

    <!-- Front End Integration Hooks (used by Theme Manager)-->
    <em:internalName>*INTERNAL NAME OF THEME*</em:internalName>
  </Description>      
</RDF>

========-End install.rdf-========

To add the new file, unzip your JAR into a folder. You should end up with some more folders, like browser, mozapps, etc. Create a new text file and name it "install.rdf". Then copy the above template into it.

The first thing we'll tackle is the unique ID for each theme. Following this link: [ http://www.microsoft.com/downloads/details...&displaylang=en ], you can download a program to generate a unique ID for your theme. I'm guessing you use the last option (registry) when creating one... Now that that's taken care of, you can fill in the rest of the information, which should be self-explanatory on the template (information you must fill in is marked by **, also see accompanying picture). The INTERNAL NAME of the theme should be the same as the name you filled out in contents.rdf.

Surprise, there's more. You're also allowed to have a 32x32 PNG icon to go with your theme and make it look nice in the theme manager. See, there is a plus side.

Anyway, make a new folder, put all your stuff into it (Example of file structure: inside the new folder, you should have Browser, Global, Mozapps, etc...folders. And Preview.png, and icon.png, and contents.rdf, and install.rdf). Now inside your new folder, create a new compressed folder (it will have the extension *.zip). Rename the extension to *.jar, and dump all your files into it. Install your new theme (you can do this now by dragging the JAR onto the theme manager in Firefox and hitting Use Theme.

I'll be back later and see if I forgot anything... <_<

*Edit:
-More on theme packaging by Ben Goodger:
http://www.bengoodger.com/software/mb/exte...ing/themes.html

-0.9 compatable (more or less...) theme list here:
http://forums.mozill...pic.php?t=79513

*Edit 2: Boldified some important text. *sigh* The editing never ends...

Attached File(s)


0

#8 User is offline   Relativity_17 Icon

  • Group: Member
  • Posts: 293
  • Joined: 11-June 03

Posted 12 June 2004 - 11:27 PM

New Update:

Just got word of this:

-http://forums.mozillazine.org/viewtopic.php?t=84179
-http://bugzilla.mozilla.org/show_bug.cgi?id=240552
-http://forums.mozillazine.org/viewtopic.php?t=83886

- Quick summary:

A new feature is being implemented in Seamonkey (Mozilla), and Firefox, which maintains a trusted whitelist of theme and I'm guessing, extension installers. If your theme or extension is not being hosted on one of these trusted sites, the installer will be blocked.

There is the option to disable this feature if you wish:

Quote

To protect users from installing malicious code unintentionally, extensions and add-ons can now only be installed from trusted sites on a "whitelist". The whitelist can be altered by changing the xpinstall.whitelist.add preference. The feature can be disabled by setting xpinstall.whitelist.required to false.


If a mod would post an [update] in the title of this thread, or perhaps put this on front page news, as I think it will affect everyone who's made an independent theme and doesn't have it being hosted on a Mozilla site...

*Edit: added additional links.
0

#9 User is offline   juno Icon

  • Group: Member
  • Posts: 1,872
  • Joined: 01-August 03

Posted 16 June 2004 - 07:07 AM

Ok..I dont know if we are supposed to post in here but I have a problem.
It is with the pinstripe theme. I followed all your directions and tried to install it. A thing pops up that says "porting" or something like that and then goes away before I can see if it really does say porting.
Anyone have luck w/ pinstripe XP yet?
0

#10 User is offline   raxidian Icon

  • Group: Member
  • Posts: 69
  • Joined: 02-November 03

Posted 16 June 2004 - 08:29 AM

EDIT: Juno updated pinstripe for us in http://www.aqua-soft.org/board/index.php?s...pic=17141&st=30
0

#11 User is offline   Relativity_17 Icon

  • Group: Member
  • Posts: 293
  • Joined: 11-June 03

Posted 17 June 2004 - 10:43 PM

Juno, if you're still having trouble with your JAR, you can e-mail it to me at *my username* at yahoo . com, and I'll take a look at it.
0

#12 User is offline   sei-aidyn Icon

  • Group: Member
  • Posts: 239
  • Joined: 13-April 04

Posted 18 June 2004 - 01:18 AM

hmmm... can't seem to get this to work right with al's version of milk... i followed everything though i don't know where i might have gone wrong...
0

#13 User is offline   Relativity_17 Icon

  • Group: Member
  • Posts: 293
  • Joined: 11-June 03

Posted 18 June 2004 - 03:10 AM

Quote

hmmm... can't seem to get this to work right with al's version of milk... i followed everything though i don't know where i might have gone wrong...


Same goes, mail it over and I'll take a look.
0

#14 User is offline   sweetasman01 Icon

  • Group: Member
  • Posts: 1
  • Joined: 29-March 05

Posted 31 March 2005 - 07:35 AM

Or you could use this plgin to add firefox skins that are Jar files:

http://www.extension...p?showtopic=121

i have alot of mac skins for firefox, i evn found a way to make it have drag and drop tags like safair and also have little squres on each tag so you can close them one by one :cool:
0

#15 User is offline   Chazoul Icon

  • Group: Member
  • Posts: 644
  • Joined: 07-March 05

Posted 04 July 2005 - 09:06 AM

Great Thread :) Thanks Relativity
0

#16 User is offline   feelam Icon

  • Group: Member
  • Posts: 6
  • Joined: 13-August 07

Posted 13 August 2007 - 04:42 PM

good job
0

#17 User is offline   mikzmae Icon

  • Group: Member
  • Posts: 10
  • Joined: 23-April 09

Posted 23 April 2009 - 08:31 AM

I'm glad to have this post,we learn a lot thank you for the post we very need it. thank you!

many more people know more about that. Good Job....

Tutorial is good we can learned more in packaging Firefox its more interesting to know about that,its advantage to get know of it.

Tutorial is good we can learned more in packaging Firefox its more interesting to know about that,its advantage to get know of it.
0

#18 User is offline   jiang189 Icon

  • Group: Member
  • Posts: 1
  • Joined: 19-July 09

Posted 19 July 2009 - 09:14 PM

very good for Thread! :D
0

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic