Matos necessaire :
- Firefox de préférence une version stable et avec l'outil Inspecteur DOM installé ( non intégré de base, il est a coché dans avancé lors de l'installation de Firefox ! )
- un éditeur de texte, perso je utilise Notepad++ léger, et très sympa car colore le code en fonction du langage de programmation.
- de la créativité, un logiciel de création d'images ( Pour ceux qui n'ont pas la chance d'avoir Photoshop , il existe l'excellent The Gimp , gratuit et Open source !
- Un logiciel d'archivage pouvant compresser en .jar, perso j'utilise ALzip j'en suis très content
- Une bonne maîtrise du langage CSS ( Feuille de Style en cascade ou Cascading Style Sheet ) pour apprendre ou améliorer ses connaissances, rien de mieux que l'excellent Site du zéro
- une compréhension de l'anglais est plutôt utile !
-
Pour commencer vous aller aller dans le répertoire où vous avez installé Firefox, par defaut : C:\Program Files\Mozilla Firefox. Ensuite ouvez le dossier Chrome fichier puis désarchiver l'archive .jar. Enfin ouvrez le fichier que vous venez de désarchiver.
Vous avez maintenant devant vous le thème par défaut de firefox. Il sera la base de votre travail !
Maintenant il faut créer le dossier du thème, appelons le Infomars ( on se demande pourquoi ), vous collerez dans le dossier
les images icons.png et preview.png du thème classic , ainsi que les dossiers browser, communicator, global, help et mozapps. ( il se trouve 2 dossier plus loin C:\Program Files\Mozilla Firefox\chrome\classic\skin Ce que vous avez devant vous représente 99% du thème il manque juste 2 fichiers nécessaires l'un pour l'installation il contient les infos nécessaire sur le thème ( install.rdf ) l'autre pour montrer a Firefox de quoi est fait le theme ( content.rdf) !
Vous allez devoir les créer vous même mais je suis gentil, je vais vous y aider 8)
Install.rdf: comme vous pouvez le voir c'est du XML, mais pas besoin de le comprendre, il suffit juste de pas être neuneu
Tout ce qui sera en italique sera à modifier !
<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>{GUID a obtenir }</em> Vous pouvez en obtenir un ici
<em:version>Version de votre thème</em>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em> Ceci est le GUID de firefox a ne pas modifié !
<em:minVersion>2.0</em> version minimal suportant votre theme
<em:maxVersion>2.0.0.*</em> version maximal suportant votre theme
</Description>
</em>
<em:name>Le nom de votre theme </em>
<em:description>un description en 3-5 mots</em>
<em:creator>son créateur</em>
<em:contributor>Le ou les contributeurs</em>
<em:homepageURL>la page web du theme ou celle du createur </em>
<em:internalName>le nom interne du theme en 1 mot/abréviation</em>
</Description>
</RDF>
voila copiez cela dans un éditeur de texte, en prenant bien soin de modifier ce qui est en italique; ce qui est en gras est une aide , elle peut être suprimée si besoin. Sauvegardez le tout sous install.rdf !
Vient ensuite le content.rdf : toujours du XML et toujours pas besoin de connaître le XML , il faut toujours pas être neuneu non plus
<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:PCIW" />
</RDF>
<!-- classic Information -->
<RDF:Description about="urn:mozilla:skin:le nom interne du theme donner dans le install.rdf" Ceci est le nom qui apparaitra dans Firefox
chrome:displayName="[i]Le nom complet[/i]"
chrome:author="L'auteur"
chrome:authorURL="Le site de l'auteur"
chrome:description="La descritption du theme "
chrome:name="[i]Nom semi abrégé du theme[/i]"
chrome:image="preview.png"> Preview du theme qui apparait dans la fenetre des modules suplémentaires de Firefox
<chrome:packages>
<RDF:Seq about="urn:mozilla:skin:Nom interne du theme:packages">
<RDF:li resource="urn:mozilla:skin:Nom interne du theme:browser"/>
<RDF:li resource="urn:mozilla:skin:Nom interne du theme:communicator"/>
<RDF:li resource="urn:mozilla:skin:Nom interne du theme:help"/>
<RDF:li resource="urn:mozilla:skin:Nom interne du theme:global"/>
<RDF:li resource="urn:mozilla:skin:Nom interne du theme:mozapps"/>
<RDF:li resource="urn:mozilla:skin:Nom interne du theme:reporter"/>
</RDF>
</chrome>
</RDF>
</RDF>
voila vous avez un thème capable de fonctionner ( une fois archiver en .jar )
Ouvrez maintenant le dossier Browser par exemple, et que voyez-vous ? Des Images et des fichier CSS. Eh oui, un thème firefox n'est fait ( hors les deux .rdf ) que d'images et de feuilles de style. Cela en rend la programmation plus facile que si c'etait d'autres languages plus difficiles
C'est à partir de maintenant que l'Inspecteur DOM, installé préalablement avec Firefox, va nous servir.
Ouvrez le avec Ctrl+maj+i ou via Outil -> Inspecteur DOM
C'est outil est extrêmement puissant et vachement utile
Il est fait de deux parties: à gauche, une racine et a droite, une fenêtre à usage multiple qui au choix permet d'afficher les noeuds DOM, des fichier CSS utilisés par l'objet sélectionné, des infos de positionnement de ce même objet et plein d'autres choses que je vous laisse découvrir par vous-même !
Je vais maintenant vous montrer comment l'utiliser :
Allez dans Fichier, Examiner une fenêtre et sélectionnez la page la page que vous êtes entrain de visionner ( xxxxx - Mozilla Firefox )
Vous devriez voir à gauche la racine changer !
Au lieu de la dérouler vous-même, et vous procurer un mal de crane pas possible pour déchiffrer ce qui va suivre , suivez la marche que je vais vous indiquer !
Dans la barre d'adresse du DOM , vous devez normalement avoir : chrome://browser/content/browser.xul ( ne chercher pas ce fichier vous ne le trouverez pas dans votre thème )
Sur la gauche, vous avez 2 boutons: vous allez cliquer sur celui le plus à gauche, il va vous permettre de sélectionner l'un des objets de l'interface du thème et le chercher le code correspondant !
Faites la manipulation par exemple avec le bouton Home
Et stupéfaction la racine s'ouvre et sélectionne un endroit précis ! (le cas échéant, refaites la manip précédente)
Si vous regardez bien : le DOM a ouvert la ligne Toolbox, la 2e toolbar, puis a sélectionné la ligne toolbarbutton ayant comme id Home-button ... ah bah tient , ne serait-ce pas le bouton que nous avons sélectionné auparavant ?
Eh bah si
Et si vous remontez 1 à 1 les ligne ouverte vous allez voir que DOM entoure d'un trait rouge l'objet à laquelle réfere la ligne , bien sympa non ?
Revenons à nos moutons, c'est a dire la création du thème ( qui l'aurez parié ? pas moi en tout cas )
Pour cela ouvrez ligne avec l'id Home-button et vous verrez un xul:image cela réfere à l'image du bouton home !
Ensuite dirigez vous sur la partie droite du DOM, via l'icône en haut à gauche de la fenêtre, selectionnez CSS Style Rules
Apparaitront les fichier CSS organisant l'objet précédement sélectionné, les 2 premiers seront dans tout les cas des .xul , vous faire comme si ils n'étaient pas la , ils ne vous serviront à rien !
Par exemple ( varie selon les thème ) j'ai moi 3 CSS qui apparaissent avec leur adresse browser/skin/xx.css signifie que le CSS se situe dans le dossier browser !
Pour le boutton home par exemple j'ai le CSS browser qui est utilisé a la ligne 412 soit #home-button
et voila vous savez comment modifier ce qui refere a ce boutton
Pour vous aider, je vais vous indiquer ci-dessous à quoi servent certains .css (et oui c'est plutot bien rangé)
Dans Browser.css est réglé l'interface générale par exemple ( entre autre )( je parle de celui dans le dossier browser )
preferences.css : le panneau des options
global.css : des globalités qui touchent souvent beaucoup de chose à la fois
extension.css : la fenêtre des modules sup
download.css : la fenêtre des téléchargements
comme vous le voyez, c'est plutot intuitif, l'entrainement par de multiples essais permet de gérer de mieux en mieux la création du thème !
Je pense avoir dit la plus grosse partie, apres si vous avez des questions , le reste du topic est là pour vous
Vous avez l'aurorisation de copier ce tutorial sur un autre site/forum si dans ce dernier apparait le nom de l'auteur et le site d'ou provient ce tutorial. Pour le respect envers l'auteur, merci.