Modifier l’apparence de Firefox grâce aux feuilles CSS

Savez-vous qu’il est possible de changer la manière dont Firefox présente ses menus, ses barres d’outils et même l’emplacement des boutons de navigation en changeant seulement quelques lignes de code dans un fichier CSS ?

Vous pouvez réorganiser pas mal d’éléments en quelques secondes seulement.

Voici un petit mode d’emploi en 4 étapes.

Etape 1 : création du fichier userChrome.css

Rendez-vous dans le dossier de votre profil Firefox qui se trouve à l’emplacement C:\Documents and Settings\*username*\Application Data\Mozilla\Firefox\Profiles\*chaîne_aléatoire*.default\Chrome\.

Vous trouvez un fichier qui s’appelle userChrome-example.css, renommez-le en userChrome.css.

S’il n’existe pas, créez-le. Votre fichier CSS est maintenant prêt à être édité.

Etape 2 : édition du fichier userChrome.css

Voici les modifications que j’ai apporté à mon installation de Firefox grâce aux CSS. Vous pouvez coller chacun de ces extraits dans votre userChrome.css.

La première partie est vitale :


/* Edit this file and copy it as userChrome.css into 
 * your profile-directory/chrome/ */

/* Do not remove the @namespace line -- it's 
 * required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
/* set default namespace to XUL */

Nettoyons un peu la barre de navigation et la présentation générale :


/*  Suppression du throbber en haut à droite */
#throbber-box 
{
   display: none !important;
}

/* La boite de recherche doit faire cette taille */
#searchbar
{
	width: 188px !important;
} 

/* On veut une barre d'adresse conséquente ! */
#addressbar, #urlbar
{
	width: 588px !important;
}

Enlevons maintenant les menus qui ne nous servent pas ou peu :

/* Retirer les menus Edition, Aller et Aide 
 * Sauvegarder le fichier en UTF-8 pour les accents ! */
menu[label="Aller à"], 
menu[label="?"], 
menu[label="Edition"] 
{
   display: none !important;
}

Et enfin, présentons la barre d’outils de manière plus efficace :


/* Montrer les boutons Stop & Reload intelligemment */
#stop-button[disabled] {    display: none !important;}
#stop-button:not([disabled]) + #reload-button {
	display: none !important;
}

/* Adoucit les apparitions de boutons dans la barre 
 * d'outils. Applicable à bien des boutons ! */
#stop-button
{
   opacity: 1 !important;
}
#stop-button[disabled="true"]
{
   opacity: 0 !important;
}

/* Cache les boutons suivant/précédent quand ils sont
 * indisponibles */
#back-button[disabled="true"],
#forward-button[disabled="true"]
{
   display: none !important;
}

/* Plus de lien "précédent" dans le menu contextuel
 * s'il n'y a pas de page précédente dans l'onglet */
menuitem[disabled="true"]
{
   display: none !important;
}

Etape 3 : comment savoir quelles sont les propriétés à éditer ?

C’est une question à laquelle la fondation Mozilla elle-même n’a pas de réponse mais elle propose toutefois deux ressources : une liste des IDs pour retirer ou ajouter des éléments et une autre liste pour améliorer l’interface graphique (skinning).

Je vous conseille Notepad++ pour l’édition de votre feuille CSS : la coloration syntaxique aide grandement l’édition et il est très aisé d’enregistrer au format UTF-8 (Format > Encoder en UTF-8), chose que le bloc-note ou Wordpad sont incapables de faire correctement.

Voilà, vous devriez avoir un Firefox quelque peu allégé sur le plan graphique. Il existe des tonnes de modifications possibles, reportez-vous donc au paragraphe précédent pour plus d’idées.

Happy modding !

Recherchez-vous un expert WordPress ou WooCommerce sur qui vous pouvez compter? Ne cherchez plus.

Faites confiance à mon expertise »

Articles conseillés :

2 pensées sur “Modifier l’apparence de Firefox grâce aux feuilles CSS”

Opinions