Nous allons apprendre à customiser Firefox en CSS [TOC]

Activer la prise en compte de la feuille de style personnalisée pour Firefox

doc 1. Ouvrez la configuration de Firefox en saisissant about:config dans la barre d'URL 2. cherchez la configuration suivante : toolkit.legacyUserProfileCustomizations.stylesheets et passez-la à true

Trouver le répertoire profil de votre instance de Firefox

1. Ouvrez la gestion de profil de Firefox en saisissant about:support dans la barre d'URL
2. A la ligne [Répertoire de profil] cliquez sur [Ouvrir le répertoire correspondant]

Créer le fichier de stylisation de Firefox

1. Dans le répertoire du profil, cherchez ou créez un répertoire [chrome]
2. à l'intérieur de celui-ci, créez un fichier userChrome.css

Exemple de customisation stylistiques pour Firefox

Le code ci-dessous va permettre d'agrandir les onglets épinglés au survol et de leur donner une couleur plus visible

.tabbrowser-tab[pinned]:hover{
 min-width: 150px !important;
 z-index: 10 !important;
}
.tabbrowser-tab[pinned]{
 z-index: 10 !important;
 background-color:#3b5f63 !important;
 border-right: 2px solid white !important;
}

NE PAS OUBLIER DE REDÉMARRER FIREFOX

Malheureusement à chaque modification de userChrome.css vous devrez redémarrer Firefox pour qu'elles prennent effet

Inspecter le DOM du navigateur lui même

Afin de déterminer quelle classe, id ou element cibler dans la css, on a besoin d'inspecter le navigateur lui-même. Pour ce faire ouvrir inspect element, puis dans les options (F1) activer dans les [parametre avancés] les cases [activer le débogage du chrome du navigateur et des modules] ET [activer le débogage distant]

On pourra alors ouvrir un inpect element special pour inspecter le dom du navigateur lui même (voir dans le menu hamburger -> OUtil supplémentaire -> boite a outil du navigateur)