Firefox

Firefox 66 – Mehrreihige Tableiste – Update



Ich hatte ja hier schon mal beschrieben, wie sich eine Mehrreihige Tableiste erstellen kann. Seit der Firefox Version 66.0.1 wird mit dem CSS Code der Scrollbalken bei mehreren Leisten nicht mehr angezeigt. Wer diese Anzeige wieder haben möchte, der muss den alten CSS Code nur gegen den neuen austauschen.

scrollleiste - Firefox 66 - Mehrreihige Tableiste - Update

Firefox 66 – Mehrreihige Tableiste – Update

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

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 optischen Änderung am Firefox mit einer userContent.css bzw. 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 das mit dem neuen CSS – Code dann machen muss.

Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Dann im Ordner chrome die userChrome.css Datei öffnen, und den alten CSS Code für die Mehrreihige Tableiste löschen.

In diese Datei tragen wir nun dafür folgenden neuen CSS Code ein:

/* Tableiste mehrreihig */

#tabbrowser-tabs{
--tabs-lines: 3; /*Angezeigte Leisten, bei mehr wird eine Scrollbar eingeblendet, oder den Wert erhöhen*/
--tab_min_width_mlt: 120px;/* Mindeste Tabbreite */
--tab_max_width_mlt: 120px;/* Maximale Tabbreite */
--tab-max-height_mlt: var(--tab-max-height,25px);
}
/*Tableistenabstände*/

#tabbrowser-tabs > .tabbrowser-arrowscrollbox {
overflow: -moz-hidden-unscrollable;
display: block;
margin-bottom:-16px !important;
margin-top:-15px !important;
margin-left:3px !important;
}

.tabbrowser-tab .tab-content {
border:1px solid grey!important;
}

.tabbrowser-tab[pinned] .tab-icon-image{
margin-left:-5px!important;
}

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

/* Tab schließen Button dauerhaft auf allen Tabs anzeigen, ansonsten auskommentieren*/

.tab-close-button.close-icon{
display: -moz-box !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[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-max-height_mlt);
}

.tabs-newtab-button {
margin-left:-2px!important;
vertical-align: bottom !important;
height: var(--tab-max-height_mlt);
}

.tab-stack {
width: 98% !important;
}

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

#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc(var(--tab-max-height_mlt) * var(--tabs-lines));
}

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

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

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

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

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

Und so sieht der Code dann in der userChrome.css Datei aus:

css 1 - Firefox 66 - Mehrreihige Tableiste - Update



Damit man später noch genau weiß was der jeweilige CSS 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.

Firefox 66 – Mehrreihige Tableiste – Update

2,80 EUR
[Updated Version] VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop, Microsoft Pro, Office Home,Schwarz
2.532 Bewertungen
[Updated Version] VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop, Microsoft Pro, Office Home,Schwarz
  • 1. Das Aussehen des Patents : Diese Maus durch die EU aussehen Zertifizierung, die Welt nur in VicTsing verkauft, der Rest von den Verkäufern sind gefälscht
  • 2. 2.4Gwireless Datenübertragung & 5 DPI Schalter und angepasste Funktion : 2,4 GHz Wireless - eine Erfahrung sicherer und präziser als das traditionelle FMRadioSystem mit einer erhöhten Arbeitsabstand bis 15 m. Es braucht nichtlaufwerk,Plug & Play. 5 DPI-Schalter (800, 1200, 1600, 2000, 2400) ändern Sie die Geschwindigkeit der Maus frei.

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.

Danach noch einen Neustart vom Browser machen, und das aktuelle Standard Favicon von YouTube wird wieder angezeigt.

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.

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

(Diese Datei wird für optische Änderungen an Webseiten, bzw. allen Firefox Seiten die mit about beginnen benötigt)

Tags
Mehr anzeigen

8 Comments

  1. Hallo Andreas,
    Vielen Dank wieder mal für deine Hilfe. Es sieht schon gut aus, nur noch ein paar minimale Korrekturen.
    Ich habe deshalb noch 2 Fragen:
    1. wegen des Zusatzcodes: mit welchen Wert stelle ich den Abstand zwischen Textcontainer (bzw. Text) und Close-Button ein?
    2. wo stelle ich den Abstand zw. Close-Button und Tab-Ende ein (ist jetzt etwa 6 mm, 2 mm dürfte ideal sein)?

    Apropos… ich habe gesehen, dass im Code für „tab-close-button.close-icon“ vorher ein „margin-right“ enthalten war. Durch die Änderung ist jetzt kein „margin-right:-10px“ mehr enthalten, sondern ein „margin-left:5px“. Ist das so beabsichtigt?

    Danke und Gruß

    1. Hallo Benno..

      die Abstände änderst du unter den Einträgen:
      .tab-label-container
      auf z.B. 4.3em
      und
      .tab-close-button.close-icon
      auf z.B. margin-left:8px

      Einfach ausprobieren was bei dir am besten passt.

      Ansonsten ist es richtig, jetzt margin-left statt margin-right zu benutzen.
      MfG.
      Andreas

      1. Salut Andreas,

        perfekter gehts nicht mehr!!!
        Vielen herzlichen DANK.

        Ich wünsche dir noch einen schönen Tag.
        Falls ich wieder mal ein FireFox-Problemchen habe, kann ich mich wieder an dich wenden?
        Und noch eine Frage: darf ich deine Website weiter empfehlen? Oder lieber nicht, wegen des eventuellen Ansturms?

      2. Hallo Benno..

        es freut mich wenn ich dir damit helfen konnte, war gern geschehen.😊
        Du kannst die Seite windowspower gerne weiter empfehlen, würde uns sogar freuen.
        Und solltest du weitere Fragen haben, dann werde ich es zumindest versuchen dir zu helfen.

        Ich wünsche dir dann ein Frohes Osterfest, und wieder viel Spaß mit dem Firefox.

        MfG.
        Andreas

  2. Hallo Andreas,

    ich habe jetzt deinen CSS-Code für die mehrzeilige Darstellung der Tabs übenommen (den vorherigen Code vom Kollegen habe ich deaktiviert).
    Das Ergebnis sieht so super aus und…. die Scrollbar funktioniert :-). WOW, großartig!
    Frage noch: kannst du den Abstand zwischen Lesezeichen-Text und dem Close Button (das Kreuz) etwas größer (oder einstellbar?) machen. Das X steht jetzt ziemlich eng an den Text. Etwas mehr Abstand würde den Close-Button besser hervorheben, meine ich.
    Und kann man das Kreuz auch farblich ändern? Wenn ja, wo im Code?

    Und…. DANKE wieder einmal für deine tolle Arbeit.

    1. Hallo Benno…
      mit diesem Zusatz Code verschiebst du erstmal das Favicon weiter nach links:

      .tabbrowser-tab .tab-icon-image{
      margin-left:-6px!important;
      }
      Den Wert kannst du wie immer anpassen.
      Dann hast du oben in Zeile 27 für das Schließen Kreuz einen Eintrag, den du gegen diesen einfach austauschen musst:

      .tab-close-button.close-icon{
      color:red!important;
      margin-right:-14px!important;
      }
      Damit wird das Kreuz rot, und rutscht weiter nach rechts.
      Auch hier wieder Wert und Farbe bitte anpassen.

      Wenn nötig, dann kannst du damit den Tabtext auch noch etwas nach links verschieben:

      .tab-text {
      margin-left:-1px!important;
      }

      Ich hoffe das hilft dir etwas weiter.
      MfG.
      Andreas

      1. Guten Morgen Andreas,
        vielen Dank für deine Lösungsvorschläge.
        Code 1 (Favicon weiter nach links) und Code 2 (Kreuzfarbe ändern und weiter nach rechts verschieben) habe ich angewandt. Hat prima geklappt und bin „very happy“ damit :-).
        Code 3 (Tabtext weiter nach links verschieben) ist nicht ganz das, was ich meinte. Es wird zwar der Text etwas weiter nach links verschoben, aber der Abstand zwischen Textende und „Schließen“-Kreuz bleibt gleich. Schön wäre es, wenn das Kreuz nicht ganz so eng an den letzten Buchstaben des Textes stünde. Ich weiss aber nicht, ob das so ohne weiteres geht?

        Ich habe mal etwas herumgebastelt mit deinem Code und folgende Variante versucht:
        .tab-text {
        margin-right:4px!important;
        }

        Hat leider nicht funktioniert, bin eben kein Programmierer :-(. Ist wahrscheinlich völliger Quatsch, was ich da versucht habe!!

        Vielleicht fällt dir noch was ein, du bist der Experte :-).

        Schöne Grüße,

      2. Hallo Benno..

        das Problem ist die oben festgelegte Breite der Tabs:
        –tab_min_width_mlt: 120px;/* Mindeste Tabbreite */
        –tab_max_width_mlt: 120px;/* Maximale Tabbreite */

        Wenn du dort ca. 200px nimmst, würde es schon besser passen.

        Oder aber du nimmst diesen Zusatzcode:

        .tab-label-container {
        min-width:4.6em!important;
        max-width:4.6em!important;
        }
        Damit wird der Container innerhalb vom Tab mit dem vorhandenen Tabtext schmaler, und natürlich auch weniger sichtbarem Text.

        Und dann musst du noch diesen Wert ändern:
        .tab-close-button.close-icon{
        margin-right:-10px!important;
        }
        zu:

        .tab-close-button.close-icon{
        margin-left:5px!important;
        }

        Und dann mit allen Werten testen und evtl. noch etwas anpassen.

        MfG.
        Andreas

Schreibe einen Kommentar

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

Back to top button