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:

verdeckt

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

Mehrreihige Tableiste



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

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:

css-code

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.

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

Eve Aqua (Vorgängermodell) - Smarte Bewässerungssteuerung per...
  • Steuern Sie Rasensprenger oder Bewässerungssysteme per App, Siri oder direkt am Gerät. Oder legen Sie mühelos Zeitpläne an, die den Garten unabhängig...
Share.