Astuces de personnalisation de Firefox Quantum par CSS

[Wullfk]

Bonjour,

À défaut d'une extension comme Tab Mix Plus et/ou Classic Theme Restorer

Voila comment on peut personnaliser les onglets sur Firefox 57

Ligne de code à mettre dans le fichier "userChrome.css" lui même dans le dossier "chrome"
Le fichier et le dossier n'existant pas par défaut ils faut les créer dans le profile Firefox.

Sur Windows = C:\Users\<name>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxx.default
Sur Linux Ubuntu = /home/<name>/.mozilla/firefox/xxxxxxx.default

/* Onglet Actif Bleu */
.tab-background[selected=true] {
background-attachment: none!important;
background-color: blue!important;
background-image: none!important;
}

/* Croix Rouge sur onglet actif */
.tab-close-button {
color: red!important;
}

/* Croix de fermeture sur les onglets inactifs */
.tab-close-button:not([selected]) {
color: white!important;
}

 

Autre exemple:

 

/* Croix de fermeture onglet */
.tab-close-button {
color: red!important;
background-color: yellow!important; }

Ce qui donne un X rouge dans un onglet jaune.

Bien entendu vous pouvez modifier la/les couleurs en fonction du thème que vous utilisez

testé et adopté sur ma config Windows 10

 

[edit] plutôt que de faire un sujet pour chaque astuces de personnalisions de Firefox Quantum, je renomme ce post en Astuces personnalisations Firefox Quantum par CCS

ça permettra à chacun de pouvoir ajouter ces propres découvertes et propositions.

[Wullfk]

Mettre les onglets sous la barre d'adresse avec barre personnelle au dessus des onglets

 

J'ai pu constater que ce réglage est très fortement réclamé par de nombreux utilisateurs.

 

/* Onglets sous la barre d'adresse et barre personnelle au-dessus des onglets */
#TabsToolbar {-moz-box-ordinal-group: 2}
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000 !important; }

 

Simplement testé, car j'ai toujours utilisé le réglage par défaut de Firefox.

 

Masquer le texte des favicon de la barre personnelle

 

/* Masquer texte favicon de la barre personnelle */
#personal-bookmarks .toolbarbutton-text {
display: none !important; }

Malheureusement si vous avez comme moi créé de nombreux dossiers dans votre barre personnelle, le nom de ces dossiers n’apparaissent pas même au survol de la souris.

 

À contrario si vous n'avez que des adresses de sites, ce réglage est parfait.

 

Si il y a des spécialistes en CSS n'hésitez pas à proposer une solution (si il y en a une) pour remédié à ce problème

 

Merci d'avance

 

[edit] j'ai trouvé la solution en consultant le lien suivant : https://www.reddit.com/r/firefox/comments/7d33uv/is_there_any_way_to_achieve_an_icononly_bookmarks/

 

détails de ce que j'ai adapté et utilisé:

 

/* Masquer texte favicon uniquement pour les sites */
#bookmarks-ptf toolbarbutton.bookmark-item[image]:not([image=""]):not([container=true]) .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container=true]) .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not([container=true]) .toolbarbutton-text-shadow {
display: none !important;
}

 

/* Adjustement écart entre favicon barre personnelle */
#bookmarks-ptf toolbarbutton.bookmark-item .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-text-shadow {
padding-left: 2px !important;
}

 

Modifier la taille des favicon de la barre personnelle

/* Taille favicon barre personnelle */
#bookmarks-ptf toolbarbutton.bookmark-item .toolbarbutton-icon,
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
display: block !important;
width: 20px !important;
height: 20px !important;
padding: 0px !important;
margin: 0px !important;
}

 

Certaines valeurs seront à ajuster celons vos préférences, par exemple moi j'ai testé une taille de favicon de 20px

 

Résultats en images

 

Barre personnelle sans affichage des textes des favicon (dossiers inclus) taille des favicon par défaut je suppose que c'est 16px - Le survol des dossiers n'affiche pas leur nom.

 

Barre personnelle avec nom des dossiers apparent et celui des sites masqués, taille des favicon = 20px

 

 

Certes ça ne vaut pas ce que permettait TabMixPlus et Classic Theme Restorer, mais c'est toujours mieux que rien.

Modifié le 28 novembre 2017 par Wullfk

[Wullfk]

Pour ceux qui préfèrent les onglets arrondis comme sur Firefox 56.0.2

 

/* arrondi des onglets */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
}

Si vous voulez des coins plus ou moins arrondis, changez le nombre de pixels = 8px par 6px (arrondi très léger) ou 10, 12px (arrondi plus marqué).

 

Autre possibilité:

/* Arrondir uniquement les coins de l'onglet actif */
.tab-background {
border-radius: 6px6px 0px 0px !important;
border-image: none !important; }
.tab-line {
display: none; }

 

Modifier uniquement les 2 premières valeurs de "border-radius" pour accentuer ou diminuer l'effet de l'arrondi.

 

J'ai seulement testé ces deux types de réglages, car à titre personnel, les nouveaux onglets carrés me convienne parfaitement.

Modifié le 28 novembre 2017 par Wullfk

[Wullfk]

Bonsoir,

 

Icônes différentes pour chaque dossier dans la barre personnelle

 

En premier lieu créer un dossier "favicon" dans le dossier "chrome" du profile Firefox et mettez y les icônes que vous souhaitez associer à vos dossiers.

/* Attribuer un "label" aux dossiers de la barre personnelle */
.bookmark-item[container=true][label=News]
{
list-style-image: url("file:/home/<name>]/.mozilla/firefox/xxxxxx.default/chrome/favicon/<name>.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}

Modifier le "label" = le nom de votre dossier (dans l'exemple c'est "News")
Indiquer le chemin ou se trouve le favicon à attribuer au premier dossier, copier/coller l'intégralité du code CSS à la suite du premier et répéter la procédure (label et icône) pour tous vos autres dossiers.

 

Note: dans mon exemple, le chemin d'accès au profile est celui existant sur Linux, pour Windows il suffit de copier/coller le chemin suivant :

 

//C:/Users/<name>/AppData/Roaming/Mozilla/Firefox/Profiles/xxxxxxx.default/favicon/<name>.png

Vous pouvez à présent utilisez sans problème le premier réglage précédemment fournis pour masque le texte des favicon de la barre personnelle.

Bien entendu le nom des dossiers s'affiche au survol de la souris.

 

Remarque: les résultats de mes tests sont différents celons la config utilisée (Windows / Linux) sur Linux tous les favicon sont bien attribuées aux dossiers respectifs, sur Windows 10 j'ai 3 favicon qui ne veulent pas s'appliquer, alors que le chemin à exactement le même que pour les autres dossiers. La raison c'est que sur Windows il ne faut pas que le nom d'un dossier dans le code CSS comporte des lettres accentuées, même chose pour le nom d'un dossier dans les marques-page.

 

Je n'ai pas essayé avec des images aux formats JPEG, ICO ou BMP. à tester...

Modifié le 28 novembre 2017 par Wullfk

[Wullfk]

Bonsoir,

 

Modifier couleur et style police de l'onglet actif en utilisant le code Hexadécimale

 

/* Couleurs police de l'onglet actif (bleu) */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background: linear-gradient(to bottom,#D6D6D6,#D6D6D6) !important;
color: #0080FF; !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }

Modifier le code couleur HEXA et le style celons ces préférences et le thème utilisé.

Code fournis par Daneel Olivaw sur PC Astuces

 

Modifier la couleur des onglets lus et non lus

 

/* Apparence des onglets lus */
.tabbrowser-tab[selected] .tab-label{
color: black; !important;
font-weight: normal !important;
font-size: 12px !important;
background-color: transparent !important; }

/* Apparence des onglets non lus */
.tabbrowser-tab[unread] .tab-label{
color: green; !important;
font-weight: bold; !important;
font-style: italic !important;
font-size: 12px !important;
background-color: lightyellow !important; }

Modifier la/les couleurs en fonction du thème utilisé.

 

Modifier la taille de la police des onglets

 

/* Taille Police Onglets */
.tab-text {
font-size: 13px !important; }

Modifier la valeur "font-size" celons ses préférences.

 

Modifier la taille des onglets

 

/* Largeur des onglets */
.tabbrowser-tab:not([pinned]) {
max-width: 200px !important; min-width: 30px !important; }
.tabbrowser-tab:not([fadein]) {
max-width: 1px !important; min-width: 1px !important; }

Modifier la première valeur "max-width" celons ses préférences ( 100, 150, 250, 300, etc...).

 

Passer le trait de l'onglet actif en dessous de l'onglet

 

/* Ligne sous onglet actif */
.tabbrowser-tab[usercontextid] .tab-line{
background-color:var(--identity-tab-color)!important; }
.tabbrowser-tab .tab-line{
margin-top: 27px !important; }

 

Ajouter un bouton à l'extrémité droite de la barre d'onglets pour permettre de voir la liste des onglets ouverts

 

/* Bouton liste des onglets à droite de la barre d'onglet */
#alltabs-button{
visibility: visible !important; }

 

Réduire ou supprimer les marges de la barre personnelle

 

Permet d'optimiser le nombre de marque-pages sur une seule ligne de la barre personnelle.

/* Réduction ou suppression marges barre personnelle */
#bookmarks-ptf toolbarbutton.bookmark-item,
#personal-bookmarks toolbarbutton.bookmark-item {
margin-left: 2px !important;
margin-right: 2px !important; }

 

Vous pouvez ajuster les deux valeurs "margin-left" et "margin-right" (0 supprime toutes marges).

 

Modifier la taille de la police de la barre personnelle

 

/* Taille Police Barre Personnelle */
#PersonalToolbar .bookmark-item {
font-size:13px !important; }

Modifier la valeur "font-size" celons ses préférences.

 

Changer la couleur des dossiers de la barre personnelle

 

/* Changer couleur dossiers Barre Personnelle */
.bookmark-item[container], treechildren::-moz-tree-image(container) { fill: blue !important; }

Remplacer la couleur celons sa préférence (red, yellow, green, black, etc...).

Modifié le 28 novembre 2017 par Wullfk

[Wullfk]

Mettre la Barre Personnelle sur plusieurs lignes

 

Pour palier à l'incompatibilité des extensions comme Roomy Bookmarks Toolbar, Multirow Bookmarks Toolbar ou Multirow Bookmarks Toolbar Plus, il existe plusieurs solutions qui fonctionnent plus ou moins bien. il existe plusieurs solutions qui fonctionnent plus ou moins bien.

 

La première solution, la plus basique consiste à ajouter le code CSS suivant :

 

/* Barre Personnelle sur 2 lignes */
#PlacesToolbarItems .box-inherit.scrollbox-innerbox
{
display:block !important;
height: 52px !important; }

La hauteur est ajustable selon ses préférences, il suffit de l'augmenter pour une 3ème, 4ème,... ligne.

Il faut que la valeur de la hauteur soit un multiple de la valeur d'une barre par défaut (26px), si on utilise 2 barres personnelles il faut mettre "height= 52px"

 

Cette solution bien qu'elle affiche deux lignes de la barre personnelle n'est pas parfaite, dans la mesure ou si le nombre de marque-pages dépasse 2 lignes, ceux figurant sur la troisième ligne ce retrouvent écrasés et illisible (sauf au survol de la souris) et ce même si on modifie la valeur "height".

 

Ceci dit elle peut suffire si le nombre de marque pages ne dépasse pas 2 lignes.

 

Deuxième solution ci-dessous qui normalement est censé effectuer un réajustement automatique en fonction du nombre de marque-pages.

 

/* Barre Personnelle sur plusieurs lignes avec réajustement automatique */
#PlacesToolbarItems
{ overflow: visible !important; }

#PlacesToolbarItems > .box-inherit.scrollbox-innerbox
{ display:block !important; }

 

Malheureusement même problème que précédemment.

 

Autre alternative, mais cette fois avec l'affichage de la 2 lignes de la barre personnelle uniquement au survol de la souris.

 

/* Afficher toutes les lignes de la barre personnelle seulement au survol de la barre */
#PlacesToolbarItems > .box-inherit.scrollbox-innerbox
{
display:block !important;
height: 26px !important;
-moz-transition-duration: 200ms !important; }

#PlacesToolbarItems:hover > .box-inherit.scrollbox-innerbox
{
display:block !important;
height: 52px !important; /*valeur pour 2 lignes (à modifier si besoin)*/
-moz-transition-duration: 300ms !important;
-moz-transition-delay: 500ms !important; }

Le délais d'affichage est là pour éviter d'afficher la barre lorsque l'on effectue un "survol en passant" (pour aller ailleurs), ce délais est réglable, tout comme l'effet de transition.

 

Malheureusement là aussi on a le même problème si le nombre de marque-pages dépasse 2 lignes.

 

Troisième solution qui cette fois fonctionne correctement, quelque soit le nombre de lignes et de marque pages dans la barre personnelle.

 

/* Afficher Barre Personnelle sur plusieurs lignes */
#personal-bookmarks {
display: block;
}

#personal-bookmarks #PlacesToolbar {
display: block;
min-height: 0px;
overflow-x: hidden;
overflow-y: auto;
max-height: 999px;
}

#personal-bookmarks #PlacesToolbar > hbox {
display: -moz-stack !important;
left: 0px;
right: 0px;
width: 100%;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
overflow-x: visible;
overflow-y: visible;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
display: block;
}

#personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important;
}

#personal-bookmarks #PlacesToolbar .chevron{
display: none;
}

#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: hidden;
overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed=true],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 2px;
padding-bottom: 2px;
/*margin-left: -4px !important;
padding-right: 9.5px !important;*/
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled=true]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open=true] {
padding-top: 2px !important;
padding-bottom: 2px !important;
/*-moz-padding-start: 4px;
-moz-padding-end: 2px;*/
}

#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display: inline;
text-shadow: none !important;
border-left: 3px solid ThreeDShadow !important;
border-right: 3px solid ThreeDHighlight !important;
vertical-align: middle;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) {
max-height: 999px !important;
}

 

Certains paramètres sont ajustables en modifiant leurs valeurs et/ou en dé-commentant certaines lignes de code (il suffit de supprimer le /* et */ de la ligne concernée).

Modifié le 28 novembre 2017 par Wullfk

[Smoking]

Bonjour, le passage à Firefox 57 à supprimé les Thèmes complets

du style Aeon, Firefox, 2, 3 etc qui permettaient de mettre des icones colorées dans la barre d'outils.

Les thèmes intégrés ne font que colorer la zone de toutes les barres.

Je ne trouve pas d'équivalents, quelqu'un a-t-il une information sur un programme dans Chrome ou une date de sortie d'un tel Addon?

Merci

[Wullfk]

Bonsoir et bienvenue sur Zebulon,

 

J'ai rien en stock à te proposer

[Smoking]

Merci Wullfk, il y aura peut-être des amélioration dans ce sens à l'avenir,

ca fait un peu tristounet pour le moment.

[Wullfk]

Bonjour,

 

Encore une personnalisation de Firefox Quantum

 

Modifier la couleur de fond et/ou la croix du bouton nouvel onglet

 

Pour différencier l'aspect du bouton nouvel onglet

 

/* Couleur de la croix et du fond du bouton nouvel onglet */
.tabs-newtab-button {
color: red !important;
background: lavender !important; }

 

Dans l'exemple ci-dessus la croix est rouge et le fond du bouton est couleur "lavande" (violet), modifier les couleurs celons ces préférences et le thème utilisé.

 

autre code:

 

/* Couleur de la croix et du fond bouton nouvel onglet */
.tabs-newtab-button {
color: blue !important;
background-color: aqua !important; }

Choisir la/les couleurs celons ses préférences, dans l'exemple la croix est bleu et le fond bleu aquatique (ou bleu ciel), on peut ajouter un peu de transparence, en définissant la couleur au format RGBA (Red, Green, Blue, Alpha), exemple: background-color: rgba(60%,70%,45%, 0.6) qui correspond à un fond vert olive, la dernière valeur correspond au degrés de transparence.

Modifié le 16 décembre 2017 par Wullfk