Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
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.
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)
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]
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
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]
/* 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)
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
/* 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...
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
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)
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
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+
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