Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

Search

Technologies References & Guides Feedback Sign in

Getting Started

The folder containing Seamonkey is called folder_with_seamonkey in this manual.

Extract Theme

While you can hypothetically begin with any theme already designed for
Seamonkey 2, for the sake of consistency we'll speak as though everyone is
editing Classic (default Seamonkey theme). This is located in the file
classic.jar found in the Seamonkey 2 installation directory. A .jar file is in
reality a renamed zip archive. Opening the .jar files in your archive manager of
choice should result in the file being automatically detected as being a zip archive.
However, if your application doesn't detect classic.jar as a standard zip
archive, rename the file classic.zip and continue extraction.

Classic.jar locations

Linux: folder_with_seamonkey/chrome/classic.jar

Windows: folder_with_seamonkey\chrome\classic.jar

For Mac OS X: folder_with_seamonkey/chrome/classic.jar

1 of 7 18/09/19 10:06
Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

Copy classic.jar to another easily accessible folder -- Classic is

recommended -- extract the contents of that folder, being sure to maintain the
directory structure.

Directories

Inside classic.jar is one directory, skin .

skin
skin simply contains another directory, classic which holds all the good
stuff.

skin\classic
classic contains the following directories.

skin\classic\communicator
communicator contains all the toolbar icons, as well as the icons for the
bookmark manager and the preferences window.

skin\classic\editor
editor contains files of Composer.

skin\classic\global
global contains almost all of the important CSS files that define the
appearance of the suite. This is the most critical directory in a theme.

skin\classic\help
help contains all the files for theming the help dialog window.

skin\classic\messenger
messenger contains styles of the mail client.

skin\classic\messenger-newsblog
messenger-newsblog contains the only CSS file.

2 of 7 18/09/19 10:06
Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

skin\classic\mozapps
mozapps contains all the styles and icons for the browser peripherals, such as
the extension manager or update wizard.

skin\classic\navigator
navigator contains some icons and styles for all SM components.

Install Your New Theme

Before you can see the changes you make to a SeaMonkey theme (since live edits
are restrictively difficult to set up) you must first learn how to repackage the classic
theme to make it installable. For the sake of this discussion we will call your theme
"My_Theme", though you can replace that with any name.

Copying The Necessary Files

The first step is to move all the files into the right directory structure. So create a
new directory called My_Theme . Create a directory called chrome inside it. Into
this directory put a ZIP archive called My_Theme.jar containing navigator ,
global , communicator , editor, help , messenger, messenger-newsblog and
mozapps directories from above. (Yes, this means that the structure of your new
directory and classic.jar will be slightly different.)

Creating the Install Files

Icon.png and preview.png

These are some PNG images containing the icon and the preview of the theme.

Chrome.manifest

Make a copy of chrome.manifest and place it in \My_Theme and open it up in your

text editor. This file is a small manifest file which is used to describe the skin.

In the code search for all instances of "My_Theme" and replace them with the
name of your theme.

3 of 7 18/09/19 10:06
Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

The packages section lists which components of the browser you're modifying. If
we also had skins for Chatzilla, we would need to add another line resembling the
other ones and change it to point to Chatzilla. But this list includes everything that
we changed, so just modify the blue text to point to match the name/version that
you used in the sections before this.

1 skin global My_Theme jar:chrome/My_Theme.jar!/global/

2 skin mozapps My_Theme jar:chrome/My_Theme.jar!/mozapps/
3 skin messenger My_Theme jar:chrome/My_Theme.jar!/messenger/
4 skin messenger-newsblog My_Theme jar:chrome/My_Theme.jar!/messenger-newsblog/
5 skin communicator My_Theme jar:chrome/My_Theme.jar!/communicator/
6 skin help My_Theme jar:chrome/My_Theme.jar!/help/
7 skin navigator My_Theme jar:chrome/My_Theme.jar!/navigator/
8 skin editor My_Theme jar:chrome/My_Theme.jar!/editor/

Save the file and exit the text editor.

install.rdf

Make a copy of install.rdf and place it in the My_Theme directory, then open it up
in your text editor. This file is a small XML database that describes the skin.

1 <Description about="urn:mozilla:install-manifest">
2 <em:id>{Themes_UUID}</em:id>
3 <em:version>Themes_Version</em:version>

The first section requires that you establish a UUID for your theme and that you
give your theme a version number. Once you've done this, insert the information as
above, and scroll down.

You will also have to update the minimum and maximum compatible versions for
the target application (SeaMonkey) in the following section:

4 of 7 18/09/19 10:06
Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

1 <em:targetApplication>
2 <Description>
3 <!-- SeaMonkey's UUID -->
4 <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id>
5 <em:minVersion>Min_SM_Version</em:minVersion>
6 <em:maxVersion>Max_SM_Version</em:maxVersion>
7 </Description>
8 </em:targetApplication>

Establishing both minimum and maximum compatible versions lets you avoid
conflicts with versions of SeaMonkey your theme wasn't designed for -- or wasn't
tested on.

See Install Manifests for the reference information about the install.rdf file.

CSS Files

The CSS files in these directories tell the browser how to display the buttons and
other controls, where to put the images, what border and padding it should put
around them, and so on.

As an example, let's change the standard button.

Go into the global directory and open button.css in your favorite text editor.
Scroll down to button { . This section defines the normal button in its basic state
(There is no mouse over it, it's not disabled, and it's not selected).

Change the background-color: to DarkBlue and the color: to White ,

and save the file.

more after I get done with some tests

Repackaging JAR

5 of 7 18/09/19 10:06
Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

Now all you need to do is repackage a JAR file with the following directory
structure, using your favorite archive manager to create a zip archive:

1 /chrome/My_Theme.jar!/communicator/*
2 /chrome/My_Theme.jar!/editor/*
3 /chrome/My_Theme.jar!/global/*
4 /chrome/My_Theme.jar!/help/*
5 /chrome/My_Theme.jar!/messenger/*
6 /chrome/My_Theme.jar!/messenger-newsblog/*
7 /chrome/My_Theme.jar!/mozapps/*
8 /chrome/My_Theme.jar!/navigator/*
9 /chrome.manifest
10 /install.rdf
11 /icon.png
12 /preview.png

Make sure not to just zip up the My_Theme parent directory since that will cause
the drag and drop install in the next section to fail without error messages. Once
you have put the files in the zip folder, rename it to myskin.jar

Triggering the install from the web

To install the theme's JAR file directly from the web, you need to run some
JavaScript.

1 <a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
2 "myskin.jar", "My Skin Theme")'>install My Skin</a>

If you have JAR files on your hard drive and would like to install them, then
download/use this form.

You can also just open the themes window in Mozilla and drag and drop your .jar
file onto it.

6 of 7 18/09/19 10:06
Getting Started - Archive of obsolete content | MDN https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Crea...

Now to change your folder(s) back into a .jar Well it's easy! What you do is put your
folder(s) into a .zip file and then when it's compressed make the .zip into a .jar

7 of 7 18/09/19 10:06