Code CSS pour marques-pages en couleur - Firefox 2026

[iBenny]

Bonjour à tous 👨‍🦳,

 

Je cherche à :

1. Changer la couleur du texte des mp (marques-pages de la barre personnelle) niveau 0 (la barre personnelle affichée)
2. Changer la couleur du texte des mp niveau 1 (liste déroulante des dossiers)
3. Changer la couleur du fond de la liste des dossiers déroulants des mp

 Le code CSS pour #3 est :

/* changer la couleur des dossiers Marque-pages/Historique (en bleu) */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
fill: blue !important;
} 

/* changer la couleur des dossiers Marque-pages/Historique (en couleur) */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
fill: #EEAD0E !important;
} 

Quels sont les codes pour les #1 et 2 ?

Ceci fait, où devais-je injecter ces codes ?

J'utilise un thème personnalisé (téléchargé) que je veux modifier et je me demande à quel endroit je devrais mettre ces codes.

Dans l'outil de développement, j'ai :

À gauche se trouve la liste des fichiers js modifiables mais dans lequel dois-je injecter le code ?

 

Merci infiniment pour votre aide.

Salutations cordiales 🙋‍♂️

iBenny

 

 

Modifié le 27 juillet par iBenny

[Dylav]

Bonsoir iBenny,

1. tu affiches les fichiers et dossiers cachés (dans l'explorateur, Afficher > Afficher > Éléments masqués)
2. tu te rends dans ton profil Firefox (C:/Users/ton-nom-d-utilisateur/AppData/Roaming/Mozilla/Firefox/Profiles/ton-nom-de-profil-Firefox)
3. tu y crées un dossier nommé Chrome
4. dans ce dossier, tu crées un fichier nommé userChrome.css
5. dans ce fichier, tu installes ton code CSS

Par ailleurs, il existe sur Github un dossier qui déroule de très nombreuses possibilités de personnalisation CSS de Firefox

1. Créer le dossier C:/Users/ton-nom-d-utilisateur/AppData/Roaming/Mozilla/Firefox/Profiles/ton-nom-de-profil-Firefox/Chrome
2. Aller sur le site https://github.com/aris-t2/customcssforfx
3. Se connecter (sign in) - facultatif
4. Menu Code (bouton vert) > Download ZIP
5. CustomCSSforFx-master.zip > CustomCSSforFx-master > extraire le contenu dans le dossier Chrome
6. Dans le fichier userChrome.css (documenté en anglais), il suffit ensuite d'activer toutes les options souhaitées en enlevant le /* de tête de ligne (commentaire)

Ce dossier est très suivi, et susceptible d'évoluer avec chaque nouvelle version de Firefox. Mais attention, il faut à chaque fois retourner dans le nouveau userChrome.css pour activer chaque option précédemment choisie (ou parfois, dans le cas d'une mise à jour majeure de Firefox, chercher la nouvelle option qui la remplace) !

[iBenny]

Bonsoir Dylav !

 

1- Est-ce que userChrome.css va surpasser les configurations du thème installé (téléchargé) ?

2- Il faut activer une option dans about:config pour que userChrome soit exécuté si je me rappelle ! 

 

Salutations cordiales,

iBenny

Modifié le 28 juillet par iBenny

[iBenny]

Il y a 15 heures, Dylav a dit :

Par ailleurs, il existe sur Github un dossier qui déroule de très nombreuses possibilités de personnalisation CSS de Firefox

1. Créer le dossier C:/Users/ton-nom-d-utilisateur/AppData/Roaming/Mozilla/Firefox/Profiles/ton-nom-de-profil-Firefox/Chrome
2. Aller sur le site https://github.com/aris-t2/customcssforfx
3. Se connecter (sign in) - facultatif
4. Menu Code (bouton vert) > Download ZIP
5. CustomCSSforFx-master.zip > > extraire le contenu dans le dossier Chrome

Bonjour Dylav,

Pas de chance ! J'ai fait une recherche dans le dossier CustomCSSforFx-master avec Search Everything en cherchant les fichiers dont les noms contenaient "bookmarks" et "css" et contenant le texte "text" (pour déceler du code de couleur pour les textes) et je n'ai rien trouvé codant la couleur du texte des marque-pages !!!

Sans avoir le code css exact pour ce cas, je crois que ma meilleure option serait de trafiquer le code du thème installé (téléchargé) mais je ne trouve pas dans quel dossier il est caché. Où diable sont-ils localisés ? 🤷‍♂️🔍

 

Salutations cordiales,

iBenny

Modifié le 28 juillet par iBenny

[Dylav]

Il y a 18 heures, iBenny a dit :

1- Est-ce que userChrome.css va surpasser les configurations du thème installé (téléchargé) ?

La réponse est oui, parce que les instructions CSS de ce fichier seront exécutées après les instructions standard et, donc, les remplaceront. Si toutefois tu veux t'en assurer, tu peux ajouter !Important à la fin de chacune de tes instructions, pour vraiment forcer les choses.

Il y a 18 heures, iBenny a dit :

2- Il faut activer une option dans about:config pour que userChrome soit exécuté si je me rappelle ! 

Oui, c'est indiqué dans les commentaires de tête du fichier userChrome.css.

Citation

Firefox requires the following preference to be enabled for custom styles to be loaded:  
'about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true'  
Firefox preferences can be accessed by typing `about:config` into the url bar.

 

[iBenny]

Bonsoir Dylav,

Savez-vous où dans le profil FF se trouve le fichier/dossier du thème actif (téléchargé) de l'IUG de FF ? 🔍

 

Salutations cordiales

iBenny

 

Modifié le 28 juillet par iBenny

[Dylav]

Bonjour iBenny,
Je n'ai pas la réponse à cette question.
Ce que je peux ajouter, c'est qu'il n'est pas pertinent de bidouiller directement dans un profil Firefox. Ces modifications risquées seraient à reporter dans chaque nouvelle version du navigateur (et on en a plusieurs par mois).
Néanmoins, Mozilla permet justement de personnaliser l'affichage de Firefox grâce au fichier userChrome.css qui, certes, a parfois besoin d'être adapté à une nouvelle version majeure du navigateur. Ceci dit, j'en suis à la version 4.6.9 du projet Aris-t2, alors que sur Github on en est à la 4.7.5.
De plus, si tu regardes en bas de userChrome.css, il se termine par l'instruction @import "./my_userChrome.css" qui te permet donc d'ajouter dans le dossier Chrome des compléments personnels de feuille de style, dans un fichier my_userChrome.css. On ne peut pas faire plus clair ni plus souple...
Tu pourrais donc installer le projet Github tel quel (donc avec plein de possibilités latentes de personnalisation), et ajouter dans le dossier Chrome le fichier my_userChrome.css contenant tes modifications personnelles.

[iBenny]

Bonjour Dylav,

En regardant, j'ai découvert que j'avais déjà un userChrome.css en fonction (tellement longtemps). Manque seulement le code désiré pour l'y ajouter...

PS : J'ai trouvé qqe chose d'intéressant sur le codage des thèmes ici : THÈME et THÈME 2 ! MAIS... c'est du json.

PPS : et j'ai trouvé les thèmes de FF dans le dossier "extension" dans les fichiers qui ont comme nom une longue suite de chiffres...

Salutations cordiales

iBenny

Modifié mercredi à 22:46 par iBenny

[Dylav]

Pour en revenir à tes desiderata, installe tes instructions CSS dans my_userChrome.css, ça devrait le faire.
Je me rappelle juste que j'avais trouvé comment modifier la couleur de fond des zones URL et Rechercher, et aussi la couleur de fond des onglets. Et c'étaient des options présentes dans userChrome.css, si je me souviens bien. Mais je ne saurais plus dire où...