Archiv

Mehrreihige Tableiste im Firefox

Dieser Beitrag ist älter als ein Jahr und daher vielleicht nicht mehr aktuell.



Ich hatte ja hier schon mal beschrieben wie man sich eine mehrreihige Tableiste für den Firefox erstellen kann. Nachteil bei dem Code ist, ab der 2ten Tabreihe wird der obere Teil der Webseite verdeckt.

Das sieht dann so aus:

Aus diesem Grund habe ich mal einen neuen CSS Code erstellt, bei dem das nicht passiert.

Mehrreihige Tableiste

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.



Und hier mal eine Erklärung wie man das mit dem CSS-Code dann machen muss.

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

/* 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;
}

/* Tableiste mehrzeilig */

#tabbrowser-tabs{
–tabs-lines: 5;
–tab_min_width_mlt: 150px; /*Mindestbreite vom Tab*/
–tab_max_width_mlt: 150px; /*Maximale Breite vom Tab*/
–tab-min-height_mlt: var(–tab-min-height,28px);
}

.tab-background[selected=“true“],.tabbrowser-tab[selected=“true“]{
background: orange!important; /*Aktiver Tab Hintergrund orange*/
}

.tab-background:not([selected=“true“]):hover,.tabbrowser-tab:not([selected=“true“]):hover{
background: green!important; /*Inaktivier Tab beim hovern grün*/
}

.tab-line[selected=true],.tab-line:not([selected=true]) {
display:none!important;
}

.tab-close-button.close-icon{
margin-right:-18px!important;
}

.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black 0em)!important;
}

.tabbrowser-tab{ /*Rahmen um Tabs*/
border:1px solid grey!important
}

.tabbrowser-tab[fadein]:not([pinned]) {
flex-grow: 1;
min-width: var(–tab_min_width_mlt) !important;
max-width: var(–tab_max_width_mlt) !important;
}

.tabbrowser-tab,.tab-background {
min-height: var(–tab-min-height_mlt);
}

.tabs-newtab-button {
margin-left:-2px!important; /*Neuer Tab Button Abstand nach links*/
vertical-align: bottom !important;
height: var(–tab-min-height_mlt);
}

.tab-stack {
width: 95%;
}

#tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: collapse !important;
overflow-y: auto !important;
min-height: var(–tab-min-height_mlt);
max-height: calc( var(–tabs-lines) * var(–tab-min-height_mlt) ) !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow-x: collapse;
overflow: visible;
display: block;
}

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#TabsToolbar #alltabs-button,
.tabbrowser-tab:not([fadein]){
display: none;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag !important;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
opacity: 0 !important;
}

#tabbrowser-tabs * {
overflow-x: none !important;
}

#main-window[customizing] #tabbrowser-tabs .scrollbox-innerbox {
display: block !important;
}

#tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 4px !important;
}

#TabsToolbar[currentset^=“tabbrowser-tabs,new-tab-button“] #tabbrowser-tabs .scrollbox-innerbox {
-moz-padding-end: 10px !important;
}

(Am einfachsten ist es den obigen Code erst mit der Maus zu markieren, dann kopieren und in die userChrome.css Datei wieder einfügen.)

Mehrreihige Tableiste

Hinweis:
Je nach Bildschirmgröße bzw. Auflösung muss die Breite der Tabs etwas angepasst werden.
Die beiden Farben der Tabs können beliebig geändert werden.
Die Farbe des Rahmens um die Tabs kann ebenfalls angepasst werden.

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, damit die Änderung wirksam wird.

Und so sieht das dann mit dem neuen Code aus, der obere Teil der Webseite wird jetzt weiter nach unten verschoben und dadurch nicht mehr verdeckt.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte. Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

7,21 EUR
Eve aqua - Smarte Bewässerungssteuerung, Bewässerungstimer, Fernzugriff, Kindersicherung, Keine Bridge erforderlich (Apple Homekit)
153 Bewertungen
Eve aqua - Smarte Bewässerungssteuerung, Bewässerungstimer, Fernzugriff, Kindersicherung, Keine Bridge erforderlich (Apple Homekit)
  • Mühelose Steuerung: Aktivieren Sie Ihren Rasensprenger via Siri, App oder direkt am Gerät per Knopfdruck
  • Automatische Abschaltung: Ab jetzt sind Überschwemmungen & Wasserverschwendung passé



Das könnte auch interessant sein...


Tags

14 Comments

  1. Hallo Andreas,
    dein css-Code funktioniert bei mir einfach prima! Große Klasse! Ein dickes Dankeschön!
    Was ich noch vermisse ist eine Scrollfunktion nach oben/unten, wenn man z.B. nur max. 3 Tabzeilen angezeigt haben möchte, es aber eigentlich mehr sind.
    Bei mir kommt eine Zeile nach der andern…habe gerade mal 6 Zeilen getestet.
    Gibt es da noch eine Lösung für?
    VG,
    Kerstin

      1. Hallo Andreas,
        ich habe den neuen Code eingefügt. Die Scroll-Leiste ist da, klasse. Vielen Dank!
        Das einzige, was ich hier noch ändern möchte, ist die Tab-Höhe, damit sie nicht so viel Platz wegnehmen.
        Wo kann ich das ändern?
        Bei TabMixPlus war das so, dass die ungeöffneten Tabs eine rote Schrift hatten, die dann in schwarz wechselte, wenn man den Tab öffnete. Geht sowas hier auch?

      2. Hallo Kerstin..

        dazu müsste der Code geändert bzw. angepasst werden. Am besten wäre es, du würdest dich dazu in unserem Firefox Forum anmelden, und dort deine Fragen stellen. Da könnte ich dir dann besser helfen als hier.

        https://www.firefox-forum.com/

        Liebe Grüße
        Andreas

      1. Hallo @Rainer..
        freut mich wenn ich damit helfen konnte.
        Hinweis für die neue Firefox Version 65 ab dem ca. 29.1.2019. Die Tableiste lässt sich dann nicht mehr nach unten verschieben. Die Funktion der mehrzeiligen Tableiste bleibt aber erhalten.

      2. ja, ab firefox 65 ist die Adresszeile leider wieder unter den Tabs. 🙁
        Falls es da eine Lösung gibt, wär ich stark dran interessiert! 😉

      1. Danke!:
        Ein Problem habe ich leider noch:
        Es fehlen in den Tabs ganz rechts die „x“-Symbole zum Schließen des Tabs. Die Funktion ist da, wenn ich einen Tab gerade geöffnet habe. Aber früher waren die Kreuze bei allen Tabs dabei. Jetzt muss ich immer einen Tab anklicken,bevor ich ich ihn über das Kreuz schließen kann. 🙁
        Gibt es da eine Möglichkeit, die Kreuze wieder hinzubekommen?

      2. Hallo @Micha,

        wie Du ja auf meinem Screenshot erkennen kannst sind hier die X vorhanden.

        Teste aber bitte mal:
        In dem Code befindet sich u.a. dieser Eintrag:

        .tab-close-button.close-icon{
        margin-right:-18px!important;
        }

        Den bitte mal ersetzen durch:

        .tab-close-button.close-icon{
        margin-right:-18px!important;
        display: -moz-box !important;
        }

        Ich hoffe das hilft Dir weiter.

        Mfg
        Andreas

Schreibe einen Kommentar

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

Back to top button
Close