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

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : myahoo, Mori, jpj, nico@nc

Avatar de l’utilisateur
nico@nc
Animal mythique
Messages : 7804
Inscription : 21 août 2005, 08:04
Localisation : fr-FR
Contact :

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

Message par nico@nc » 10 juin 2007, 03:22

Bonjour !

Voici un tutoriel/guide si vous êtes...
  • ...maniaque du rangement, et que vous rêvez de réorganiser les menus de Firefox à votre façon.
  • ...farouche opposant à l'utilisation de la couleur bleue sur Internet, et que vous souhaitez faire arborer un magnifique vert foncé à tous les arrière-plans de ce forum.
  • ...mais également si vous souhaitez modeler facilement et avec de larges possibilités l'apparence de l'interface de Firefox (barres d'outils, menus, ...) ainsi que de chacune des pages Web affichées.
Tout cela est possible est possible, sans installer la moindre extension. Pour ce faire, il suffit de choisir quelques lignes de code produisant les effets qui vous intéressent. Nul besoin d'être informaticien pour les comprendre, je vous rassure ...bien que les amateurs pourront chercher à écrire leurs propres lignes. Ce code est ensuite à ajouter dans le fichier approprié de votre profil Firefox :
  • dans le fichier userChrome.css pour l'interface :
    • userchrome.png
    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 : Tout sélectionner

    /* Masquer les menus désactivés */
    menuitem[disabled="true"]
    {
       display: none;
    }
    ou pour avoir la barre personnelle sur plusieurs lignes :

    Code : Tout sélectionner

    /* Barre perso sur plusieurs lignes (pour Firefox 3) */
    #bookmarksBarContent { display:block !important; }
    .places-toolbar-items { display:block !important; height: 70px !important; overflow-y:auto !important; }
    #bookmarksBarContent toolbarseparator { display:inline !important; }
    #bookmarksBarContent .bookmark-item { visibility: visible !important; }
    .chevron { height: 0px !important; }

    Code : Tout sélectionner

    /* Barre perso sur plusieurs lignes (pour Firefox 2) */
    #bookmarks-ptf { display: block; }
    #bookmarks-ptf toolbarseparator { display: inline; }
    Ce fichier doit impérativement comporter la ligne suivante pour fonctionner correctement :

    Code : Tout sélectionner

    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  • dans le fichier userContent.css pour le contenu :
    • usercontent.png
    Exemple : pour agrandir la zone de saisie de message sur le forum :

    Code : Tout sélectionner

    @-moz-document url-prefix(http://forums.mozfr.org)
    {
      /* Agrandir les zones de saisie */
      textarea {
        min-width: 75em !important;
        font-family: monospace !important;
      }
    }
    ou encore changer la couleur de surlignage :

    Code : Tout sélectionner

    /* Changer les couleurs de la sélection dans la page */
    ::-moz-selection {
      color: #D1FFFF !important;
      background-color: #006699 !important;
    }
(ℹ) : 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 : pour y accéder, passez par le menu "Aide" ou "?" (ou cliquez sur le bouton "Firefox" puis survolez "Aide"), et choisissez "Informations de dépannage". Dans l'onglet ouvert, cliquez sur "Ouvrir le dossier correspondant" (sous Mac OS : "Afficher dans le Finder"). Cliquez sur le dossier "chrome" (ou créez-le), vous y êtes !

Par défaut, les deux fichiers 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 Plus 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 :
[/size]
Un grand nombre de codes prêts à utiliser est également disponible sur le site userstyles.org. À installer à l'aide de l'extension Stylish présentée ci-dessous, ou en cliquant sur "Show CSS" pour récupérer le code à placer dans le fichier adéquat.
Dernière édition par nico@nc le 10 déc. 2013, 18:54, édité 19 fois.
Raison : mise à jour du postit'osaure

Avatar de l’utilisateur
nico@nc
Animal mythique
Messages : 7804
Inscription : 21 août 2005, 08:04
Localisation : fr-FR
Contact :

Message par nico@nc » 10 juin 2007, 03:23

Trois extensions vous permettent également d'utiliser de manière plus simple et/ou complète les techniques précédemment citées :
  1. ChromEdit Plus : [en anglais] cette extension ajoute une entrée dans le menu Outils permettant de modifier facilement les fichiers userChrome.css, userContent.css et quelques autres.
  2. Stylish : [en français] 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 les nombreux styles disponibles sur userstyles.org peuvent être installés en un clic.
  3. User Style Manager : [en anglais] similaire à Stylish.
Dernière édition par nico@nc le 21 juil. 2009, 11:02, édité 3 fois.

Avatar de l’utilisateur
jpj
Animal mythique
Messages : 25231
Inscription : 01 août 2005, 15:38
Localisation : France

Message par jpj » 12 mai 2009, 16:23

Ce post-it est verrouillé. Si vous avez besoin d'aide supplémentaire, merci de créer un nouveau sujet en utilisant le bouton "Nouveau" présent sur la page d'index de cette section.
► Si votre problème est [Résolu], svp, marquez-le.
► Pas de support par mp, l’aide se fait sur le forum.

Verrouillé

Qui est en ligne ?

Utilisateurs parcourant ce forum : Bing [Bot], Emma Indoril, G_HZ, PAT1951 et 14 invités