Astuces de personnalisation de Firefox Quantum par CSS

[Dylav]

Bonjour,

En ce début de nouvelle année, j'ai pris une bonne résolution : passer à Firefox 57 Quantum.

Et, chose encore plus surprenante, j'ai tenu parole !

 

Comme je tenais à me rapprocher au maximum du look Classic Theme Restorer (on ne se refait pas),

j'ai créé le dossier Chrome et son fichier userChrome.css dans mon profil par défaut, W0u1ONlW.default.

Résultat : aucun effet, même en fermant et rouvrant Firefox ! Déception...

Sans trop y croire, j'ai recopié le dossier Chrome dans l'autre répertoire, u0d4cj5r.default-1462885001091.

Et là, surprise, tout se met en place. Ce serait donc lui, le profil par défaut ?

 

Il me reste à trouver comment attribuer une autre couleur de fond à la barre personnelle, et aussi à la barre d'onglets. Est-ce possible ?

[Pierre13]

Hello,

 

Normal que tu n'as pas eu d'effet.

Il faut indiquer le profil par défaut dans le fichier profiles.ini

Ce fichier se trouve dans : E:\Users\<Ton_Nom_Utilisateur>\AppData\Roaming\Mozilla\Firefox

 

Exemple:

[General]
StartWithLastProfile=1

[Profile0]
Name=default-1474429964560

IsRelative=1
Path=Profiles/2xi4oipz.default-1474429964560

Remplacer 2xi4oipz.default dans cet exemple par W0u1ONlW.default

Ne pas oublier d'ajouter la suite de chiffres qui doivent correspondre à la ligne Name.

 

Si besoin, faire une sauvegarde du fichier profiles.ini avant...

 

@+

Modifié le 2 janvier 2018 par Pierre13

[Dylav]

Merci pour cette explication. Ceci signifie donc que mon profil par défaut n'est pas celui que je croyais.
J'ai tenté de bricoler le fichier profiles.ini, mais cela n'a pas donné de résultat satisfaisant.
Je vais donc rester comme ça, il suffit de savoir quel est le profil par défaut...

Mais il me reste trois problèmes à résoudre,

• la couleur de fond de la barre personnelle,
• la couleur de fond de la barre d'onglets,
• la couleur de la police des onglets (inactifs) : je voudrais le noir.

Voici ce que j'ai mis dans le fichier userChrome.css...

/* Onglets en gris*/
.tab-background {
background-attachment: none!important;
background-color: #CCC!important;
background-image: none!important;
color: black!important;
}
/* Onglet Actif vert pâle */
.tab-background[selected="true"] {
background-attachment: none!important;
background-color: lightgreen!important;
background-image: none!important;
}

Je sens bien que la ligne color:black est mal positionnée, mais je ne vois pas la solution...

[Wullfk]

Bonjour et bonne année 2018 à vous deux et prenez soins de votre santé

 

En ce début d'année tes demandes de personnalisation me pose une colle.

 

Je ne saurais trop te conseiller de voir un de mes codes proposer ici même ou sur mon blog externe, et d'essayer de l'adapter à ta convenance.

[Dylav]

Salut Wullfk,

Je ne saurais trop te conseiller de voir un de mes codes proposer ici même ou sur mon blog externe, et d'essayer de l'adapter à ta convenance.

En gros, tu me conseilles de bidouiller... on en est trop souvent tous là, hélas !

Ce qu'il nous manque cruellement, ce sont les sélecteurs de la feuille de style (classes, ID)...
Je n'ai pas réussi à trouver un point d'entrée satisfaisant sur le site MDN (Mozilla Developper Network), et ça m'énerve... j'ai toujours été un mauvais chercheur ! J'irai néanmoins consulter les liens que tu fournis en bas de ton article sur EasyPC.

En tout cas, en regardant tes astuces et en rassemblant mes souvenirs de CSS, j'ai résolu mes 3 problèmes.

/* 1. Couleur de fond de la barre personnelle (ici, jaune pâle) */
#personal-bookmarks {background-color: #FF9 !important}

/* 2. Couleur de fond de la barre d'onglets (ici, vert pâle) */
#TabsToolbar {background-color: #CFC !important}

/* 3. Couleur de police des onglets */
.tab-text {color: black !important}

/* 4. Couleur de la croix des onglets */
.tab-close-button {color: black !important}

/* 5. Couleur de la croix du bouton nouvel onglet */
.tabs-newtab-button {color: black !important}

/* 6. Couleur de fond (gris) des onglets */
.tab-background {background-color: #CCC !important}

/* 7. Onglet actif vert (moins) pâle */
.tab-background[selected="true"] {background-color: #9F9 !important}

/* 8. Ligne sous onglet actif */
.tabbrowser-tab .tab-line{margin-top: 32px !important}

1. La barre personnelle est en jaune pâle
2. La barre d'onglets est en vert (très) pâle
3. Pour tous les onglets, la police est noire
4. Pour tous les onglets, la croix de fermeture est noire
5. La croix du bouton nouvel onglet est noire
6. Pour tous les onglets, la couleur est grise
7. Pour l'onglet actif, la couleur est vert pâle
8. La « ligne » de l'onglet actif passe en dessous

C'est encore un peu criard, mais je sais comment ajuster les couleurs...

Reste le problème de cette ligne sous l'onglet actif. Je l'ai passée dessous (cf. 8 ci-dessus), mais je voudrais l'éliminer, car je n'en vois pas l'intérêt, dans la mesure où la couleur de l'onglet suffit à le différencier !

[Dylav]

Voilà, j'ai trouvé la réponse dans un topic-fleuve de PC Astuces auquel Wullfk a activement participé...

Plutôt que de déplacer la barre de l'onglet, il suffit de la rendre invisible ! Après coup, c'est évident...

/* 8. Supprime la barre haute des onglets */
#TabsToolbar .tabbrowser-tab .tab-line {visibility: hidden}

Mais, encore une fois, il serait très précieux de connaître la liste des sélecteurs utilisés par Firefox (ID et classes)...

Il est certain que Mozilla l'a publiée, mais où ?

[Wullfk]

Re,

 

Je vais ajouter ce paramétrage à mon article.

 

Merci pour le retour.

 

@+

 

[edit] voila c'est fait

Modifié le 3 janvier 2018 par Wullfk

[Dylav]

Tu peux aussi ajouter les couleurs de fond de la barre personnelle et de la barre d'onglets...

[Wullfk]

OK c'est fait

[Dylav]

Une des mines judicieusement exploitées par Wullfk est Le fichier Userchrome.css, qui cite en particulier la boîte à outils du navigateur (FF 57) (qui fait partie de l'encyclopédie MDN, Mozilla Developer Network). J'y suis allé... c'est compliqué ! Pour ne rien vous cacher, cela dépasse largement mes compétences en CSS...