Internet

Firefox Mehrzeilige Tableiste




In die Tableiste passt ja nur eine begrenzte Anzahl von Tabs.Wenn diese Anzahl erreicht ist, werden einige Tabs dann innerhalb der Leiste nach rechts verschoben und sind durch anklicken dieses Pfeiles > zu erreichen. Jeder weitere geöffnete Tab wird dann in ein Überhangmenü verschoben, welches man nach Kick auf diesen Pfeil ˅ öffnen kann.

zwei pfeile - Firefox Mehrzeilige Tableiste

Wem das zu umständlich ist, der kann sich die Tableiste auch mehrzeilig anzeigen lassen.

Die zweite Leiste wird automatisch geöffnet, wenn in der ersten Leiste kein Platz mehr für einen weiteren Tab vorhanden ist.

Erforderlich dafür ist ein CSS Code für die userChrome.css Datei.

Bis zur Firefox Version 56 war es möglich einige Funktionen durch diverse Erweiterungen zu ändern.

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 diese optischen Änderungen am Firefox mit einer userChrome.css Datei erstellen.

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

userChrome.css erstellen

Und hier mal eine Erklärung wie man sich die Tableiste mehrzeilig anzeigen lassen kann.

Dazu gehen wir als erstes in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Dann im Ordner chrome die userChrome.css Datei öffnen.

In diese Datei tragen wir nun folgenden CSS Codes ein:

Da der CSS Code zu lang ist, habe ich ihn mal in diese Box eingefügt. Zum öffnen der Box bitte auf den grauen Balken klicken.

CSS - Code

/* Tableiste mehrzeilig */ /* Tableiste als unterste Leiste, alle anderen auf Standard */ #toolbar-menubar { -moz-box-ordinal-group: 1 !important; } #nav-bar { -moz-box-ordinal-group: 2 !important; } #PersonalToolbar { -moz-box-ordinal-group: 3 !important; } #TabsToolbar { -moz-box-ordinal-group: 4 !important; } .tab-close-button{ margin-right:-20px!important; } #tabbrowser-tabs{ position: fixed!important; right: auto !important; } #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > . tab-background { border:none!important; } #TabsToolbar .tabbrowser-tab { /* Inaktive Tabs */ color: black !important; border: 1px solid !important; border-bottom: 1px solid black!important; background: #ffffff !important; border-radius: 2px 2px 0 0 !important; margin: 2px 0px 1px 2px !important; padding: 3px 0px 0px 3px!important; } #TabsToolbar .tabbrowser-tab[selected=“true“] { /* Aktiver Tab */ background: grey !important; font-weight:bold !important; color: white ! important; } .tabbrowser-tab * { background: none!important; } #TabsToolbar *{ background: #eeeeee ; } .tabbrowser-tab{ margin-right:20px!important; max-height: 40px!important; -moz-box-flex: 0!important; width: 150px!important; /* Damit wird die Breite der Tabs verändert */ } /* Abstand vom Tab Icon und dem Tab Text nach links innerhalb vom Tab */ .tab-content { padding: 0 3px!important; } #titlebar, #tabbrowser-tabs { –tab-min-height: 30px !important; } .tab-stack { width: 90%!important; } #tabbrowser-tabs .scrollbox-innerbox { display: flex!important; flex-wrap: wrap!important; overflow-y: auto !important; min-height: var(–tab-min-height); max-height: calc(5*var(–tab-min-height)) !important; /* 5 Reihen */ } #tabbrowser-tabs .arrowscrollbox-scrollbox { margin-right:-15px!important; overflow: visible!important; display: block!important; } #tabbrowser-tabs .scrollbutton-up, #tabbrowser-tabs .scrollbutton-down, #alltabs-button, .tabbrowser-tab:not([fadein]){ display: none; } #main-window[tabsintitlebar] #tabbrowser-tabs { -moz-window-dragging: no-drag; } /*Tab-Schatten entfernt*/ .tab-label-container { mask-image: none !important; }

So sieht der Code dann in der userChrome.css Datei aus:

css code 2 - Firefox Mehrzeilige Tableiste

Damit man später noch genau weiß was der jeweilige 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.

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten.

Und so sieht das dann aus mit zum Beispiel zwei Reihen der Tableiste:

doppelte tableiste - Firefox Mehrzeilige Tableiste

Je nach Monitorgröße bzw. nach Bildschirmauflösung kann es einen Abstand vom letzten Tab zum rechten Bildschirmrand geben.

Das sieht dann so aus:

tababstand - Firefox Mehrzeilige Tableiste

Das kann man innerhalb des CSS-Codes anpassen, indem man die Tabbreite etwas vergrößert.

Neben dem dafür zuständigen Eintrag im Code habe ich mal diesen Hinweis gemacht:

/* Damit wird die Breite der Tabs verändert */

Hier muss dann der Wert in kleinen Schritten erhöht werden.

width: 150px!important;

wo aendern - Firefox Mehrzeilige Tableiste

Nach jeder Änderung muss der Firefox dann neu gestartet werden, damit sie übernommen wird.

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.

 

Samsung Galaxy S8+ Smartphone (6,2 Zoll (15,8 cm) Touch-Display, 64GB interner Speicher, Android OS) midnight black
280 Bewertungen
Samsung Galaxy S8+ Smartphone (6,2 Zoll (15,8 cm) Touch-Display, 64GB interner Speicher, Android OS) midnight black*
von SAMF5
  • Beeindruckendes Design mit Infinity Display
  • Wassergeschützt und widerstandsfähig nach IP68-Zertifizierung
  • Leistungsstarke Front-und Hauptkamera
  • Ausdauernder Akku mit Schnellladefunktion
  • Durch microSD-Karte erweiterbarer Speicher
  • Moderne, leicht navigierbare Benutzeroberfläche
  • 3500 Milliamperstunden
Unverb. Preisempf.: € 899,00 Du sparst: € 352,00 (39%)  Preis: € 547,00 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten
Tags
Mehr anzeigen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Close