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.

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:

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:

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

Das sieht dann so aus:

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;

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
345 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: € 404,10 (45%)  Preis: € 494,90 Jetzt auf Amazon kaufen*
Preis inkl. MwSt., zzgl. Versandkosten

Tags
Mehr anzeigen

10 Comments

  1. Mach mal bitte ein Bild wie der Text richtig aussieht, das ist ja mit deiner css-code fenster nicht ersichtlich.
    Weil da so wie es im Text sein soll nicht der Fall ist. Ich denke das hat was mit der Formatierung zu tun.
    Das einzigste was geht ist das mehrzeilige.

  2. Hallo bei mir hat es nicht geklappt, ich habe alles so erstellt wie beschrieben, im screenshot, sehe ich Nummern auf der Linken seite, die ich nicht habe? Im Editor habe ich 3 Zeilen und muss um alles sehen zu können nach rechts scrollen. Was mache ich falsch?

    1. Hallo @Markus..

      vorweg, der Code funktioniert hier nach einem extra Test einwandfrei.
      Du nutzt den normalen Standard Editor von Windows, da gibt es die Zahlen je Reihe auf der linken Seite nicht. Ich benutze für alle CSS Codes den Editor von Notepad++.

      Das mit den 3 Reihen kannst du ändern, oben im Editor auf Format klicken, und dann bei Zeilenumbruch den Haken reinsetzen.

      Wenn du den Text speichern willst, muss du in dem Speicherfenster dann unten noch unter Codierung: ANSI den Eintrag ändern auf: UTF-8
      und dann speichern. Danach den Firefox neu starten und testen.

      Die Tableiste wird auch erst mehrreihig wenn es erforderlich ist, also nicht schon bei nur einem Tab, sondern erst wenn die Tableiste ausgefüllt ist.

      Sollte das bei dir nicht der Fall sein, dann bitte mal überprüfen ob der Ordner chrome sich wirklich im Profilordner befindet. Und ob die Datei userChrome.css wirklich die Dateiendung .css hat.
      Das kannst du daran erkennen, ob unter Dateityp CSS-Datei steht, und nicht Textdatei.

  3. Hallo,
    sehr gute Erläuterung, die auch funktioniert.
    Such die Links zu den Erläuterungen und Wiki sind super.
    Allerdings gibt es 2 Dinge, die aus meiner Sicht fehlen:
    1. Die zweite und dritte Reihe überlagern die Sicht auf die aufgerüfene Homepage, aber das lässt sich bestimmt ändern.
    2. Die Schaltfläche Neuer Tab fehlt leider auch.

    1. Hallo @ToFe..
      freut mich wenn meine Anleitung gut verständlich ist.
      Zu der zweiten Frage:
      Wie man ja auf meinen Screenshots erkennen kann, ist der Button für den Neuen Tab vorhanden, evtl. muss die Breite der Tabs nur etwas verändert werden.
      Zu der ersten Frage:
      Das Problem ist mit dem CSS-Code nicht zu beheben, darum habe ich hier mal einen weiteren Beitrag mit einem anderen Code dazu erstellt.
      https://www.windowspower.de/mehrreihige-tableiste-im-firefox/

      Auch in diesem neuen Code kann bzw. muss man evtl. diverse Abstände neu anpassen.

      Ich hoffe damit sind die beiden Problem gelöst.

      Mit freundlichen Grüßen
      Andreas

Schreibe einen Kommentar

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