Couleur des onglets

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : Mori, myahoo, jpj, nico@nc

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Couleur des onglets

Message par vinces » 10 sept. 2019, 10:35

Il y a quelque temps j'avais créé un userChrome.css pour diverses petites modifs avec des lignes de codes trouvé ici et là, ça fonctionnait bien mais depuis quelques versions de FF certaines lignes de code sont inopérantes.

Le positionnement de la barre des onglet dessous fonctionne bien donc le userchrome est bien pris en compte (je n'ai pas de usercontent)

Couleurs des onglets

Code : Tout sélectionner

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: 009900; !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
.tabbrowser-tab[unread] .tab-label{
color: red; !important;
/*font-weight: bold; !important;*/
font-style: italic !important;
Userchrome complet, il y a peut-etre des incohérences et des lignes a ?

Code : Tout sélectionner

/* Ligne obligatoire */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Fin de ligne obligatoire */



@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
	/* set to '0', if no menubar is used */
	#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 18px !important;
	}
	/* set to '0', if no menubar is used */
	#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 34px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
	  top: 8px !important;
	}
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 8px !important;
	}
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-buttonbox-container {
	  display: none !important;
	}
  }
  @media not all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: -8px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
	background-color: Highlight !important;
	color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;

/* Coins 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: 10px !important;
border-top-right-radius: 10px !important; } 

/* Supprimer onglet lorsqu'une seule page est ouverte */
#tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; }
#tabbrowser-tabs tab { height: var(--tab-min-height); }
#tabbrowser-tabs tab:first-child:last-child { display: none !important; }

/* Supprimer la barre haute de l'onglet actif */
#TabsToolbar .tabbrowser-tab .tab-line {visibility: hidden}

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: 009900; !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
.tabbrowser-tab[unread] .tab-label{
color: red; !important;
/*font-weight: bold; !important;*/
font-style: italic !important;


Avatar du membre
pepersan
Tyrannosaurus Rex
Messages : 2142
Enregistré le : 31 janv. 2017, 10:57

Re: Couleur des onglets

Message par pepersan » 10 sept. 2019, 18:57

Bonjour

voir ici : viewtopic.php?f=13&t=141630
Firefox 71.0 - W 7

Pour mettre en [Résolu] éditer le premier message du post, en cliquant sur le crayon blanc dans un carré bleu, modifier le titre, en y ajoutant [Résolu]

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 11 sept. 2019, 00:23

Merci de ta réponse mais mon userchrome est bien pris en charge par FF (j'ai bien les onglets en dessous telque les lignes de code d'userchrome le demande) le soucis est ailleurs

A noter que lors de la mise a jour vers FF69 sur mon portable s'est faite intervention de ma part pour la prise en compte d' userchrome alors que sur mon PC de bureau, j'ai du activer "toolkit.legacyUserProfileCustomizations.stylesheets" manuellement

Avatar du membre
pepersan
Tyrannosaurus Rex
Messages : 2142
Enregistré le : 31 janv. 2017, 10:57

Re: Couleur des onglets

Message par pepersan » 12 sept. 2019, 10:59

Firefox 71.0 - W 7

Pour mettre en [Résolu] éditer le premier message du post, en cliquant sur le crayon blanc dans un carré bleu, modifier le titre, en y ajoutant [Résolu]

Freddy
Lézard à collerette
Messages : 370
Enregistré le : 15 nov. 2009, 11:37

Re: Couleur des onglets

Message par Freddy » 13 sept. 2019, 14:18

Bonjour,

D'après mes essais, c'est ok avec ces ptites modifs:

Code : Tout sélectionner

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: #009900 !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
#TabsToolbar .tabbrowser-tab[pending] .tab-label{
color: red !important;
/*font-weight: bold !important;*/
font-style: italic !important;
}
en plus du nom du sélecteur d'attribut pour la deuxième règle (pending), j'ai corrigé:
-pas de ; après la valeur de la propriété si suivi de "!important;"
-oubli du # pour la valeur de la couleur en hexa.
-oubli du } pour la deuxième règle (mais je pense que c'est un oubli de ton copier/coller)

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 13 sept. 2019, 20:47

J'ai apporté les modifs proposé mais sans résultat, je pense que je dois avoir un soucis ailleurs

Freddy
Lézard à collerette
Messages : 370
Enregistré le : 15 nov. 2009, 11:37

Re: Couleur des onglets

Message par Freddy » 14 sept. 2019, 14:57

Dans ton userChrome complet, il manque une } pour la fin de règle juste avant /* Coins arrondi des onglets */
/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
margin-top: unset !important;
}

/* Coins arrondi des onglets */

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 14 sept. 2019, 23:13

Là, j'ai une petite amélioration, l'onglet actif est en vert, mais les onglets non lu sont toujours de la même couleur, alors qu'ils devraient etre en rouge.

Ce qui fonctionne actuellement dans mon userchrome
- La barre des onglets en dessous
- les coins arrondis des onglets
- l'onglet actif en vert

Donc seule une partie du user chrome est pris en compte

JLR38
Lézard à collerette
Messages : 248
Enregistré le : 16 nov. 2012, 19:31

Re: Couleur des onglets

Message par JLR38 » 15 sept. 2019, 13:34

Bjr
Pour simplifier les choses utilise
ColorfulTabs
Que tu trouves dans les addon's extensions de Firefox
https://addons.mozilla.org/fr/firefox/a ... orfultabs/
Cord.
JLR38
JLR38

Freddy
Lézard à collerette
Messages : 370
Enregistré le : 15 nov. 2009, 11:37

Re: Couleur des onglets

Message par Freddy » 15 sept. 2019, 14:40

Chez moi tout est ok avec toutes les modifs faites, soit avec un userChrome complet suivant:

Code : Tout sélectionner

/* Ligne obligatoire */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Fin de ligne obligatoire */



@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
	/* set to '0', if no menubar is used */
	#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 18px !important;
	}
	/* set to '0', if no menubar is used */
	#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
	  margin-top: 34px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
	  top: 8px !important;
	}
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 8px !important;
	}
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-buttonbox-container {
	  display: none !important;
	}
  }
  @media not all and (-moz-windows-compositor) {
	#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: -8px !important;
	}
	#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
	  top: 0px !important;
	}
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
	background-color: Highlight !important;
	color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Coins 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: 10px !important;
border-top-right-radius: 10px !important; } 

/* Supprimer onglet lorsqu'une seule page est ouverte */
#tabbrowser-tabs, #tabbrowser-tabs arrowscrollbox { min-height: 0 !important; }
#tabbrowser-tabs tab { height: var(--tab-min-height); }
#tabbrowser-tabs tab:first-child:last-child { display: none !important; }

/* Supprimer la barre haute de l'onglet actif */
#TabsToolbar .tabbrowser-tab .tab-line {visibility: hidden}

/* Couleurs police de l'onglet actif (vert) */
#TabsToolbar .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: #009900 !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }


/* Apparence des onglets non lus */
#TabsToolbar .tabbrowser-tab[pending] .tab-label{
color: red !important;
/*font-weight: bold !important;*/
font-style: italic !important;
}
A rappeler aussi, au cas où, que la "ligne obligatoire" (au tout début) n'est plus du tout conseillé.
vinces a écrit :
14 sept. 2019, 23:13
Là, j'ai une petite amélioration, l'onglet actif est en vert, mais les onglets non lu sont toujours de la même couleur, alors qu'ils devraient etre en rouge.
on est bien d'accord que d'après ton code, pour les onglets non lus ce n'est que le texte qui est rouge...
JLR38 a écrit :
15 sept. 2019, 13:34
Bjr
Pour simplifier les choses utilise
ColorfulTabs
Que tu trouves dans les addon's extensions de Firefox
https://addons.mozilla.org/fr/firefox/a ... orfultabs/
Cord.
JLR38
Je pense que ça ne rempli pas le même rôle que ce qui est souhaité.

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 15 sept. 2019, 18:23

J'ai essayer de tester le userchrome sur un nouveau profil (création du profil et copier/coller du répertoire chrome dans celui-ci) et surprise le fichier ne semble pas du tout pris en compte

J'avais oublier d'activer toolkit.legacyUserProfileCustomizations.stylesheets

Mais le resultat est le même que mon profil,; incomplet

GlopGlop
Varan
Messages : 1213
Enregistré le : 05 juil. 2006, 15:54

Re: Couleur des onglets

Message par GlopGlop » 15 sept. 2019, 18:51

Bonjour,
Freddy a écrit :
15 sept. 2019, 14:40
vinces a écrit :
14 sept. 2019, 23:13
Là, j'ai une petite amélioration, l'onglet actif est en vert, mais les onglets non lu sont toujours de la même couleur, alors qu'ils devraient etre en rouge.
on est bien d'accord que d'après ton code, pour les onglets non lus ce n'est que le texte qui est rouge...
Teste de l'userChrome complet sur Firefox portable 69.0
Les onglets non lus toujours de la même couleur et pas de texte en rouge.

Après une très, très ... longue recherche et de bidouillage (aucune connaissance en CSS)
Voici les modifications faites et qui fonctionnent.
- Couleur de l'onglet actif (vert), couleur du texte (jaune)
- Couleur des onglets inactif (rouge), couleur du texte (noir)

Code : Tout sélectionner

/* Couleurs de l'onglet actif (vert) et police (jaune)  */
#TabsToolbar .tabbrowser-tab[selected] .tab-content {
background-color: green !important;
color: yellow !important;
font-weight: bold !important;
font-style: normal !important;
font-size: 12px !important; }

/* Couleur des onglets non lus (rouge) */
.tabbrowser-tab:not([selected]) {
  background-color: red !important;
}
/* Couleur du texte des onglets non lus */
#TabsToolbar .tabbrowser-tab{
color: black !important;
font-style: italic !important;
}
Image

Tu changeras les couleurs comme tu le souhaite.
A+ :wink:
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 15 sept. 2019, 21:56

Ca fonctionne merci, mais le soucis c'est qu'une fois lu les onglets restent rouges, FF ne fait donc pas la différence entre les onglets lus et ceux non lus, hors le but c'est bien de faire la différence entre ces deux types d'onglet

GlopGlop
Varan
Messages : 1213
Enregistré le : 05 juil. 2006, 15:54

Re: Couleur des onglets

Message par GlopGlop » 16 sept. 2019, 15:50

Bonjour,
vinces a écrit :
15 sept. 2019, 21:56
le soucis c'est qu'une fois lu les onglets restent rouges, FF ne fait donc pas la différence entre les onglets lus et ceux non lus
Si je comprend ta demande:
Tu veux que les onglets rouges passe au vert et reste au vert quand tu les as affichés (cliquer dessus/lus), seul ceux que tu n'as pas affichés resteront en rouge. :?:
Attends que Freddy passe par la, ou quelqu'un d'autre qui maitrise le CSS
A+ :wink:
Vous venez chercher de l'aide, alors aider les autres, penser à marquer votre message en [Résolu]
Comment ?, Explication pour mettre votre sujet en [Résolu]: clic sur ce lien: Mettre en [Résolu]

vinces
Lézard à collerette
Messages : 214
Enregistré le : 05 nov. 2003, 01:16

Re: Couleur des onglets

Message par vinces » 16 sept. 2019, 18:38

GlopGlop a écrit :
16 sept. 2019, 15:50

Si je comprend ta demande:
Tu veux que les onglets rouges passe au vert et reste au vert quand tu les as affichés (cliquer dessus/lus), seul ceux que tu n'as pas affichés resteront en rouge. :?:
Je souhaiterai que les onglets non lus aient une couleur puis qu'une fois lu, cette couleur disparaisse et une autre couleur pour l'onglet actif (la couleur peut ne concerner que le texte).

J'ai essayer plusieurs combinaisons avec .tabbrowser-tab([unread] mais ça ne fonctionne pas, il doit me manquer quelque chose

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 2 invités