Multirow-Tableiste mit userChrome.css funktioniert nicht mehr in FF81

BrokenHeart

Zitat von Krabato

Kann der Code denn so verändert werden, dass das wieder funktioniert? Oder geht das einfach nicht mehr?

Natürlich geht das noch. Dein Problem mit den Farben rührt daher, dass die Farben der einzelnen Tabs nicht deckend sind, wenn du ein sogenanntes LW-Theme benutzt (oder die Themes 'Hell' bzw. 'Dunkel'). Das heißt, dass der eingestellte Hintergrund für die Tableiste durchscheint. In deinem Fall ist der wohl schwarz. Wenn du unter AddOns->Themes das 'Standard'-Theme auswählst, dann werden die nicht selektierten Tabs deckend (silberner/grauer Farbverlauf) dargestellt, so wie beim Screenshot von Andreas (#13).

Schreib einfach welche Farben du gerne hättest oder probier selber etwas rum...

DaSwa94

Funktioniert wieder - Danke an 2002Andreas. Ein Problem habe ich noch:

Habe recht kleine Tab-Höhen (min-height: 28px >>> 22px) und Schriftgrößen (font-size: 12px >>> 10px) eingestellt - leider ist der Text immer nach unten gequetscht. Habe vertical-align: bottom auf middle bzw. top geändert - das zeigt aber keinen Effekt...

Krabato

Betreffend der Farben habe ich eine alte noch abgespeicherte userChrome.css gefunden in der u.a. folgender Code enthalten war:

CSS

/*TABs farblich unterscheiden ANFANG*/
/* Tab, normal */
.tabbrowser-tab .tab-content {
    background: aquamarine !important;
    color: black !important;
}
/* Tab, aktiv */
.tabbrowser-tab[selected='true'] .tab-content {
    background: #F465B4 !important;
    color: black !important;
}
/* Ungelesenes Tab / Tab, in welchem (noch) kein Link angewählt wurde  */
.tabbrowser-tab[notselectedsinceload="true"] .tab-content {
    background: yellow !important;
    color: black !important;
}
/* Tab, entladen / (noch) nicht geladen */
.tabbrowser-tab[pending="true"] .tab-content{
    background: #B7F4F3 !important;
    color: black !important;
}
/* Letztes Tab - DEAKTIVIERT!
.tabbrowser-tab[last-visible-tab="true"] .tab-content {
    background: lightseagreen !important;
    color: black !important;
}*/

/* Tab, aktiv */
.tabbrowser-tab[selected='true'].tab-content {
    background: #F465B4 !important;
    color: black !important;
}

Alles anzeigen

Ich habe gerade mal als Theme Standard eingestellt, aber es zeigte sich eigentlich das gleiche Bild: grau bei hover, blau der aktive, aber man sieht z.B. nicht, welche Tabs neu sind und welche ich schon angesehen habe...

DaSwa94

wie einfach war das doch früher alles mit TabMixPlus - die ungelesenen orange kursiv, die gelesenen schwarz, der aktuelle schwarz fett mit farbigem Hintergrund - und das alles ohne basteln...

Boersenfeger

... früher hat man auch noch Kühe von Hand gemolken...

Krabato

TabMixPlus war trotzdem einfach nur super! Irgendwann hieß es noch, man plant ein "Comeback"... wißt Ihr, ob das noch aktuell ist?

Sören Hentzschel

Zitat von DaSwa94

wie einfach war das doch früher alles mit TabMixPlus

Ja, vor allem wenn es dann nach Firefox-Updates permanent Probleme gab, war das ja so viel einfacher für die Nutzer…

Zitat von Krabato

Irgendwann hieß es noch, man plant ein "Comeback"... wißt Ihr, ob das noch aktuell ist?

Die Erweiterung heißt jetzt Tab Mix - Links:

https://addons.mozilla.org/de/firefox/add…s-webextension/

Boersenfeger

Krabato

Kannst dich hier mal dran lang lesen, da wird TabMixPlus alt komplett ersetzt mit den Script- und CSS-Möglichkeiten...

FF 57.0 Ersatz für TabMixPlus

Krabato

@Sören und Boersenfeger: Vielen Dank für die Links - da werde ich mal nachforschen...

Aber ihr habt schon recht: Mit der userChrome.css bzw. den Skripten kann man (wenn man sich auskennt) viel mehr herausholen.

Es ist halt aber (leider) so, dass ich mich z.B. überhaupt nicht auskenne und immer dastehe, wie ein Ochs vorm Scheunentor, wenn es wieder ein FF Update gibt und meine schöne Tableiste wieder zerschossen wird...

Ich liebe es, viele Tabs offen zu haben, um vieles einfach "im Blick" zu haben und so ist dieses Feature für mich seeehr wichtig.

Von daher bin ich Euch hier im Forum so dermaßen dankbar, dass ich mich hier immer wieder mit Fragen an Euch (alle) wenden darf und man so schnell und unkompliziert Hilfe bekommt - das ist einfach super!

Habt Ihr noch Tips zu den Tab-Farben?

2002Andreas

Zitat von Krabato

Habt Ihr noch Tips zu den Tab-Farben?

Teste bitte, die Farben musst du dir wenn dann selber noch ändern:

CSS

/* Tableiste mehrreihig */
@-moz-document url(chrome://browser/content/browser.xhtml) {

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}

/* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 150px !important;/* Minimale Tabbreite 76px */
max-width: 150px !important;/* Maximale Tabbreite 225px */
}
}

/* Buttons/Zwischenräume Ausblenden */
hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), 
[class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { 
    display: none; 
}
tabs tab {
    border-left: solid 1px hsla(0,0%,50%,.5);
    border-right: solid 1px hsla(0,0%,50%,.5);
}
tabs tab:after,tabs tab:before { display: none;}

/* #TabsToolbar:not(:-moz-lwtheme){ 
    color: black !important;
} */
#TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}    

/* -----------------------------*/
/* Tab: Optische Anpassungen    */
/* -----------------------------*/

#tabbrowser-tabs :not([fokus]){
    opacity: 1!important;
}

/* Schriftart/Schriftgröße ändern */
.tabbrowser-tab .tab-label {
    text-shadow: 1px 1px 0px #000000 !important;    
    font-weight: 500 !important;
    font-size:   12px !important;
    font-family: "Arial" !important;
}

.tabbrowser-tab .tab-label:not(:-moz-lwtheme) {
    text-shadow: none !important; 
}
   
.tabbrowser-tab .tab-label[selected="true"] {
    text-shadow: 1px 1px 0px #000000 !important;
    font-weight: 500 !important;
    font-size:   12px !important; 
    font-family: "Arial" !important; 
}

/* Inaktive Tabs Schrift kursiv */
.tabbrowser-tab:not([selected]) {
    font-style: italic !important;
}
    
/* Aktiver Tab */
.tabbrowser-tab[selected] .tab-content {
    background: red !important;
    color: white !important;
}
.tabbrowser-tab[selected] .tab-content:hover{
    background: yellow !important;
    color: blue !important; 
}

/* Tab ungelesen */
.tabbrowser-tab[pending] .tab-content{    
    background:  blue !important;
    color: yellow !important;
}
.tabbrowser-tab[pending] .tab-content:hover{
    background: green !important;
}

/* Tab gelesen */
.tabbrowser-tab .tab-content {
    background: green !important;
    color: white !important; 
}
.tabbrowser-tab .tab-content:hover {
    background: orange !important;
    color: white !important; 
}




/* Tab-Line entfernen */
#TabsToolbar .tabbrowser-tab .tab-line {
    display: none !important; 
}

/* Tab-Höhe  */
.tabbrowser-tab {
    min-height: 28px !important;
    max-height: 28px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/* Tab-Rahmen entfernen */
#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
    background: unset !important;
    border-top: unset !important;
    outline: none !important;
}

/* Tab-Schließen-Button entfernen *//*
.tabbrowser-tab .tab-close-button {
  visibility: collapse !important;
}
*/

/************* Tabschliessen-Button ****************/
.tab-close-button.close-icon{
    display: -moz-box !important;
    width: 20px; height: 20px !important;
    border: none !important;
    background-color: none !important;
}

.tab-close-button {
    color: white !important; /* Farbe des Kreuzes */
}

Alles anzeigen

Blau = ungelesen

Grün = gelesen

Rot = Aktiver Tab

gefunden008

Hallo,

auch ich habe wieder das Problem das nach dem Firefox Update wieder nicht alles passt

Ich hatte vorher auch eine Mehrzeilige Tableiste (glaub sogar unbegrenzt).

Jetzt wird wieder nur eine Reihe angezeigt, obwohl die Tabs weiterhin geöffnet werden aber nicht sichtbar sind.

Vielleicht kann mir erneut jemand dabei helfen bevor ich wieder alles verstelle

CSS

/* Mehrzeilige Tabreihen */

tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] { display: flex; flex-wrap: wrap; /*overflow: visible !important;*/ overflow-x: hidden !important; /*overflow-y: auto !important;*/ min-height: 25px !important; max-height: calc( 15 * 25px ) !important; /*15 Tabreihen*/ -moz-window-dragging: no-drag !important;
}

/* Tab-Höhe */

.tabbrowser-tab { min-height: 25px !important; max-height: 25px !important; vertical-align: bottom !important; margin-top: 1px !important; margin-bottom: 1px !important;
}

/* Feste Breite des einzelnem Tabs */

.tabbrowser-tab:not([pinned]) { min-width: 160px !important; }

/* Platz für Scrollbar schaffen */

.tabbrowser-tabs { margin-right: -1px !important;
}

/* Buttons/Zwischenräume Ausblenden */

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), [class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { display: none; }

/* Keine Favicon Animation */

.tabbrowser-tab[label*="BiT-TiTAN"] .tab-icon-image{ display:none!important; }

/*Mehrzeilige Lesezeichen-Symbolleiste*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
     #PersonalToolbar {
        max-height: calc(20px * 3) !important;
    }
    
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block !important;
    }
    
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    
    #PlacesToolbarItems {
        max-height:60px!important;
        display: flex!important;
        flex-wrap: wrap!important;
        overflow-x: visible!important;
        overflow-y: auto!important;
    }
    
    #PlacesToolbar,
    #PersonalToolbar > scrollbar {
        -moz-window-dragging: no-drag !important;
    }
    
    #PlacesToolbar #PlacesChevron {
        display: none !important;
    }
}

Alles anzeigen

2002Andreas

Zitat von gefunden008

mir erneut jemand dabei helfen

Teste bitte mal diesen neuen kompletten Code:

CSS

/* Tableiste mehrreihig */
@-moz-document url(chrome://browser/content/browser.xhtml) {

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}

/* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 150px !important;/* Minimale Tabbreite 76px */
max-width: 150px !important;/* Maximale Tabbreite 225px */
}
}


/* Buttons/Zwischenräume Ausblenden */

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), [class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { display: none; }

/* Keine Favicon Animation */

.tabbrowser-tab[label*="BiT-TiTAN"] .tab-icon-image{ display:none!important; }

/*Mehrzeilige Lesezeichen-Symbolleiste*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
     #PersonalToolbar {
        max-height: calc(20px * 3) !important;
    }
    
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block !important;
    }
    
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    
    #PlacesToolbarItems {
        max-height:60px!important;
        display: flex!important;
        flex-wrap: wrap!important;
        overflow-x: visible!important;
        overflow-y: auto!important;
    }
    
    #PlacesToolbar,
    #PersonalToolbar > scrollbar {
        -moz-window-dragging: no-drag !important;
    }
    
    #PlacesToolbar #PlacesChevron {
        display: none !important;
    }
}

Alles anzeigen

Krabato

2002Andreas: Vielen Dank für die Änderungen

Dumme Frage: Ich habe auf diese zwei Blätter rechts oben in der Ecke des Codes geklickt und dann Strg+V in meiner userChrome.css aber dann hängt er mir den Text hintereinanderweg...

Wie kopiere ich das richtig?

2002Andreas

Zitat von Krabato

dann hängt er mir den Text hintereinanderweg...

Vor dem Einfügen des neuen Codes musst du den alten vorhandenen Code erst mit STRG + A markieren, und dann durch den neuen Code überschreiben lassen.

Oder auch den alten Code ganz einfach erst kompl. löschen.

gefunden008

Hallo Andreas,

Danke für die erneute schnelle Hilfe. Die Tabreihen sind nun wieder Mehrzeilig, perfekt

Nur sind die Tabs jetzt in der Höhe dicker geworden und die Tablängen sind kürzer, vorher waren diese also in der Höhe schmaler und in der Breite dicker. Es war so eingestellt das diese genau bis zum Rand gehen im Browser. Zudem kommt aber der 3ten Tabreihe wieder dieser Scroll-Balken, das war vorher auch nicht so.

Bekommen wir das auch wieder so hin?

2002Andreas

Zitat von gefunden008

die Tabs jetzt in der Höhe dicker geworden und die Tablängen sind kürzer

Teste bitte wieder:

CSS

/* Tableiste mehrreihig */
@-moz-document url(chrome://browser/content/browser.xhtml) {
    
/* Höhe der einzelnen Tabs */
.tabbrowser-tab { 
min-height: 25px !important; 
max-height: 25px !important; 
vertical-align: bottom !important; 
margin-top: 1px !important; 
margin-bottom: 1px !important;
}

/* Feste Breite der einzelnen Tabs */
tabs tab[fadein]:not([pinned]) {
min-width: 160px !important;/* Minimale Tabbreite 76px */
max-width: 160px !important;/* Maximale Tabbreite 225px */
}


[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 3 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 8); /* Anzahl der angezeigten Tabreihen = 3 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}
}


/* Buttons/Zwischenräume Ausblenden */

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]), [class="scrollbutton-up"],
[class="scrollbutton-up"] + spacer,
scrollbox[part][orient="horizontal"] + spacer,
[class="scrollbutton-down"] { display: none; }

/* Keine Favicon Animation */

.tabbrowser-tab[label*="BiT-TiTAN"] .tab-icon-image{ display:none!important; }

/*Mehrzeilige Lesezeichen-Symbolleiste*/
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
     #PersonalToolbar {
        max-height: calc(20px * 3) !important;
    }
    
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block !important;
    }
    
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    
    #PlacesToolbarItems {
        max-height:60px!important;
        display: flex!important;
        flex-wrap: wrap!important;
        overflow-x: visible!important;
        overflow-y: auto!important;
    }
    
    #PlacesToolbar,
    #PersonalToolbar > scrollbar {
        -moz-window-dragging: no-drag !important;
    }
    
    #PlacesToolbar #PlacesChevron {
        display: none !important;
    }
}

Alles anzeigen

Evtl. musst du die Breite der Tabs für dich noch etwas anpassen, das geht mit Änderung in Zeile 15 +16.

Die Höhe in Zeile 6 + 7

Die Scrollbar wird jetzt erst ab 8 Tabreihen angezeigt.

Ändern kannst du das in Zeile 39.

Krabato

Ich glaub ich steh auf dem Schlauch... das gab doch noch nie Probleme...

Aber jetzt sieht es so aus:

Zitat von 2002Andreas

Vor dem Einfügen des neuen Codes musst du den alten vorhandenen Code erst mit STRG + A markieren, und dann durch den neuen Code überschreiben lassen.

das mache ich auch....

Trotzdem sieht es dann so aus...

Kopiere ich falsch?

2002Andreas

Zitat von Krabato

Trotzdem sieht es dann so aus...

Du meinst weil alles nebeneinander und nicht untereinander ist?

Das liegt an deinem Editor denke ich mal, weil kein Zeilenumbruch aktiviert ist.

gefunden008

Hat alles geklappt Andreas, nach etwas rumprobiern passen auch wieder die Längen und Höhen

Erneut, vielen Dank für die schnelle und Kompetente Hilfe

2002Andreas

Zitat von gefunden008

vielen Dank für die schnelle und Kompetente Hilfe

Freut mich wenn ich dir damit helfen konnte, war gern geschehen