FAQ de Firefox Le fichier Userchrome.css 
Dernières mise à jour : 27.02.18

  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



  • Changer la couleur de la barre personnelle

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


    Résultat dans Firefox 57 (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.       
    Dernière mise à jour : 28.02.18
  • 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 FF58) */
      .searchbar-textbox {
          background-color: aqua !important;
        }


    Résultat
    Captures/FF/UC_mod_cou_bar_recherche.png


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

  • Retour à la FAQ.       
    Dernière mise à jour : 19.02.18
  • Changer la couleur de la croix de fermeture de l'onglet

  • lignes de code à mettre dans le fichier UserChrome.css :
  •   /* changer la couleur de la croix de fermeture de l'onglet (ok FF58) */
      .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 : 28.02.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.       
    Dernières mise à jour : 02.02.18
  • 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 FF58) */
        .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 58
    Captures/FF/marq_page_modif.png


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

  • Retour à la FAQ.       
    Dernières mise à jour : 28.02.18
  • 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 FF58) */
        .tab-background[selected="true"]
        {
          background-attachment: none!important;
          background-color: #A9D0F5 !important;
          background-image: none!important;
        }


    Résultat dans Firefox 58
    Captures/FF/modi_onglets.png


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

  • Retour à la FAQ.       
    Dernière mise à jour : 28.02.18
  • Changer la couleur de l'arrière-plan des onglets inactifs

  • lignes de code à mettre dans le fichier UserChrome.css :
  •   /* changer la couleur des onglets inactifs (ok FF58) */
      #TabsToolbar     {
          background-color: #CBFC !important   /* ou #CFC */
        }


    Résultat dans Firefox 58
    Captures/FF/UC_modi_onglets2.png


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

  • Retour à la FAQ.       
    Dernières mise à jour : 27.02.18
  • 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 FF58) */
      .tab-text   {
        font-size: 120%; font-style: italic; color:red
      }



    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.       
    Dernières mise à jour : 19.11.17

  • Changer la taille de la barre d'adresses.

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




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

  • Retour à la FAQ.       
    Dernières mise à jour : 19.11.17

  • Changer la taille que de Fichier|Édition|Affichage... .

  • code du fichier UserChrome.css :
  •   /* changer la taille QUE de Fichier|Édition|Affichage!... (ok FF57) */
      #main-menubar > *
      {
        font-size: 18px !important
      }



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

  • Retour à la FAQ.       
    Dernières mise à jour : 19.11.17

  • Changer la taille de Fichier|Édition|Affichage... et des sous-menus

  • code du fichier UserChrome.css :
  •   /* changer la taille du menu et sous-menu de Fichier|Édition .. (ok FF57) */
      #main-menubar *
      {
        font-size: 18px !important
      }



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

  • Retour à la FAQ.       
    Dernières mise à jour : 19.11.17

  • 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 (FF57)
    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.       
    Dernières mise à jour : 19.11.17

  • Arrondir les onglets (FF57 et sup.)

  • 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 FF57) */
      .tab-background {
        border-radius: 8px 8px 0px 0px !important; border-image: none !important;
      }
      .tab-line {
        display: none;
      }



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


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

  • Retour à la FAQ.       
    Dernières mise à jour : 28.02.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 FF58) */
      #TabsToolbar .tabbrowser-tab .tab-line {
        visibility: hidden
      }



    Capture 1- Résultat le trait 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 FF58) */
      .tabbrowser-tab[usercontextid] .tab-line {
        background-color:var(--identity-tab-color)!important;
      }



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


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

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

  • code du fichier UserChrome.css :
  •   /* Supprimer la croix des onglets inactifs (ok FF58) */
      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 : 28.02.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 la roue dentée à droite pour accéder aux réglages

  • Capture 4
    Captures/FF/deve_web_options.png


  • 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 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 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!)