Creating a Skin for Firefox/Getting Started

  • Revision slug: Creating_a_Skin_for_Firefox//Getting_Started
  • Revision title: Creating a Skin for Firefox/Getting Started
  • Revision id: 97022
  • Created:
  • Creator: Aconbere
  • Is current revision? No
  • Comment /* CSS Files */

Revision Content

Setup

Download the latest version of Firefox, install it (Install the DOM Inspector as well).

Extract the Theme

While you can hypotheticaly begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing Winstripe (the default firefox theme). This is located in the file "classic.jar" found in the firefox instalation directory. A .jar file is in reality a renamed zip and most zip and you can open them up in your zip program the same way you open up zip files. However if you zip aplication doesn't think it's of the right format, you can simply rename the file "classic.zip" and continue extraction.

Classic.jar locations

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar

Windows: <probably program files somewhere>

Mac OS X: I have no idea

Copy classic.jar to another easily accessible folder, Classic, is recommended, and extract the contents of that folder, maintaining directory structure.

Directories

Inside Classic.jar you will find 4 main directories

browser

Browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.

global

Global contains almost all of the important css files that define the apearance of the browser. This is the most critical directory in a theme.

mozapps

Mozapps contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.

communicator

Doesn't do a whole lot and can typicaly be forgotten about promptly.

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, etc. For this next part, let's modify the standard button.

Go into \global\ and open button.css in your favourite 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.

Revision Source

<h3 name="Setup"> Setup </h3>
<p>Download the latest version of Firefox, install it (Install the DOM Inspector as well).
</p>
<h4 name="Extract_the_Theme"> Extract the Theme </h4>
<p>While you can hypotheticaly begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing Winstripe (the default firefox theme).  This is located in the file "classic.jar" found in the firefox instalation directory.  A .jar file is in reality a renamed zip and most zip and you can open them up in your zip program the same way you open up zip files.  However if you zip aplication doesn't think it's of the right format, you can simply rename the file "classic.zip" and continue extraction.
</p>
<h5 name="Classic.jar_locations"> Classic.jar locations </h5>
<p>Linux: /usr/lib/MozillaFirefox/chrome/classic.jar
</p><p>Windows: &lt;probably program files somewhere&gt;
</p><p>Mac OS X: I have no idea
</p><p>Copy classic.jar to another easily accessible folder, Classic, is recommended, and extract the contents of that folder, maintaining directory structure.
</p>
<h4 name="Directories"> Directories </h4>
<p>Inside Classic.jar you will find 4 main directories
</p>
<h6 name="browser"> browser </h6>
<p>Browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
</p>
<h6 name="global"> global </h6>
<p>Global contains almost all of the important css files that define the apearance of the browser.  This is the most critical directory in a theme.
</p>
<h6 name="mozapps"> mozapps </h6>
<p>Mozapps contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.
</p>
<h6 name="communicator"> communicator </h6>
<p>Doesn't do a whole lot and can typicaly be forgotten about promptly.
</p>
<h4 name="CSS_Files"> CSS Files </h4>
<p>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, etc. For this next part, let's modify the standard button.
</p><p>Go into <code>\global\</code> and open <code>button.css</code> in your favourite text editor. Scroll down to <code>button {</code>. 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).
</p><p>Change the <code>background-color:</code> to <code>DarkBlue</code> and the <code>color:</code> to <code>White</code>, and save the file.
</p>
Revert to this revision