Personnaliser l'apparence de Firefox (user*.css)

Admin Inscrit le : 20 Aoû 2007 Messages : 438

Il est possible de personnaliser sans extension l'apparence de Firefox,
aussi bien l'interface (barres d'outils, menus, ...) que le contenu de
la fenêtre de visualisation (pages Web et barres et défilement).

Pour ce faire, il suffit simplement d'ajouter un bout de code
correspondant à ce qui vous intéresse dans le fichier du profil
approprié :

le userChrome.css pour l'interface :
Exemple : pour cacher les menus désactivés (comme "Page précédente" dans le menu contextuel s'il n'y a pas de page précédente dans l'onglet), il suffit d'ajouter :
Code:
/* Masquer les menus désactivés */

menuitem[disabled="true"]

{

display: none;

}

ou pour avoir la barre personnelle sur plusieurs lignes :

Code:
/* Barre perso sur plusieurs lignes */

#bookmarks-ptf

{

display: block;

}

#bookmarks-ptf toolbarseparator

{

display: inline;

}

⚠ Ce fichier doit impérativement comporter la ligne suivante pour fonctionner correctement :
Code:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

</li>
le userContent.css pour le contenu :
Exemple : pour agrandir la zone de saisie de message sur le forum :
Code:
@-moz-document url-prefix(http://www.geckozone.org/forum/)

{

/* Agrandir les zones de saisie */

textarea {

min-width: 75em !important;

font-family: monospace !important;

}

}
ou encore changer la couleur de surlignage :
Code:
/* Changer les couleurs de la sélection dans la page */

::-moz-selection {

color: #D1FFFF !important;

background-color: #006699 !important;

}
</li>

(ℹ) : Vous remarquerez souvent des phrases entre /* et */,
il s'agit de commentaires qui n'influent pas sur le code mais peuvent
vous aider par exemple à savoir à quoi correspond tel code, ou encore à
désactiver un code sans avoir à l'enlever complètement. Attention : tout le code compris entre /* et */ sera donc inopérant !

Ces fichiers doivent se trouver dans le dossier chrome du dossier du profil :

Citation:

Windows 9x/Me : C:\Windows\Application Data\Mozilla\Firefox\Profiles\chrome\\chrome\ ou C:\Windows\Profiles\\Application Data\Mozilla\Firefox\Profiles\\chrome\
Windows NT 4.x : C:\Winnt\Profiles\\Application Data\Mozilla\Firefox\Profiles\\chrome\
Windows 2000/XP : C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\\chrome\
Windows Vista : C:\Utilisateurs\\Appdata\Roaming\Mozilla\Firefox\\chrome\

⚠
Ce dossier est par défaut caché par Windows, vous devez activer
afficher les dossiers et fichiers cachés dans l’explorateur, via le
menu Outils > Options puis l’onglet Affichage.
Unix/Linux : ~/.mozilla/firefox//chrome/
Mac OS X : ~/Library/Mozilla/Firefox/Profiles//chrome/ ou ~/Library/Application Support/Mozilla/Firefox/Profiles//chrome/

Par défaut, ils n'existent pas, mais vous trouverez un userChrome-example.css et un userContent-example.css
qui contiennent des exemples de codes mis en commentaires (voir
l'explication un peu plus haut). Vous pouvez tout simplement les
renommer respectivement en userChrome.css et un userContent.css à partir de votre explorateur de fichiers. (ℹ) : l'extension ChromEdit présentée ci-dessous crée automatiquement les deux fichiers à son premier lancement.

Vous trouverez plus d'informations sur chaque fichier et des centaines
de possibilités de personnalisations dans les deux sujets suivants :

personnaliser Firefox avec le userChrome.css par ottomar
userContent.css : trucs et astuces par FF_Olivier

Trois extensions vous permettent également d'utiliser de manière plus simple et/ou complète les techniques précédemment citées :

ChromEdit :
cette extension ajoute une entrée dans le menu Outils permettant de modifier facilement les fichiers userChrome.css, userContent.css et quelques autres.

Installation : http://ersplus.free.fr/spip/article.php?id_article=73
En images :

EditConfigFiles :
cette extension permet la même chose que ChromEdit, mais dans un éditeur de texte de votre choix.

Installation : http://extensions.geckozone.org/EditConfigFiles
En image :

Stylish :

cette extension permet la même chose qu'avec les fichiers
userChrome.css et userContent.css, mais à partir d'une interface
conviviale. De plus, les modifications sont généralement effectives
sans redémarrage de Firefox, et de nombreux styles sont disponibles sur
userstyles.org.
Certains permettent même de remplacer des extensions comme Customize
Google, OpenBook, Separe Slim Extension List, Stop-or-Reload Button...

Installation : http://extensions.geckozone.org/Stylish
En image :