Firefox

Firefox 81 – Tableiste mehrreihig unten

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

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

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

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 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:

Firefox CSS Code

Die Werte bzw. Farben können beliebig verändert werden.

9,10 EUR
AVM FRITZ!WLAN Mesh Repeater 1200 (Zwei Funkeinheiten: 5 GHz (bis zu 866 MBit/s), 2,4 GHz (bis zu 400 MBit/s), 1x Gigabit-LAN, deutschsprachige Version)
  • WLAN Mesh: automatische Zusammenlegung der eingesetzten FRITZ!-Produkte zu einem intelligenten WLAN-Netz mit optimaler Leistung, kompatibel zu allen gängigen WLAN-Routern
  • Mehr WLAN-Reichweite für alle verbundenen Geräte, superschnelle Übertragungen mit WLAN AC (886 MBit/s) und höchste Reichweite mit WLAN N (400 MBit/s)

Damit man später noch genau weiß was der jeweilige CSS Code bedeutet, sollte man sich über dem CSS – Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code bzw. seine Funktion hat.

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:

Firefox Tableiste mehrreihig

Es werden jetzt 2 Reihen ohne zu scrollen angezeigt.

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 angezeigt.

Hinweis:
Hier hatte ich mal beschrieben, was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Vorteil dadurch, es ist alles viel übersichtlicher, und man findet schneller mal etwas wieder.

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

(Diese Datei wird für optische Änderungen an Webseiten, bzw. allen Firefox Seiten die mit about beginnen benötigt)

 

Auch interessant:



Auf diese Seite sind Amazon-Links enthalten. Als Amazon-Partner Verdienen wir an qualifizierten Verkäufen, falls Du auf einen entsprechenden Amazon Link klickst.
Haben Sie Fragen zu diesen Artikel oder generell zu Windows oder Computer? Dann wendet euch an unserem Forum

Ähnliche Artikel

Schaltfläche "Zurück zum Anfang"