Personnaliser l’apparence du bouton menu de Firefox

Même s’il n’est plus maintenant que le deuxième navigateur le plus utilisé en France, Firefox n’en reste pas moins un excellent navigateur. En moyenne, 30 % des lecteurs de ce blog résistent aux sirènes de Google Chrome et continuent à utiliser le logiciel de la fondation Mozilla (ce qui semble d’ailleurs correspondre aux statistiques de StatCounter pour l’année 2012). Parmi les atouts qui ont fait son succès, Firefox dispose d’une indéniable capacité à la personnalisation. Pour ceux qui souhaitent donner un petit coup de jeune à leur Panda roux bien-aimé, voici un justement petit hack sympa repéré sur HTG qui permet de personnaliser l’apparence du bouton menu de Firefox grâce aux feuilles de style.

Installation de Chromedit Plus

Pour nous permettre de modifier facilement le fichier userChrome.css et de l’enregistrer dans le format correct, nous allons d’abord installer l’extension Chromedit Plus.

Sur la page de l’extension, cliquez sur le bouton Add to Firefox,

puis sur Autoriser pour permettre l’installation de Chromedit Plus.

Dans la fenêtre Installation d’un logiciel, cliquez sur le bouton Installer maintenant à la fin du compte à rebours.

Cliquez enfin sur Redémarrer maintenant.

Un nouveau bouton a été ajouté pour vous permettre d’accéder à l’extension :

Modification de userChrome.css

Par défaut Chromedit Plus affiche trois onglets, mais seul le premier intitulé userChrome.css nous intéresse.

♦ Si l’onglet userChrome.css est vide, vous devez y copier-coller le texte ci-dessous et cliquez sur Save.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#appmenu-button {
background: #orange !important;
}
#appmenu-button dropmarker:before {
content: "Firefox" !important;
color: #FFFFFF !important;
}
#appmenu-button .button-text {
display: none !important;
}

♦ Si l’onglet userChrome.css n’est pas vide, copiez le texte ci-dessus sans la première ligne (celle qui commence par @ namespace), et collez-le à la fin du fichier.

Cliquez sur Restart pour redémarrer Firefox en utilisant le nouveau fichier userChrome.css.

A ce stade, vous allez me dire que vous ne voyez aucun changement. Certes, mais vous disposez maintenant d’un fichier prêt à être personnalisé et c’est justement le point que nous allons aborder maintenant.

Personnalisation du bouton

Pour la démonstration, j’ai changé la couleur du bouton et remplacé « Firefox » par le texte « Le Newbie ».

♦ Sur la capture ci-dessous, vous pouvez voir que pour changer la couleur du fond du bouton, j’ai simplement remplacé orange par le code hexadécimal 424242 sur la ligne background. Pour déterminer le code de la couleur que vous souhaitez utiliser, rendez-vous sur ToutImages, Code-Couleur ou ColorPicker.
♦ Sur la ligne content, remplacez Firefox par votre texte. Ici, j’ai choisi Le Newbie suivi d’un espace pour séparer la flèche sur le bouton.
♦ Sur la ligne color, remplacez FFFFFF par le code hexadécimal de la couleur de votre choix pour modifier la couleur du texte. Dans mon exemple, j’ai laissé le code FFFFFF qui correspond au blanc.

Cliquez sur Save, puis sur Restart pour appliquer vos modifications.

Voici le résultat :

Vous pouvez même ajouter une image de fond en collant le texte ci-dessous après la ligne background (Remplacez « c:/LN.png » par le chemin et le nom de votre fichier image) :

background-image: url("file:///c:/LN.png") !important;

Cliquez sur Save, puis sur Restart pour appliquer vos modifications.

C’est prêt, servez bien chaud :