Tableiste unten per CSS-Code, oder per Skript.

Parzival

Zitat von 2002Andreas

Zitat von Parzival

ich meinte den Rahmen vom aktiven Tab ist noch da

sorry, das hatte ich dann missverstanden.

Teste bitte mal diesen kompl. neuen Code:

CSS

/* Grauer Kasten: */
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
  border-top: none !important;
}

/* Tab unten */
#TabsToolbar {
  order: 100 !important;
}       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
  margin-left: 0 !important;
  margin-right: 0 !important;
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 30px !important;
  background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0 8px !important;
  background-size: 25px 17px !important;
}

/* Tabs mittig */
scrollbox[smoothscroll="true"] > slot {
  display: contents !important;
}

scrollbox[smoothscroll="true"] {
  justify-content: center !important ;
}

.tab-background {
  &:is([selected], [multiselected]) {
  outline-color: transparent !important;
}
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

/*Aktiver Tab HG orange
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}*/

/*Aktiver Tab Schrift white
tab.tabbrowser-tab .tab-content[selected] { 
  color: white !important;
  font-weight: bold !important;
}*/

/* Tabs ohne Rundungen */
tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  border-radius: 0 !important;
}

/* Oben ein weißer Balken */
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  box-shadow: none !important;
  border-top: 4px solid white !important;
}

/*  Schriftgröße Tabs */
.tab-text {
  font-size: 15px !important; 
	margin-bottom: 3px !important; 
}
		
/*  Schließen Kreuz größer */
.tab-close-button {
  transform: scale(1.5, 1.5) !important;
  margin-left: 5px !important;
}

/*   Tab Mindestbreite einstellen  */
tabs tab[fadein]:not([pinned]) {
  min-width: 210px !important;/* Minimale Tabbreite 76px */
  max-width: 250px !important;/* Maximale Tabbreite 225px */
}

Alles anzeigen

Jooo! Das ist es!!! Brutal! Danke dir Andreas!!!

2002Andreas

Zitat von Parzival

Das ist es!!!

Freut mich wenn es jetzt für dich passt, war gern geschehen

Kleinigkeit noch:

Tausch bitte mal diesen Code:

CSS

/* Tabs mittig */
scrollbox[smoothscroll="true"] > slot {
  display: contents !important;
}

scrollbox[smoothscroll="true"] {
  justify-content: center !important ;
}

gegen diesen aus:

CSS

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-left: auto !important;
}
#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
}

Parzival

Mmm, wenn ich den Code so ändere sind die angehefteten Tabs ganz links...

2002Andreas

Zitat von Parzival

sind die angehefteten Tabs ganz links...

CSS

/* Grauer Kasten: */
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
  border-top: none !important;
}

/* Tab unten */
#TabsToolbar {
  order: 100 !important;
}       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
  margin-left: 0 !important;
  margin-right: 0 !important;
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 30px !important;
  background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0 8px !important;
  background-size: 25px 17px !important;
}

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) {
    --ug_tabs_position: center;
    --ug_slot_display: contents;
}
scrollbox {
    justify-content: var(--ug_tabs_position) !important;
}
slot {
  display: var(--ug_slot_display) !important;
}

/* Rahmen um Tab weg*/
.tab-background {
  &:is([selected], [multiselected]) {
  outline-color: transparent !important;
}
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

/*Aktiver Tab HG orange
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}*/

/*Aktiver Tab Schrift white
tab.tabbrowser-tab .tab-content[selected] { 
  color: white !important;
  font-weight: bold !important;
}*/

/* Tabs ohne Rundungen */
tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  border-radius: 0 !important;
}

/* Oben ein weißer Balken */
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  box-shadow: none !important;
  border-top: 4px solid white !important;
}

/*  Schriftgröße Tabs */
.tab-text {
  font-size: 15px !important; 
	margin-bottom: 3px !important; 
}
		
/*  Schließen Kreuz größer */
.tab-close-button {
  transform: scale(1.5, 1.5) !important;
  margin-left: 5px !important;
}

/*   Tab Mindestbreite einstellen  */
tabs tab[fadein]:not([pinned]) {
  min-width: 210px !important;/* Minimale Tabbreite 76px */
  max-width: 250px !important;/* Maximale Tabbreite 225px */
}

Alles anzeigen

Oder den anderen Code angepasst:

CSS

/* Grauer Kasten: */
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
  border-top: none !important;
}

/* Tab unten */
#TabsToolbar {
  order: 100 !important;
}       

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
  margin-left: 0 !important;
  margin-right: 0 !important;
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 30px !important;
  background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 0 8px !important;
  background-size: 25px 17px !important;
}

/* Tabs mittig */
#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([hidden])) {
    margin-left: auto !important;
}

#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
}

/* Rahmen um Tab weg*/
.tab-background {
  &:is([selected], [multiselected]) {
  outline-color: transparent !important;
}
}

/* Tabtext nicht verschoben bei hover */
.tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 0px !important;
  width: unset !important;
}

/* Tabtext wird nicht ausgeblendet Kurzform */
.tabbrowser-tab .tab-label-container {
  mask-image: none !important;
}

/*Aktiver Tab HG orange
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  background: orange !important;
  box-shadow: none !important;
}*/

/*Aktiver Tab Schrift white
tab.tabbrowser-tab .tab-content[selected] { 
  color: white !important;
  font-weight: bold !important;
}*/

/* Tabs ohne Rundungen */
tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
  border-radius: 0 !important;
}

/* Oben ein weißer Balken */
tab.tabbrowser-tab[selected] stack.tab-stack vbox.tab-background {
  box-shadow: none !important;
  border-top: 4px solid white !important;
}

/*  Schriftgröße Tabs */
.tab-text {
  font-size: 15px !important; 
	margin-bottom: 3px !important; 
}
		
/*  Schließen Kreuz größer */
.tab-close-button {
  transform: scale(1.5, 1.5) !important;
  margin-left: 5px !important;
}

/*   Tab Mindestbreite einstellen  */
tabs tab[fadein]:not([pinned]) {
  min-width: 210px !important;/* Minimale Tabbreite 76px */
  max-width: 250px !important;/* Maximale Tabbreite 225px */
}

Alles anzeigen

Parzival

Beide Codes machen das was sie sollen, also ich sehe jetzt keinen Unterschied 👍😉

Eine Frage noch, könnte man die Tabs in der Höhe noch etwas anpassen 😇?

2002Andreas

Zitat von Parzival

die Tabs in der Höhe noch etwas anpassen

was genau meinst du damit?

Du könntest z.B. in about:config den Wert:

browser.compactmode.show

auf true setzen.

Und dann das aktivieren:

Dann sind die Tabs schmaler:

Parzival

Ich meinte damit ob man die Tabshöhe noch etwas höher machen kann.

2002Andreas

Zitat von Parzival

noch etwas höher machen kann.

Den Wert musst du dir anpassen:

CSS

#tabbrowser-tabs {
  min-height: 65px !important;
  max-height: 65px !important;
}

Parzival

Ja, jetzt ist es perfekt 😉🤠!!!

Danke nochmal für deine großartige Hilfe 👍👍👍!!!

2002Andreas

Zitat von Parzival

Danke nochmal für deine großartige Hilfe

Gern geschehen

Zitat von Parzival

jetzt ist es perfekt

So sollte es ja auch sein

Boersenfeger

Parzival

Vielleicht hätte ich noch ein paar Modalitäten

CSS

    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {
	display: none !important; 
    }

    /* Schriftgröße Tabs */

    .tab-text {
    font-size: 17px !important;
    }

    /* Damit wird der Tabtext am Ende schleichend ausgeblendet */

    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 1em) !important; 
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 150px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 220px !important;
    flex-grow: 0 !important;
    }
    
    /* Schriftgröße Tabs */

    .tab-text {
    font-size: 18px !important;
    }

Alles anzeigen

Größen ggf. anpassen

Meine Tabs sind rund, der Code sollte aber auch für deine Auswahl der Form passen,

Parzival

Hi Andreas!

Ich schon wieder 🙈.

Die Favicon hätte ich gerne etwas größer, kannst du mir dafür den Code nennen?

Grüße Parzival

Boersenfeger

CSS

/* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand */
	
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -2px !important;    
    margin-bottom: 2px !important;
    }
    
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepasst */
 
    #TabsToolbar .tab-close-button {
    margin-right: -6px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 6px !important;
    width:  6px !important;    
    background-color: red !important;
    border-radius: 12px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 155px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 220px !important;
    flex-grow: 0 !important;
    }

Alles anzeigen

Bin nicht Andreas, aber gerade noch drauf... Größe anpassen

Parzival

Vielen Dank Boersenfeger 👍! Hat super geklappt 🤗😁!

Boersenfeger

Das freut mich

gabinski

Hallo zusammen,

lange ging alles gut, doch jetzt hats mir meine FF-Scripte zerschossen

Die Tabs möchte ich gerne wieder unter der Lesezeichenleiste haben und das blaue Theme sollte durchgängig sichtbar sein - also Lesezeichen und Addons nicht grau abgesetzt wie aktuell. Was stimmt nicht mehr mit meinem Code?

#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
}

#tabbrowser-tabs {
width: 95vw;
}

#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 8px );
}

.titlebar-buttonbox-container {
position: fixed;
right: 0;
visibility: visible;
display: block;
}

#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
}

/*...................Ab hier nur Privater Modus...................*/

/*Das lila Icon für privaten Modus oben rechts eingefügt*/
#main-window[privatebrowsingmode=temporary] #PanelUI-menu-button::before {
margin-left: 0px!important;
margin-right: 0px !important;
content: '' !important;
display: block !important;
width: 19px !important;
height: 19px !important;
background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
background-repeat: no-repeat !important;
background-position: 0px 2px !important;
background-size: 15px 15px !important;
}

/*Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt*/
#private-browsing-indicator-with-label {
display: none !important;
}

Ein weiteres Problem: Wenn ich auf der FF-Startseite etwas ins Suchfeld eingebe (also in der Mitte der Seite), schreibt er automatisch ins URL-Feld oben - das hätte ich gerne anders.

.DeJaVu

Zu deinem CSS oder Scripte kann ich nichts sagen. Nur, dass man dabei am Ball bleiben muss, das ist kein set and forget, sondern braucht Pflege wie ein Haustierchen

Zur Suche, schau mal im about:config nach

browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar <-- false

Evtl auch nur geraten, weil ich die Suchleiste schon ewig und drei Jahre nicht mehr nutze. Die Adresseingabe kann das auch, und vieles mehr.

gabinski

Zitat von .DeJaVu

Zur Suche, schau mal im about:config nach
browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar <-- false

Das hat geholfen, merci!

2002Andreas

Zitat von gabinski

Die Tabs möchte ich gerne wieder unter der Lesezeichenleiste haben

Ich kenne dein Theme nicht, darum ein Beispiel:

CSS

/* Tableiste unter der Lesezeichen-Symbolleiste */
#TabsToolbar {
   order: 100 !important;
}      

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts vor dem Hamburger-Button eingefügt */
#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
    padding-top: 10px !important;
    content: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
}

/* Der neue zusätzliche Eintrag: Privater Modus in der Tableiste entfernt */  
.private-browsing-indicator-with-label {
    display: none !important;
}

Alles anzeigen

gabinski

Danke Dir, Andreas,

hab das Problem gefunden, es war der Eintrag in about:config "toolkit.legacyUserProfileCustomizations.stylesheets", den ich umstellen musste. Nach dem Klonen auf eine andere Festplatte war das alles wieder umgestellt

Tableiste unten per CSS-Code, oder per Skript.

2002Andreas 7. April 2025 um 16:06

Ähnliche Themen

FAQ: Menü-, Adress- und Tableiste unterhalb des Fensters anzeigen? (FF 71+)

Firefox 70 - Tabs wieder oben

Firefox Nightly 71.0a1 vom 07.10. Leerfläche unter Tableiste?

Tabs nach unten machen

Tableiste ist über der Adressleiste?