Mit Einführung der Firefox Version 81 wurden für das Verschieben der Tableiste nach unten diverse Bezeichnungen verändert. Aus diesem Grund brauchen Nutzer eines CSS Codes für die Tableiste unten jetzt einen neuen CSS Code.
Firefox 81 – Tableiste nach unten auch im privaten Fenster
Hinweis:
Wer schon einen CSS Code dafür benutzt hat, der braucht ihn nur gegen diesen aktuellen auszutauschen.
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
So sieht das standardmäßig mit der Tableiste im Firefox aus:
Und hier nun die Erklärung, wie man das mit dem CSS – Code dann machen muss.
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 unten für normales Fenster*/ @-moz-document url(chrome://browser/content/browser.xhtml) { #TabsToolbar { position: absolute !important; display: flex !important; bottom: 0px !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*=“toolbar“]) #navigator-toolbox { padding-bottom: var(–tab-min-height) !important; } :root { –tab-min-height: 30px !important; } :root #tabbrowser-tabs { –tab-min-height: 30px !important; } /*Feste Breite der Tabs*/ .tabbrowser-tab:not([pinned]) { -moz-box-flex: 0!important; width: 180px!important; } /*Damit wird der Tabtext am Ende nicht ausgeblendet*/ .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]), .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) { mask-image: none !important; } } /*Tableiste unten im privaten Fenster*/ /*Lila Icon oben rechts*/ #main-window[privatebrowsingmode=temporary] #PanelUI-menu-button.toolbarbutton-1 stack.toolbarbutton-badge-stack { padding-left: 30px !important; background: url(„chrome://browser/skin/private-browsing.svg“)no-repeat !important; } #main-window[privatebrowsingmode=temporary] .private-browsing-indicator { display: none !important; } /*Activer Tab lila Hintergrund*/ #main-window[privatebrowsingmode=temporary] #toolbar-menubar:not([autohide=“true“]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background[selected], #main-window[privatebrowsingmode=temporary]:root:not([tabsintitlebar]) .tab-background[selected], #main-window[privatebrowsingmode=temporary] :root[extradragspace] .tab-background[selected]{ background: indigo !important; } /*Activer Tab weiße Schrift*/ #main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected]{ color: white !important; padding-top: 6px !important; } /*Inaktiver Tab Hintergrund blasser*/ #main-window[privatebrowsingmode=temporary] .tab-background:not([selected]) { opacity: .6 !important; background: indigo !important; padding-top: 6px !important; } /*Inaktiver Tab weiße Schrift*/ #main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([selected]) { color: white !important; } #main-window[privatebrowsingmode=temporary] #TabsToolbar { position: absolute !important; display: flex !important; bottom: 0px !important; width: 100vw !important; } #main-window[privatebrowsingmode=temporary] .tab-line[multiselected], #main-window[privatebrowsingmode=temporary] .tab-line[selected=“true“] { display: none !important; } #main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([visuallyselected=“true“]), #main-window[privatebrowsingmode=temporary] .tabbrowser-tab[visuallyselected=“true“] { margin-top: -4px !important; max-height: 40px !important; } #main-window[privatebrowsingmode=temporary] #tabbrowser-tabs { width: 100vw !important; } #main-window[privatebrowsingmode=temporary]:not([chromehidden*=“toolbar“]) #navigator-toolbox { padding-bottom: var(–tab-min-height) !important; } /*Höhe der Tabs im privaten Fenster*/ #main-window[privatebrowsingmode=temporary]:root { –tab-min-height: 35px !important; } #main-window[privatebrowsingmode=temporary]:root #tabbrowser-tabs { –tab-min-height: 35px !important; } /*Feste Breite der Tabs im privaten Fenster*/ #main-window[privatebrowsingmode=temporary] .tabbrowser-tab:not([pinned]) { -moz-box-flex: 0!important; width: 180px!important; } /*Damit wird der Tabtext am Ende nicht ausgeblendet*/ #main-window[privatebrowsingmode=temporary] .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]), #main-window[privatebrowsingmode=temporary] .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) { mask-image: none !important; }
(Dazu am besten den Text kopieren, und in die userChrome.css wieder einfügen)
Firefox 81 – Tableiste nach unten auch im privaten Fenster
Und so sieht der Code dann in der userChrome.css Datei aus:
Der Wert für die Feste Breite der Tabs kann beliebig angepasst werden.
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 verschobenen Tableiste nach unten aus:
Und so in einem privaten Fenster:
Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.
Danach noch einen Neustart vom Browser machen, und die Tableiste wird wieder standardmäßig oben angezeigt.