Theme_erstellen/Einführung

Laden Sie die neueste Version von Firefox herunter und installieren Sie diese. Stellen Sie sicher, dass Sie auch den DOM Inspector installieren.

Theme entpacken

Theoretisch kann man jedes bereits für Firefox erstellte Theme als Grundlage verwenden, der Einheitlichkeit halber wird in diesem Beipiel das Standard Firefox Theme "Winstripe" verwendet. Dieses befindet sich in der Datei classic.jar, die im Firefox Installationsverzeichnis zu finden ist. Eine JAR-Datei ist in Wirklichkeit ein umbenanntes ZIP-Archiv. Wenn JAR-Dateien in einem Archivierungstool geöffnet werden, sollte es automatisch als solches erkannt werden. Falls Ihr Programm classic.jar nicht als ZIP-Archiv erkennen sollte, benennen Sie die Datei einfach in classic.zip um und fahren mit dem Entpacken fort.

Standard classic.jar Verzeichnisse

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar oder /usr/lib/firefox-*.*.*/chrome/classic.jar

Windows: \Programme\Mozilla Firefox\chrome\classic.jar

Mac OS X:

• Gehen Sie zum Anwendungsordner
• Führen Sie einen Control-Klick auf das Anwendungsicon (Firefox Icon) aus und wählen Sie Paketinhalte anzeigen.
• Gehen Sie zu contents/MacOS/Chrome/classic.jar

Kopieren Sie classic.jar in ein anderes, einfach zu erreichendes Verzeichnis - Classic wird empfohlen - und entpacken Sie die Inhalte der Datei in diesen Ordner. Achten Sie dabei darauf, dass die Ordnerstruktur beibehalten wird.

Verzeichnisse

Innerhalb classic.jar gibt es einen Ordner skin, sowie zwei Dateien, preview.png und icon.png.

skin

skin enthält ausschließlich den Ordner classic

skin/classic

classic enthält die folgenden Verzeichnisse:

skin/classic/browser

browser enthält alle Symbolleisten Icons sowie die Icons des Lesezeichen-Managers und des Einstellungen-Fensters.

skin/classic/communicator

Macht nicht allzu viel und kann deshalb normalerweise außen vor gelassen werden.

skin/classic/global

global enthält fast alle wichtigen CSS-Dateien, die die Darstellung des Browsers definieren. Dieser Ordner stellt den wichtigsten Bereich bei der Erstellung eines Themes dar.

skin/classic/help

help enthält alle Dateien zur Darstellung des Hilfe-Dialogs.

skin/classic/mozapps

mozapps enthält alle Styles und Icons der Dialoge innerhalb des Browsers, wie z. B. für die Add-ons und den Update-Assistenten.

Installation des neuen Themes

Bevor Sie die Änderungen sehen können, die Sie an einem Firefox Theme gemacht haben, müssen Sie zunächst verstehen, wie man das classic Theme wieder packt, um es installierbar zu machen. Zur Einfachheit nennen wir das Theme einfach "My_Theme". Sie können ihm jedoch einen beliebigen Namen geben.

Kopieren der erforderlichen Dateien

Im ersten Schritt werden alle Dateien in die richtige Verzeichnisstruktur verschoben. Erstellen Sie hierzu einen neuen Ordner My_Theme. In dieses Verzeichnis verschieben Sie anschließend die Ordner browser, global, communicator, help und mozapps aus dem classic Theme von Firefox zusammen mit den Dateien icon.png und preview. Die Struktur von "My_Theme" und classic.jar unterscheidet sich dabei leicht.

Erstellen der Installationsdateien

contents.rdf

Machen Sie eine Kopie von contents.rdf und platzieren Sie die Datei innerhalb von \My_Theme. Diese Datei stellt eine XML-Datei dar, die zur Beschreibung des Skins verwendet wird.

Öffnen Sie die Datei in einem Texteditor. Ersetzen Sie alle Vorkommen von "My_Theme" innerhalb des Codes durch den Namen ihres Themes.

Der "packages"-Bereich listet die Komponenten des Browsers auf, die verändert werden. Falls wir zusätzliche Skins für Chatzilla hätten, müssten wir eine weitere Zeile hinzufügen ähnlich den anderen und sie so verändern, dass die auf Chatzilla verweist.

<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:editor"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>

Speichern Sie die Datei und beenden Sie den Texteditor.

install.rdf

Erstellen Sie eine Kopie von install.rdf und platzieren Sie die Datei innerhalb von \My_Theme. Diese Datei stellt eine XML-Datei dar, die zur Beschreibung des Skins verwendet wird.

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

Die erste Sektion benötigt eine UUID und eine Versionsnummer für ihr Theme.

Sie müssen zudem die Minimal- und Maximalversion von Firefox angeben, zu der ihr Theme kompatibel ist:

  <em:targetApplication>
    <Description>
      <!-- Firefox's UUID -->
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>Min_FF_Version</em:minVersion>
      <em:maxVersion>Max_FF_Version</em:maxVersion>
    </Description>
  </em:targetApplication>

Die Angabe der Minimal- und Maximalversion vermeidet Konflikte mit Versionen von Firefox, für die Ihr Theme nicht erstellt wurde - oder nicht getestet wurde.

CSS-Dateien

Die CSS-Dateien in den Verzeichnissen beschreiben dem Browser, wie er Buttons und andere Kontrollelemente darstellen soll, wo Bilder angezeigt werden sollen, welche Ränder und Abstände er um sie legen soll usw.

Als Beispiel ändern wir den Standard Button.

Wechseln sie in das global Verzeichnis und öffnen sie die Datei button.css in einem Texteditor. Scrollen Sie bis zu der Zeile mit button. Dieser Style definiert die Darstellung des Stardard Buttons in seinem Ausgangszustand (ohne Mouse-Over-Effekt, der Button ist nicht deaktiviert und nicht ausgewählt).

Ändern Sie background-color: zu DarkBlue und color: zu White und speichern die Datei ab.

Wieder zu JAR-Datei packen

Alles was Sie jetzt noch tun müssen, ist die folgende Verzeichnisstruktur wieder in eine JAR-Datei zu packen:

/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png

Stellen Sie sicher, dass Sie nicht nur das Hauptverzeichnis My_Theme packen, sonst schlägt die Drag & Drop Installation fehl.

Installation aus einer Webseite heraus

Um das Theme direkt aus dem Internet zu installieren, müssen Sie JavaScript bemühen:

 <a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
  "myskin.jar", "Meinen Skin installieren")'>Meinen Skin installieren</a>

Installation von der Festplatte

Wenn Sie JAR-Dateien mit Themes auf Ihrer Festplatte haben und installieren wollen, benutzen Sie dieses Formular.

Sie können auf einfach die JAR-Datei per Drag & Drop in den Themes-Dialog innerhalb Firefox ziehen.