Téléchargez la dernière version stable de Firefox, et installez-la. Assurez-vous d'installer également l'inspecteur DOM dans « Outils de développement ».
Extraction du thème
Même si vous pourriez potentiellement débuter avec n'importe quel thème déjà conçu pour Firefox, pour des raisons d'uniformité nous parlerons comme si tout le monde éditait Winstripe (le thème par défaut de Firefox). Ce thème est situé dans le fichier <tt>classic.jar</tt> qui se trouve dans le répertoire d'installation de Firefox. Un fichier .jar est en fait un fichier zip renommé. Vous devriez pouvoir l'ouvrir avec votre gestionnaire d'archives compressées habituel, comme si vous ouvriez n'importe quel autre fichier zip. Cependant, si votre application ne détecte pas automatiquement qu'il s'agit d'un fichier zip standard, vous pouvez simplement renommer le fichier en <tt>classic.zip</tt> et poursuivre son extraction.
Emplacement de classic.jar
Linux : /usr/lib/MozillaFirefox/chrome/classic.jar
Windows : \Program Files\Mozilla Firefox\chrome\classic.jar
Pour Mac OS X :
- Aller dans le répertoire de vos applications
- Faire un Ctrl-Clic sur l'icône de l'application (Icône Firefox), et choisir « Afficher le contenu » (Show Package Contents).
- Aller dans contents/MacOS/Chrome/classic.jar
Copier <tt>classic.jar</tt> vers un autre dossier facilement accessible (« Classic » est recommandé) et extraire le contenu de ce dossier, en faisant attention de conserver l'arborescence du répertoire.
Répertoires
À l'intérieur de <tt>classic.jar</tt>, vous trouverez un répertoire appelé <tt>skin</tt>, ainsi que deux fichiers, <tt>preview.png</tt> et <tt>icon.png</tt>.
- <tt>skin</tt>
- <tt>skin</tt> contient simplement un autre répertoire, <tt>classic</tt> qui contient tout le reste
- <tt>classic</tt>
- <tt>classic</tt> contient les sous-répertoires suivants.
- <tt>browser</tt>
- <tt>browser</tt> contient toutes les icônes de la barre d'outils, aussi bien que les icônes pour le gestionnaire de marque-pages et le panneau des préférences de Firefox.
- <tt>global</tt>
- <tt>global</tt> contient presque tous les fichiers CSS importants définissant l'apparence de votre navigateur Firefox. C'est le répertoire le plus critique dans un thème.
- <tt>mozapps</tt>
- <tt>mozapps</tt> contient tous les styles et les icônes pour les éléments périphériques du navigateur, comme le gestionnaire d'extensions ou les assistants de mises à jour.
- <tt>help</tt>
- <tt>help</tt> contient l'ensemble des fichiers pour habiller la fenêtre d'aide.
- <tt>communicator</tt>
- <tt>communicator</tt> n'est vraiment pas important et peut par conséquent être oublié aussi sec.
Installer votre nouveau thème
Avant de pouvoir voir les changements fait sur un thème Firefox (puisque les éditions en direct sont difficiles à mettre en œuvre), il est nécessaire d'apprendre à « réempaqueter » le thème classic pour le rendre installable. Au cours de cette explication, nous appellerons votre thème « Mon_thème », bien que vous puissiez choisir n'importe quel autre nom.
Copie des fichiers nécessaires
La première étape est de déplacer l'ensemble des fichiers dans la bonne arborescence. Créez donc un nouveau répertoire que vous appellerez du nom de votre thème (ici <tt>Mon_thème</tt>). Dans ce répertoire, placez les sous-répertoires <tt>browser</tt>, <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt> et <tt>mozapps</tt>, ainsi que les fichiers <tt>icon.png</tt> et <tt>preview.png</tt>. (Cela signifie que la structure de votre nouveau répertoire et de <tt>classic.jar</tt> sera légèrement différente.)
Création des fichiers d'installations
Contents.rdf
Faites une copie du fichier contents.rdf et placez-la dans \Mon_thème. Ouvrez-la dans votre éditeur de texte favori. Ce fichier est une petite base de données XML utilisée pour décrire le thème.
Dans le code, toutes les occurences de (Mon_thème) sont à remplacer par votre nom de thème.
La sections appelé packages liste les composants du navigateur que vous allez modifier. Si nous avions également des thèmes pour ChatZilla, il faudrait ajouter une ligne semblable pointant vers ChatZilla. Mais cette liste comprend tout ce que nous avons changé, modifiez donc simplement le texte bleu pour qu'il pointe vers le nom et la version utilisés dans les sections précédentes.
<RDF:li resource="urn:mozilla:skin:Mon_thème:communicator"/> <RDF:li resource="urn:mozilla:skin:Mon_thème:editor"/> <RDF:li resource="urn:mozilla:skin:Mon_thème:global"/> <RDF:li resource="urn:mozilla:skin:Mon_thème:messenger"/> <RDF:li resource="urn:mozilla:skin:Mon_thème:navigator"/>
Enregistrez votre fichier et quittez l'éditeur.
Install.rdf
Faites une copie du install.rdf et placez-la dans \Mon_thème. Ouvrez-la dans votre éditeur de texte favori. Ce fichier est une petite base de données XML utilisée pour décrire le thème.
<Description about="urn:mozilla:install-manifest">
{UUID_du_thème}
Version_du_thème
La première section nécessite d'établir un identifiant UUID pour votre thème et de lui donner un numéro de version. Une fois que c'est fait, ajoutez ces informations comme ci-dessus et poursuivez votre lecture.
Vous devrez également mettre à jour les versions compatibles minimum et maximum pour l'application cible (Firefox) dans la section suivante :
<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>
L'établissement de versions compatibles minimum et maximum vous permet d'éviter les conflits avec des versions de Firefox pour lesquelles votre thème n'a pas été conçu, ou sur lesquelles il n'a pas été testé.
Consultez Manifestes d'installation pour des informations de référence concernant le fichier <tt>install.rdf</tt>.
Feuilles de style CSS
Les fichiers CSS dans ces répertoires indiquent au navigateur comment afficher les boutons et d'autres contrôles, où mettre les images, quelle bordure et quel espacement faut-il autour d'eux, etc.
À titre d'exemple, modifions les boutons standards du thème.
Rendez-vous dans global/ et ouvrez le fichier button.css dans votre éditeur favori.
Descendez jusqu'à trouver la chaine « button { ». La section qui suit définit le bouton standard dans son état de base (c'est à dire que le pointeur de souris n'est pas dessus, et il n'est pas désactivé ni sélectionné).
Modifiez la valeur de l'attribut background-color: en « DarkBlue », la valeur de l'attribut color: en « White » et enregistrez le fichier.
<Plus de détails seront fournis après quelques tests>
Reconstruction du fichier JAR
À présent, tout ce qui reste à faire est de reconstruire un fichier JAR à l'aide de votre gestionnaire d'archives favori avec la structure de répertoires suivante :
/browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /preview.png
Assurez-vous de ne pas simplement zipper le répertoire parent <tt>Mon_thème</tt>, car cela causerait l'échec de l'installation par glisser-déposer décrite dans la section suivante sans le moindre message d'erreur.
Déclenchement de l'installation depuis le Web
Pour installer l'archive JAR de votre thème directement depuis le Web, il sera nécessaire d'exécuter le JavaScript suivant :
<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, "montheme.jar", "Mon thème")'>Installer mon thème</a>
Si vous avez des fichiers JAR sur votre disque dur et que vous désirez les installer, vous pouvez aussi télécharger/utiliser ce formulaire.
Vous pouvez aussi simplement ouvrir la fenêtre des thèmes de l'application et glisser-déposer votre fichier .jar à l'intérieur.
Vous vous demandez comment refaire un .jar de votre dossier. Ce n'est pas compliqué, ce qu'il suffit de faire est de placer le dossier dans un fichier .zip, et une fois qu'il est compressé renommez-le en un fichier .jar.