In der aktuellen Firefox Version 81 hat sich einiges verändert, darum hier ein aktueller neuer CSS Code für eine mehrreihige Tableiste unten. User die dafür schon einen CSS Code genutzt hatten, brauchen diesen dann nur gegen den alten Code auszutauschen.
Firefox 81 – Tableiste mehrreihig unten
userChrome.css und userContent.css erstellen
Hinweis:
Wer zum ersten mal eine dieser Dateien benutzt, der muss zusätzlich in about:config den Wert:
toolkit.legacyUserProfileCustomizations.stylesheets
auf true umschalten.
Wie das gemacht wird, hatte ich hier schon mal beschrieben:
userChrome Dateien wieder nutzen
Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen dort den selber angelegten Ordner chrome.
Dann im Ordner chrome die userChrome.css Datei öffnen.
In diese Datei tragen wir nun folgenden CSS Code ein:
/*Tableiste mehrreihig unten*/ @-moz-document url(chrome://browser/content/browser.xhtml) { /* Feste Tabbreite */ .tabbrowser-tab:not([pinned]) { min-width: 150px !important; max-width: 150px !important; } /* Activer Tab schwarze Schrift */ .tab-label[selected]{ color: black !important; } /* Inaktiver Tab schwarze Schrift */ .tab-label:not([selected]) { color: black !important; } .tab-close-button, #tabs-newtab-button { color: black !important; } #titlebar { -moz-box-ordinal-group: 2!important; } /*Abstand nach oben – unten, und Höhe der Tableiste*/ #titlebar { margin-top: -4px !important; margin-bottom: 0px; } /* Farbe der Tableiste hellgrau */ #titlebar { appearance: none !important; background: #eeeeee !important; } #toolbar-menubar { position: fixed; display: inline-flex; } [sizemode=“maximized“]:not([tabsintitlebar=“true“]) #toolbar-menubar, [sizemode=“normal“] #toolbar-menubar { top: 1px; } [sizemode=“maximized“] #toolbar-menubar { top: 8px; } #main-window[tabsintitlebar=“true“] #navigator-toolbox:not([inFullscreen=“true“]) { border-top: solid 39px transparent !important; } #main-window:not([tabsintitlebar=“true“]) #navigator-toolbox:not([inFullscreen=“true“]) { border-top: solid 34px transparent !important; } [tabsintitlebar=“true“] #navigator-toolbox { -moz-window-dragging: drag; } #navigator-toolbox:not([style^=“margin-top:“])[style=““][inFullscreen=“true“] #window-controls, [tabsintitlebar=“true“] .titlebar-buttonbox-container { display: block; position: fixed; right: 0; } [tabsintitlebar=“true“][sizemode=“normal“] .titlebar-buttonbox-container { top: 1px; } [tabsintitlebar=“true“][sizemode=“maximized“] .titlebar-buttonbox-container { top: 8px; } #navigator-toolbox:not([style^=“margin-top:“])[style=““][inFullscreen=“true“] #window-controls { top: 0; } #navigator-toolbox[inFullscreen=“true“] #nav-bar { padding-right: 109px !important; } box[class=“scrollbox-clip“][orient=“horizontal“], tabs > arrowscrollbox { display: block; } /* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */ scrollbox[part][orient=“horizontal“] { display: flex; flex-wrap: wrap; max-height: calc(var(–tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */ overflow-x: hidden; overflow-y: auto; } tabs tab[fadein]:not([pinned]) { flex-grow: 1; } tabs tab,.tab-background { height: var(–tab-min-height); overflow: hidden; } tab > .tab-stack { width: 100%; } box[class=“scrollbox-clip“][orient=“horizontal“] { -moz-window-dragging: no-drag; } hbox.titlebar-spacer, #alltabs-button, tabs tab:not([fadein]) { display: none; } }
(Dazu am besten den Text kopieren, und in die userChrome.css wieder einfügen)
Und so sieht der Code dann in der userChrome.css Datei aus:
Die Werte bzw. Farben können beliebig verändert werden.
Firefox 81 – Tableiste mehrreihig unten
Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.
Und so sieht das dann mit der mehrreihigen Tableiste unten aus:
Es werden jetzt 2 Reihen ohne zu scrollen angezeigt.