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 */
Code language: CSS (css)

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;
}Code language: CSS (css)

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;
}
Code language: CSS (css)

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;
}
Code language: CSS (css)

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 !

Rencontrez-vous des défis avec votre site WordPress ou WooCommerce? Laissez-moi les résoudre pour vous.

Discutons des solutions possibles »

Articles conseillés :

Matt

Matt Biscay est développeur WordPress et WooCommerce certifié chez Codeable, ainsi que sysadmin qualifié et enseignant-chercheur. Passionné par le code performant et les solutions sécurisées, je m'efforce d'offrir une expérience utilisateur exceptionnelle sur chaque projet.

Vous avez aimé cet article ? Vous avez un projet en tête et vous pensez que je pourrais vous aider à le concrétiser ? N'hésitez pas à me contacter, je serais ravi de discuter avec vous de votre projet !

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

Opinions