AnleitungenSoftware - Tipps

Mehrreihige Tableiste im Firefox




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.

Eve Aqua - Smarte Bewässerungssteuerung mit Apple HomeKit-Technologie, Bewässerungstimer, Fernzugriff
36 Bewertungen
Eve Aqua - Smarte Bewässerungssteuerung mit Apple HomeKit-Technologie, Bewässerungstimer, Fernzugriff*
von Elgato
  • 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é
  • Zeitpläne: Automatische Bewässerung, auch ohne iPhone-Verbindung
  • Verbrauchsberechnung: Behalten Sie Ihre Gießmengen mit der Eve App im Blick
  • Kindersicherung, wetterfest & lichtresistent
Unverb. Preisempf.: € 99,95 Du sparst: € 2,36 (2%) Prime Preis: € 97,59 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.