Comment créer un fichier userChrome.css ?

Il est possible de modifier l'apparence de Firefox à l'aide de la puissante fonctionnalité userChrome.css.
userChrome.css contient des règles de style pour modifier l'interface utilisateur de Firefox.

Qu'est-ce que userChrome.css et que peut-il faire ?
Les règles de userChrome.css sont appliquées à l'interface utilisateur et peuvent remplacer presque toutes les règles de style intégrées.
Ces règles de style permettent de modifier les polices et les couleurs, de masquer les éléments inutiles, d'ajuster l'espacement et d'apporter d'autres modifications à l'apparence de Firefox.

Activer la prise en charge de userChrome.css dans Firefox

Effacer tout dans la barre d'adresse URL ou ouvrir un nouvel onglet.
Faire un copier/coller --► about:config
Cliquer sur --►Accepter le risque et poursuivre
Dans la case ''Rechercher un nom de préférence'' faire un copier/coller de cette ligne :

toolkit.legacyUserProfileCustomizations.stylesheets 

Faire un double-clic sur false afin de passer la valeur à true


Fermer Firefox.
Relancer Firefox afin de prendre en compte la modification dans l'éditeur de configuration.

Faire cette vérification à chaque nouvelle mise a jour de Firefox.

Créer le dossier Chrome

Tout d'abord afficher la Barre de menus [Fichier/Édition/Affichage/Historique/Marque-pages/Outils/Aide]
Pour cela faire un clic droit dans le haut de la page Firefox et cliquer sur Barre de menus.


Cliquer sur --► Aide --►Plus d'informations de dépannage


Face à la rubrique Dossier de profil cliquer sur --► Ouvrir le dossier correspondant


Cliquer droit dans une partie vierge (à droite) puis ==►Nouveau dossier


Nommer le --► chrome
En minuscule.

Créer le fichier userChrome.css avec le bloc-notes

Ouvrir le bloc-notes (à taper dans le champ de recherche avec Windows 10)


Une fois le bloc-notes ouvert cliquer sur --►Fichier
Puis cliquer sur --► Enregistrer sous


Sélectionner --► Bureau


Face à nom du fichier : effacer --►*.txt


À la place faire un copier/coller --► userChrome.css
Cliquer sur --►Enregistrer


Fermer la croix du bloc-notes située en haut à droite.
Le fichier userChrome.css est créé.


Info :
Attention parfois le mot userChrome.css peut être décalé,c’est-à-dire de voir un espace au début de la case.
Supprimer l'espace avec la touche arrière du clavier.
Exemple de décalage :

Ajouter le fichier ''userChrome.css'' dans le dossier ''chrome''

Ouvrir Firefox et le réduire.

Cliquer sur--► Aide --►Plus d'informations de dépannage
Face à la rubrique Dossier de profil cliquer sur --► Ouvrir le dossier correspondant
Ouvrir le dossier ''chrome''.

Déplacer le fichier userChrome.css dans le dossier ''Chrome''
Pour cela maintenir le clic gauche sur le fichier userChrome.css et le déplacer sans relâcher dans le dossier ''chrome''.
Relâcher à présent le clic gauche.


Le résultat final :

Ouvrir le fichier userChrome.css

Le fichier userChrome.css s'ouvre par défaut avec le bloc-note.
Si ce n'est pas le cas faire un clic droit sur le fichier userChrome.css puis
Ouvrir avec --►Bloc-notes

Exemple code pour réduire l'espacement des Marque pages

Dans le fichier userChrome.css copier/coller les lignes ci-dessous :

/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
  padding-block: 2px !important;
}
:root {
  --arrowpanel-menuitem-padding: 2px 2px !important;
}

En image :


Fermer le bloc-notes et cliquer sur --►Enregistrer


Ferme le dossier ''Chrome''



Fermer Firefox pour enregistrer les modifications.
Relancer Firefox.