Position des onglets [Résolu]

[Robert Mitchum]

Bon matin,

... 2 pages de réactions ...

Dont la majorité ont été postées une fois le sujet résolu.

... le post de Freddy serait venu rapidement et le sujet aurait été bouclé et plus lisible pour ceux que ça intéresse ...

Comme à l'accoutumée.

Bonne journée.

Ps : ceux que les mises à jour ne satisfont pas peuvent toujours se tourner vers la version ESR...

[cosmoz]

Bonojur,
qlq1 peut-il copier/coller ici le code de Freddy pour avoir la barre des onglets sous la barre du navigateur?
Je ne comprends rien à la page laissée en lien.
merci bien

[vegansound]

Bonojur,
qlq1 peut-il copier/coller ici le code de Freddy pour avoir la barre des onglets sous la barre du navigateur?
Je ne comprends rien à la page laissée en lien.
merci bien

Code : Tout sélectionner

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


:root {
  --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa);
  --tab-min-height_tnot: 32px;
  --tab_below_navigation_toolbar_bottom_padding: calc( var(--tab-min-height_tnot) + 5px );
  --tab_below_navigation_toolbar_bottom_padding_macOS: calc( var(--tab-min-height) + 8px );
  --tab_below_navigation_toolbar_toolbox_top_padding_macOS: calc(-1px + var(--tab-min-height));
}

#TabsToolbar {
  order: 100;
  color: var(--toolbar-color);
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #toolbar-menubar[inactive] ~ #nav-bar {
  padding-top: 28px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar {
  padding-inline-end: 140px;
}

#main-window[tabsintitlebar] #toolbar-menubar:not([inactive]) {
  height: 28px !important;
}

#main-window[sizemode="maximized"] #toolbar-menubar {
  margin-top: -5px !important;
}


/* move caption buttons to windows top right position */
.titlebar-buttonbox-container {
  position: fixed;
  right: 0;
  visibility: visible;
  display: block;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
  margin-top: 0px !important;
}

#main-window[tabsintitlebar][sizemode="fullscreen"] #nav-bar {
  padding-inline-end: 140px !important;
}

@media (-moz-platform: macos) {

#navigator-toolbox {
  position: relative;
  padding-bottom: var(--tab_below_navigation_toolbar_bottom_padding_macOS);
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]):not([inDOMFullscreen="true"]) #navigator-toolbox {
  padding-top: var(--tab_below_navigation_toolbar_toolbox_top_padding_macOS);
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]):not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed;
  top: 3px !important;
  right: unset;
  left: 0;
  visibility: visible;
  display: block;
}

:root[lwtheme] #titlebar {
  background-image: var(--lwt-header-image, var(--lwt-additional-images));
  background-repeat: var(--lwt-background-tiling);
  background-position: var(--lwt-background-alignment);
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #TabsToolbar .titlebar-buttonbox-container {
  top: 0;
}

#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
  height: 0px;
}
}

/* remove unneeded items */
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none;
}

/* lw themes support */
/* overrides other settings too */
:root:not([lwtheme]) #navigator-toolbox #TabsToolbar,
:root:not([lwtheme]):not([tabsintitlebar]) #TabsToolbar{
  appearance: none !important;
}

@media not (-moz-toolbar-prefers-color-scheme: dark), not (prefers-color-scheme: dark) {
	:root:not([lwtheme]) #navigator-toolbox #TabsToolbar{
	  background-image: var(--tabs_toolbar_color_tabs_not_on_top) !important;
	}
}

#nav-bar {
  box-shadow: unset !important;
}

/* remove color overlay for lw-themes */
:root[lwtheme][style*='--lwt-header-image'] :is(#nav-bar,#PersonalToolbar,#TabsToolbar){
  background: unset !important;
}

/* adjust background color */
:root[lwtheme]:not([style*='--lwt-header-image']) :is(#toolbar-menubar, #TabsToolbar) {
  appearance: none !important;
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;
}

/* Fixes for projects other settings */
/* remove application/hamburger button in titlebar and tab toolbars start padding */
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button {
  visibility: collapse;
}

/* override code inside appbutton in titlebar code */
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[uidensity=compact][tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar,
#main-window[tabsintitlebar]:is([sizemode="normal"],[sizemode="maximized"],[sizemode="fullscreen"]) #navigator-toolbox #TabsToolbar {
  padding-inline-start: 0px !important;
  margin-inline-start: 0px !important;
}

/* remove restored border between navigation toolbar and tabs toolbar */
:root:not([lwtheme]) #nav-bar{
  box-shadow: unset !important;
}

/* notification position */
#tab-notification-deck {
  position: absolute;
  display: block;
  bottom: calc( -2 * var(--tab_below_navigation_toolbar_bottom_padding) + 8px );
  width: 100vw;
}

/* Fx 105+ */
:root:not([privatebrowsingmode=temporary]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
:root[privatebrowsingmode=temporary] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) + #tabbrowser-tabs {
  border-inline-start: 0px solid color-mix(in srgb, currentColor 25%, transparent) !important;
}

:root:not([privatebrowsingmode=temporary]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs:not([overflow]) {
  padding-inline-start: 0 !important;
  margin-inline-start: 0 !important;
}

/* Fx 106+ */
#private-browsing-indicator-with-label {
  display: none !important;
}

@media (-moz-platform: macos) {
#main-window[tabsintitlebar] #TabsToolbar {
  padding-inline-end: 0px !important
}

/* draggable window */
#main-window[tabsintitlebar] toolbox#navigator-toolbox{
  -moz-window-dragging: drag !important;
}

:is(#TabsToolbar, #nav-bar, #PlacesToolbar) {
  -moz-window-dragging: no-drag !important;
}	
}

/* Fx 126+ */
:root[lwtheme] #nav-bar {
  border-top: 0 !important;
}

[cosmoz]

marche pas chez moi..

[eddynat]

Avez-vous créé un fichier .css dans le dossier Chrome de votre navigateur firefox version 103 et avoir ensuite redémarré le navigateur ?

[cosmoz]

oui.
C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles, dossier chrome,fichier userChrome.css
et dans C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles\er9gnl9l.default-esr , dossier chrome,fichier userChrome.css

[eddynat]

Votre fichier userChrome devrait contenir tout le script mentionné via un copier/coller et sauvegardé comme tel ensuite.

ps: Si ça ne fonctionne pas, Il y aurait peut être lieu à réinstaller Firefox version 133.

[cosmoz]

a mache pa

[cosmoz]

re,
qlq1 d'aimable et compétent peut-il me bricoler un code pour avoir les onglets dessous? Celui de Freddy ne fonctionne pas chez moi.

[Bob49]

Salut

Si cela ne fonctionne pas chez toi et mais bien chez les autres, c'est qu'il y a un problème dans ton fichier !

Tu devrais mettre à disposition fichier (sans rien de personnel dedans), ici, cela permettrait à quelqu'un (peut-être Freddy) d'y jeter un coup d’œil.
En utilisant un site de partage de fichier... https://www.filemail.com/fr par ex.

[cosmoz]

j'ai copié/collé le fichier donné par vegansound plus haut sur cette page dans un fichier userChrome.css dans un dossier chrome dans C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles\chrome en prenant le lien "plus d'infos de dépannage"
https://www.filemail.com/d/kywtbdddqjenzxx

[Garou]

Bonjour,
Peut être et à vérifier (si il n'y avait pas de fichier userContent.css ou userChrome.css avant)

La prise en charge des fichiers de personnalisation "userContent.css et userChrome.css" sera désactivée par défaut avec l'arrivée de Firefox 69 !
Donc pour toutes personnes qui voudront utiliser ses fichiers, elles devront modifier cette préférence et au cas où, les bénévoles devront penser à les avertir...

• Taper about:config dans la barre d'adresse, puis "entrée" et promettre...
  
• Rechercher toolkit.legacyUserProfileCustomizations.stylesheets , puis effectuer un double-clic dessus pour la passer en true

Comme en tant normal pour que l'ajout de code soit pris en compte, il faut relancer Firefox.

[Bob49]

C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles\chrome

Pas bon, ça ne donnera rien à ce niveau !

C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles\er9gnl9l.default-esr

Bon dans ce dossier "profil", si tu utilises la version ESR.

Sinon, je n'ai plus le temps de vérifier le contenu de ton fichier... bonne fin de journée.

[Freddy]

salut,

oui y a une petite ambiguïté par rapport à ce post

oui.
C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles, dossier chrome,fichier userChrome.css
et dans C:\Users\moi\AppData\Roaming\Mozilla\Firefox\Profiles\er9gnl9l.default-esr , dossier chrome,fichier userChrome.css

Tu as les deux versions de fx ou seulement fx esr

Parce que, je m'en rappelai pas mais j'ai retrouvé un esr qui a déjà dû me servir à tester ça, bref, apparemment avec la dernière mise à jour esr y a pas besoin de changement du fichier css, chez moi ça fonctionne toujours avec ce fichier:

Code : Tout sélectionner

/* Onglets en dessous de la barre d'adresse */

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column } }

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

Et sinon voir aussi à vérifier comme il t'a été rappelé

Bonjour,
Peut être et à vérifier (si il n'y avait pas de fichier userContent.css ou userChrome.css avant)

La prise en charge des fichiers de personnalisation "userContent.css et userChrome.css" sera désactivée par défaut avec l'arrivée de Firefox 69 !
Donc pour toutes personnes qui voudront utiliser ses fichiers, elles devront modifier cette préférence et au cas où, les bénévoles devront penser à les avertir...

• Taper about:config dans la barre d'adresse, puis "entrée" et promettre...
  
• Rechercher toolkit.legacyUserProfileCustomizations.stylesheets , puis effectuer un double-clic dessus pour la passer en true

Comme en tant normal pour que l'ajout de code soit pris en compte, il faut relancer Firefox.

[mazda1]

.......
Rechercher toolkit.legacyUserProfileCustomizations.stylesheets ,

merci du rappel, car si c'était OK pour mon Firefox "standard" ça ne l'était pas pour la version -esr et c'est pour ça que la solution proposée marchait dans un cas et pas dans l'autre.