Aller au contenu


[Tuto] Creation de Theme pour Firefox


  • Vous ne pouvez pas répondre à ce sujet
14 replies to this topic

#1 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 01 mai 2007 - 07:35

A la demande de Noisette, je crée un tuto pour la creation de theme pour firefox. Et comme j'aime bien partager mon savoir, j'ai accepté 8.gif


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 chinois.gif
- 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 dd.gif ), 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 chinois.gif
Tout ce qui sera en italique sera à modifier !

CITATION
<?xml version="1.0"?>

<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 yes.gif


CITATION
<?xml version="1.0"?>

<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 yes.gif

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 ga.png

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 clindoeil.gif )
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 biggrin.gif
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 roll.gif )
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 chinois.gif

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 chinois.gif






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.

#2 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 01 mai 2007 - 07:35

réservé

#3 Kyro

Kyro

    Serious Admin

  • Administrateur
  • PipPipPipPipPipPipPipPipPip
  • 8 410 Messages :
  • Gender:Male
  • Location:Grenoble

Posté 01 mai 2007 - 07:36

réservé

#4 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 04 novembre 2007 - 13:25

J'aurais besoin d'un petit renseignement : serait-il possible d'avoir les chemins pour les distrib Linux ? (par exemple pour les dossiers des images)

merci.gif



transpi.gif

#5 testskin

testskin

    Marsonaute

  • Zimien
  • PipPip
  • 4 Messages :

Posté 16 mars 2011 - 14:50

bonjour,

Merci pour ce tuto assez simple a suivre. Par contre j ai tout suivi et lors de l'install du thème créé Firefox me renvoi une erreur :

Firefox n'a pas pu installer le fichier situé à
file:///D:/je vous evite le chemin complet/pubdetourne.jar
raison : Script d'installation non trouvé
-204

il est pourtant bien dans l'archive .jar (reconstruite avec alzip).

J ai suivi a la lettre le tuto obtenu un GUID, et en mettant mon propre nom de fichier pour les chemins a modifier etc. je ne comprend pas pourriez vous m'apporter une aide svp ?

Ma version de Firefox est la 3.6.15 et l inspecteur DOM installé et fonctionnel, j ai pu faire les manip décrite dans le tutos.

Merci par avance pour vos infos.

#6 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 16 mars 2011 - 17:03

Bonjour,

réponse à prendre avec des pincettes:

Note : Si votre extension utilise toujours un script Install.js plutôt qu'un manifeste d'installation, il vous faudra faire la transition vers un manifeste d'installation maintenant. Firefox 3 ne gère plus les scripts install.js dans les fichiers XPI.


Sources: https://developer.mo..._pour_Firefox_3

Je crains qu'il ne faille vous pencher sur ces nouvelles procédures arrivées avec ff3.

#7 testskin

testskin

    Marsonaute

  • Zimien
  • PipPip
  • 4 Messages :

Posté 17 mars 2011 - 18:19

Bonjour

Merci pour cette réponse, je me doutais d'un truc dans ce genre car en épluchant les différents thème trouvé sur le net j'ai constaté une nouvelle hiérarchie des dossiers et un install.manifest qui n'était pas présent avant.

j'ai modifié mon install.rtf mais j'obtiens une nouvelle erreur :stress:

Impossible d'installer (null) 3.*, car il/elle n'est pas compatible avec Firefox 3.6.15.

le 1.0 fait référence a la version de mon thème pourtant, je ne vois pas pourquoi il ne l'accepte pas.

#8 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 17 mars 2011 - 18:31

Bonjour

Merci pour cette réponse, je me doutais d'un truc dans ce genre car en épluchant les différents thème trouvé sur le net j'ai constaté une nouvelle hiérarchie des dossiers et un install.manifest qui n'était pas présent avant.

j'ai modifié mon install.rtf mais j'obtiens une nouvelle erreur :stress:

Impossible d'installer (null) 3.*, car il/elle n'est pas compatible avec Firefox 3.6.15.

le 1.0 fait référence a la version de mon thème pourtant, je ne vois pas pourquoi il ne l'accepte pas.


J'avoue être totalement inexpérimenté sur ce point,

je vais tâcher de vous aider, car parfois, on passe à côté d'un truc qu'un autre voit,
mais ne vous attendez pas à un miracle de ma part.

Je n'ai pas bien compris l'erreur qui est renvoyée, ni quand elle l'est, mais quand je vois
3.* et 3.6.15 sur la même ligne, j'espère que c'est lié. :transpi:
Vous avez mis un paramètre dans <em:maxVersion>3.0.*</em:maxVersion> ?

#9 testskin

testskin

    Marsonaute

  • Zimien
  • PipPip
  • 4 Messages :

Posté 17 mars 2011 - 20:22

Bon j'ai enfin réussi à installer le .Jar

Il fallait modifier certaines ligne de l install.rdf cela venais de la façon dont je déclarais la version de mon thème et d'autres infos que je déclarais pas comme il le fallait.

Par contre un autre problème me coince, à force de chercher /tester je vais trouver, mais si vous avez une idée je suis preneur.

J'ai utilisé le Classic.Jar qui est dans le dossier chrome (le thème par défaut je crois.

Mais ensuite je ne trouve pas les fichier image qui constitue les boutons, en utilisant l'inspecteur DOM j'obtiens le chemin
chrome://browser/skin/browser.css hors dans mes dossiers de l archive Jar je n'ai pas le dossier "Skin" du coup je ne trouve pas le css qui correspond à l'image que je souhaite modifier donc je ne trouve pas son chemin donc je trouve pas le ficher image en question ^^.

L'inspecteur DOM ne fonctionne qu'avec les thème installé ? n y à t il pas de possibilité de tester le thème à ca racine ?

Ce message a été modifié par testskin - 17 mars 2011 - 20:28 .


#10 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 17 mars 2011 - 20:51

Sous Seven:

"C:\Program Files (x86)\Mozilla Firefox\chrome"

tu trouves dans ce dossier le fichier "browser.jar"
tu le décompresses, dedans il y a un dossier "content" qui lui-même contient ce que tu cherches je pense ;)

#11 testskin

testskin

    Marsonaute

  • Zimien
  • PipPip
  • 4 Messages :

Posté 17 mars 2011 - 21:38

Ce chemin est le thème installé dans Firefox, mais qu'en est il du chemin dans mes dossiers et fichiers qui sont dans le thème.Jar que je crée ? je ne trouve pas les correspondances, qui me serviraient à trouver les fichiers utilisé par ce thème.
je précise que j'essaye de créer un thème, en modifiant le thème par défaut et non en le créant de zéro.
je vais voir du coté des chemins que vous m'avez indiqué mais je crains que ce ne soit pas le bon ^^

#12 marechaldan

marechaldan

    Terrien

  • Zimien
  • Pip
  • 3 Messages :

Posté 25 avril 2012 - 09:30

Bonjour, je recherche une version de firefox nu : c'est à dire que l'on ne puisse plus voir que c'est firefox, que l'on ne puisse plus voir que c'est un navigateur. C'est pour une installation en Local, pour une application spécifique. je n'ai pas de compétence en informatique et je ne sais pas si j'arriverais à suivre la procédure qui est proposée.
Merci pour votre réponse.
Daniel

#13 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 25 avril 2012 - 09:41

Salut,

est-ce que ce fil peut t'aider ?

#14 marechaldan

marechaldan

    Terrien

  • Zimien
  • Pip
  • 3 Messages :

Posté 25 avril 2012 - 10:49

je n'ai pas bien compris ta question ?
merci

#15 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 21 797 Messages :
  • Gender:Male

Posté 25 avril 2012 - 12:35

As-tu suivis le fil ? Il est question de prendre la main sur le thème de firefox, ça peut peut-être te donner quelques éléments de démarrage. ;)



0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)