FAQ de Firefox Le fichier Userchrome.css 
14.08.18-Dernières mise à jour : 01.10.22

  Certains codes peuvent ne pas fonctionner suivant la version de Firefox utilisée et/ou suivant les extensions activées!
A savoir: Vous pouvez visualiser en direct dans Firefox les changements effectués dans userChrome.css


Dernières mise à jour : 30.03.19
  • Changer la couleur de la barre personnelle

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur de la barre personnelle (ok FF66) */
      #PersonalToolbar
        {
          background-color: #B0E0E6 !important;   /* ou #E6E6FA */
        }

    Résultat dans Firefox (thème par défaut)
    Captures/FF/ongl_dess_par_defaut.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    21.01.21-Dernières mise à jour : 01.10.22
  • Changer la couleur de la barre de recherche

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur de la barre de recherche (ok FF105) */
      .searchbar-textbox {
          background-color: aqua !important;
        }

    Résultat avec Win10 (sombre)
    Captures/FF/UC_mod_cou_bar_recherche.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    21.01.21-Dernières mise à jour : 01.10.22
  • Changer la couleur de la croix de fermeture de l'onglet actif

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur de la croix de fermeture de l'onglet (ok FF61) */
      .tab-close-button     {
          color: red !important;
        }
      .tab-close-button:not([selected])     {
          color: white !important;
        }

    Résultat-Croix rouge pour l'onglet actif-Croix blanche pour les autres
    Captures/FF/UC_modi_onglets.png

    Résultat avec une autre couleur pour les onglets inactifs
    Captures/FF/UC_modi_onglets2.png


    Résultat avec le theme Clair
    Captures/FF/UC_modi_onglets3.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Dernière mise à jour : 14.08.18
  • Changer la couleur ET l'arrière-plan des croix de fermeture des onglets

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur des croix de fermeture des onglets (ok FF58) */
      .tab-close-button {
          color: red !important; background-color: yellow !important;
        }

    Résultat
    Captures/FF/UC_crx_rou_fon_jaune.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Dernière mise à jour : 28.02.18
  • Changer les couleurs du bouton Ouvrir un nouvel onglet

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer les couleurs du bouton Ouvrir un nouvel onglet (ok FF58) */
      .tabs-newtab-button {
          color: blue !important; background-color: aqua !important;
        }

    Résultat- Croix bleue et arrière-plan bleu ciel
    Captures/FF/UC_crx_AP_bou_nou_onglet.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    21.01.21-Dernières mise à jour : 01.10.22
  • Changer la couleur des dossiers des Marque-pages et Historique

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur des dossiers Marque-pages/Historique (ok FF105) */
        .bookmark-item[container], treechildren::-moz-tree-image(container)   {
          fill: blue !important;
        }

    Capture 1-Couleur par défaut
    Captures/FF/marq_page_defaut.png


    Résultat dans Firefox (Win10) - écran sombre (couleur aqua)
    Captures/FF/marq_page_modif.png Captures/FF/marq_page_modif2.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    21.01.21-Dernières mise à jour : 01.10.22
  • Changer la couleur de l'arrière-plan de l'onglet actif

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur de l'onglet actif (ok FF105) */
        .tab-background[selected="true"]
        {
          background-attachment: none!important;
          background-color: #CBFC !important;
          background-image: none!important;
        }

    Résultat dans Firefox
    Captures/FF/modi_coul_ar_onglets.png

  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    21.01.21-Dernières mise à jour : 01.10.22
  • Changer la couleur de l'arrière-plan des onglets
    (ou changer la couleur des onglets inactifs)

  • lignes de code à mettre dans le fichier UserChrome.css :
    •   /* changer la couleur de l'arrière-plan des onglets (ok FF66 03.04.19) */
      #TabsToolbar     {
          background-color: #CBFC !important   /* ou #CFC */
        }

    Résultat
    Captures/FF/UC_modi_onglets2.png

    Résultat avec FF66 + thème Sombre
    Captures/FF/modi_coul_ar_onglets2.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Dernière mise à jour : 21.01.21
  • Changer la couleur des icones

  • code du fichier UserChrome.css :
    •   /* BARRE ICONES - Mettre en couleur (Jaune) les icones(ok FF84) */
      .toolbarbutton-icon
      {
        fill: yellow !important;
      }

    Capture 1 & 2 - Résultat dans Firefox 84 (Win10 + sombre)
    captures/FF/chang_coul_icones1.png captures/FF/chang_coul_icones2.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.


    • Retour à la FAQ.       
    Dernières mise à jour : 30.03.19
  • Changer la police (taille/couleur...) dans tous les onglets
  • Changer la police (taille/couleur...) de l'onglet actif

  • code du fichier UserChrome.css :
    •   /* changer la police (taille/couleur...) des onglets (ok FF66) */
      .tab-text   {
        font-size: 120%; font-style: italic; color:red !important;
      }


    Capture 1
    Captures/FF/UC_modi_poli_onglets.png


  • Changer la police (taille/couleur...) de l'onglet actif

    •   /* changer la police (taille/couleur...) de l'onglet actif (ok FF58) */
      #TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content   {
        color: blue; !important; font-weight: bold !important;
        font-size: 13px !important;
      }


    Capture 2
    Captures/FF/cha_cou_txt__ong_actif.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    19.11.17-Dernières mise à jour : 30.03.19
  • Changer la taille de la barre d'adresses.

  • code du fichier UserChrome.css :
    •   /* changer la taille de la barre d'adresses (ok FF66) */
      #urlbar
      {
        max-width: 500px !important;
      }



  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    19.11.17-Dernières mise à jour : 30.03.19
  • Changer la taille+couleur du menu: Fichier|Édition|Affichage... .

  • code du fichier UserChrome.css :
    •   /* Changer la taille+couleur du menu Fichier|Édition|Affichage!... (ok FF66) */
      #main-menubar > * {
        font-size: 18px; color: yellow !important;
      }


    Capture 1
    Captures/FF/modi_tail_coul_menu.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    19.11.17-Dernières mise à jour : 14.08.18
  • Changer la taille+couleur de Fichier|Édition|Affichage... et des sous-menus

  • code du fichier UserChrome.css :
    •   /* Changer la taille+couleur+AP du menu et sous-menu de: Fichier|Édition .. */
      #main-menubar *
      {
        font-size: 18px; background-color: #A9D0F5; color: black !important;
      }


    Capture 1
    Captures/FF/modi_tail_coul_menu2.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    19.11.17-Dernières mise à jour : 14.08.18
  • Mettre les onglets (et la barre perso) sous la barre d'adresses

    • Capture 1 - avec le thème par défaut les onglets sont au dessus (FF61)
    captures/FF/ongl_dess_par_defaut.png


  • code du fichier UserChrome.css :
    • /* Mettre les onglet sous la barre d'adresses */
       #tabs-toolbar
        {
          -moz-box-ordinal-group: 3 !important;  
        }
    /* Mettre la barre perso sous la barre d'adresses */
       #PersonalToolbar
        {
          -moz-box-ordinal-group: 2 !important;  
        }


    Après Capture 2 - la barre perso et les onglets sont en dessous.
    captures/FF/barr_pers_dess_onglet.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    04.10.15-Dernières mise à jour : 29.11.17
  • Masquer le menu: Marqués récemment (de Bibliothèque)

  • Nouvelle icone (Bibliothèque) apparue dans Firefox 57

    • Captures/FF/ico_bibliotheque.png


  • code du fichier UserChrome.css :
    •   /* masquer le menu Marqués récemment de Bibliothèque (ok FF57) */
      #panelMenu_recentBookmarks  {   display: none !important;   }
      #panelMenu_bookmarksMenu   {   display: none !important;   }



    Capture 2 - Avant
    Captures/FF/bibl_mar_recemment.png


    Capture 2 - Après
    Captures/FF/bibl_mar_recemment2.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    04.10.15-Dernières mise à jour : 29.11.17
  • Masquer le menu: Marqués récemment (de Marque-pages)

  • code du fichier UserChrome.css :
    •   /* masquer le menu Marqués récemment (de Marque-pages)(ok FF57) */

      [label="Marqués récemment"]  {
        display: none !important;
      }



  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    04.10.15-Dernières mise à jour : 29.11.17
  • Masquer le menu: Barre personnelle

  • code du fichier UserChrome.css :
    •   /* masquer le menu Barre personnelle et/ou Marqués récemment (ok FF57) */

      [label="Barre personnelle"]  {
        display: none !important;
      }



  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    04.10.15-Dernières mise à jour :
  • Masquer le menu: Supprimer l'historique récent.

  • code du fichier UserChrome.css :
    •   /* cacher le menu : Supprimer l'historique récent (ok FF40) */

      [label="Supprimer l'historique récent."]   {
        display: none !important;
      }


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
  • Masquer le menu: Effacer les téléchargements.

  • code du fichier UserChrome.css :
    •   /* cacher le menu : Effacer les téléchargements (ok FF40) */
      [label="Effacer les téléchargements"]   {
        display: none !important;
      }


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
  • Mettre le texte du menu: Effacer les téléchargements en couleur.

  • code du fichier UserChrome.css :
    •   /* Mettre le texte en ROUGE de Effacer les téléchargements (ok FF40) */
      [label="Effacer les téléchargements"]
      {
        color: red !important;
      }


  • Si besoin des infos » ici « sur le fichier Userchrome.css.


    • Retour à la FAQ.       
    21.01.21-Dernières mise à jour : 01.10.22
  • Arrondir tous les onglets (FF105)
  • Mofifier la police + Rétrécir les onglets
  • Mofier la couleur des onglets + croix fermeture

    • Capture 1-les onglets avec le thème par défaut
    captures/FF/ongl_dess_par_defaut.png


  • code du fichier UserChrome.css :
    •   /* remettre l'arrondi des onglets (ok FF105) */
      .tab-background {
        border-radius: 18px 18px 0px 0px !important; border-image: none !important;
      }
      .tab-line {
        display: none;
      }


    Capture 2 - Résultat dans Firefox (Win10)
    captures/FF/UC_ongl_arrondis.png


  • Une variante
    •   /* ARRONDIR + couleur sur les onglets inactifs (ok FF105) */
      .tabbrowser-tab:not([pinned]) .tab-background {
        border-radius: 18px 18px 0px 0px !important; border-image: none !important;
        background -color: #CBFC !important;
      }
      /* Supprimer la barre haute(trait bleu) de l'onglet actif (ok FF105) */
      .tab-line {
        display: none;
      }

    Capture 3 - Résultat (Win10 sombre))
    captures/FF/onglet_arrondi_2.png


  • Une autre variante
    •   /* ARRONDIR + couleur sur les onglets inactifs (ok FF105) */
      .tabbrowser-tab:not([pinned]) {
        border-radius: 18px 18px 0px 0px !important; border-image: none !important;
        background -color: lightblue !important;
      }
      /* Couleur de l'onglet Actif = Bleu - ok FF105 */
      .tab-background[selected="true"] {
        border-radius: 18px 18px 0px 0px !important; border-image: none !important;
        background-color: #1C86EE !important;
      }
      /* Supprimer la barre haute(trait bleu) de l'onglet actif (ok FF84) */
      #TabsToolbar .tabbrowser-tab .tab-line {
        visibility: hidden;
      }


    Capture 4 - Résultat dans FF61 d'arrière-plan par défaut
    captures/FF/onglet_arrondi_3.png

    Capture 5 - Police 120% + texte en bleu + croix rouge + onglets rétrécis
    Code à ajouter: .tab-text { font-size:120% color:blue; font-weight:bold; }
    Code à ajouter: .tab-close-button { color: red !important; }
    captures/FF/onglet_arrondi_txtB.png

    Capture 6 - avec couleur d'arrière-plan blanc + onglets rétrécis
    Code à ajouter: #TabsToolbar { background-color: White !important;}
    Code à ajouter: #TabsToolbar { background-color: White !important;}
    captures/FF/onglet_arrondi_AP_B.png

  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Dernières mise à jour : 14.08.18
  • Supprimer la barre haute (trait) de l'onglet actif
  • Déplacer la barre haute (trait) de l'onglet actif

  • code du fichier UserChrome.css :
    •   /* Supprimer la barre haute de l'onglet actif (ok FF61) */
      #TabsToolbar .tabbrowser-tab .tab-line {
        visibility: hidden
      }


    Capture 1- Résultat le trait bleu en haut de l'onglet a disparu
    captures/FF/UC_supp_barr_haut_onglet.png


  • Déplacer la barre haute (trait) de l'onglet actif
    (bien sur il faudra désactiver les lignes ci dessus de suppression de la barre (TabsToolbar .tabbrowser-tab .tab-line))

  • code du fichier UserChrome.css :
    •   /* Déplacer la barre haute de l'onglet actif (ok FF61) */
      .tabbrowser-tab[usercontextid] .tab-line {
        background-color:var(--identity-tab-color)!important;
      }


    Capture 2- Résultat dans Firefox
    captures/FF/trait_en_bas_onglet.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Dernières mise à jour : 14.08.18
  • Supprimer la CROIX de fermeture des onglets inactifs

  • code du fichier UserChrome.css :
    •   /* Supprimer la croix des onglets inactifs (ok FF61) */
      tab-close-button:not([selected]) {
        display: none;
      }


    Capture 1- Plus de croix dans les onglets inactifs
    captures/FF/sup_cx_ong_inactifs.png


  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Dernières mise à jour : 13.08.18
  • Tester facilement les codes du fichier Userchrome.css

    • Lorsque l'on veut personnaliser Firefox avec un fichier Userchrome.css, il devient vite très pénible de fermer puis ouvrir Firefox à chaque modification du code.
    Depuis les dernières versions plus besoin de fermer Firefox pour tester ces lignes de code.
    Pour cela il faut activer l'outil Développement Web inclu dans FF.

  • Dans about:config, rechercher l'option : devtools.debugger.prompt-connection et mettez sa valeur à False (True par défaut).
  • Puis cliquez sur le nouveau menu (hamburger) à droite

    • Capture 1
    Captures/FF/ouvrir_menu.png


  • Puis sur Développement web

    • Capture 2
    Captures/FF/menu_deve_web.png


  • et ensuite sur Outils développement

    • Capture 3
    Captures/FF/menu_deve_web2.png


  • Un nouveau panneau s'ouvre en bas de la page.
    Cliquer sur les 3 petits points à droite pour accéder aux réglages

    • Capture 4
    Captures/FF/deve_web_options.png


    Capture 4.2 (anc.versions de FF)
    Captures/FF/deve_web_options2.png


  • Cliquez sur Paramètres. Dans Paramètres avancés cochez les 2 cases :
    • Activer le débogage du chrome du navigateur et des modules et Activer le débogage distant
    Puis fermer le panneau

    Capture 5
    Captures/FF/deve_web_para_avan.png


  • Pour lancer la boîte à outils, cliquez sur nouveau menu » Développement Web » Boîte à Outils du navigateur
  • Dans la nouvelle fenêtre cliquez sur Éditeur de style
    et dans la liste de gauche recherchez (doucement) votre fichier Userchrome.css

    • Capture 6
    Captures/FF/out_dev_edit_style.png


  • Dans la fenêtre de droite vous pouvez entrer/modifier les lignes de code avec effet immédiat. Et si cela vous convient vous pouvez enregistrer vos modifications en cliquant sur Enregistrer (§ capture 6)

  • Si besoin des infos » ici « sur le fichier Userchrome.css.

    • Retour à la FAQ.       
    Malgré toutes ces informations, je n'ai pas trouvé de réponse ou puis-je poser ma question ?
    R-►sur le forum de Geckozone
    Des bénévoles vous aideront (et un petit bonjour en début de message sera le bienvenu ), mais avant faites une recherche sur le forum au cas ou votre question aurait déjà été posée(et peut-être solutionnée!)