Aller au contenu


Photo

Astuces de personnalisation de Firefox Quantum par CSS


  • Veuillez vous connecter pour répondre
26 réponses à ce sujet

#11 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 30 879 messages

Posté 02 janvier 2018 - 04:27

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 ! icon_rolleyes.gif

 

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.

645418aproffirefox.jpg

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 ? Hein36.gif

 

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


  • 0

PUBLICITÉ

    Annonces Google

#12 Pierre13

Pierre13

    Godlike Member

  • Equipe Sécurité
  • 3 789 messages

Posté 02 janvier 2018 - 04:40

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é par Pierre13, 02 janvier 2018 - 04:53 .

  • 0

#13 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 30 879 messages

Posté 02 janvier 2018 - 05:31

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... icon_wink.gif
895660aonglets.jpg
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... icon_Doute.gif

/* 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...


  • 0

#14 Wullfk

Wullfk

    Mega Power Extrem Member

  • Membres
  • 8 746 messages

Posté 03 janvier 2018 - 01:25

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. Hein36.gif

 

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.


  • 0

#15 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 30 879 messages

Posté 03 janvier 2018 - 04:41

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)... Hein36.gif
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
898804acustom.jpg
C'est encore un peu criard, mais je sais comment ajuster les couleurs... sourire116.gif

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 !


  • 0

#16 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 30 879 messages

Posté 03 janvier 2018 - 08:44

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

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ù ?


  • 0

#17 Wullfk

Wullfk

    Mega Power Extrem Member

  • Membres
  • 8 746 messages

Posté 03 janvier 2018 - 08:52

Re,

 

Je vais ajouter ce paramétrage à mon article.

 

Merci pour le retour.

 

@+ sourire116.gif

 

[edit] voila c'est fait


Modifié par Wullfk, 03 janvier 2018 - 09:01 .

  • 0

#18 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 30 879 messages

Posté 03 janvier 2018 - 09:01

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


  • 0

#19 Wullfk

Wullfk

    Mega Power Extrem Member

  • Membres
  • 8 746 messages

Posté 03 janvier 2018 - 09:28

OK c'est fait


  • 0

#20 Dylav

Dylav

    Modérateur

  • Modérateur [Dylav]
  • 30 879 messages

Posté 03 janvier 2018 - 11:11

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... icon_rolleyes.gif

 
 
 


  • 0









Sujets similaires :     x