Höhe der Tabs ändern ?

AngelOfDarkness

Auch mit einem neuen Profil und komplett ohne Erweiterungen, Scripte und nur mit dem Code?

superbertel

Ich hab jetzt mal ein neues Profil angelegt, das passt es soweit. Und wenn ich die userChrome in das Profil reinkopiere, sind die Tabs wieder zu hoch. Es muss also doch an der userChrome liegen. Ich weiß nicht mehr weiter...

freakyno1

Bei mir schaut der Code für mehrzeilige Tabs so aus:

CSS

/*Mehrzeilige Tab-Leiste*/


/*AGENT_SHEET*/


/* tabs height for "classic tabs" */
:root {
  --tab-min-height: 22px !important;
}


.tabbrowser-tab:not([pinned]) {
  flex-grow: 1;
  min-width: 125px !important;
  max-width: 125px !important;
}


.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height);
}


.tab-stack {
  width: 100%;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(4*var(--tab-min-height)) !important; /* 4 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


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

Alles anzeigen

Funktioniert gut und die Tabs sind auch "normal", nicht so hoch wie bei dir.
DEn Code habe ich auch hier aus dem Forum, war glaube ich auch von dir 2002Andreas.
Danke auch dafür... :klasse:

superbertel

Hab jetzt mal ein neues Profil angelegt und nach und nach die einzelnen Scripte in die userChrome eingefügt.

Es liegt definitiv an dem Script mit der mehrzeiligen TabLeiste.

@freakyno1: auch Deins habe ich ausprobiert, das gleiche Problem

Werde wohl damit leben müssen.

Fox2Fox

Teste mal diesen Code (der bei mir funktioniert)

CSS

/*Mehrzeilige Tab-Leiste*/


/*AGENT_SHEET*/


/* tabs height for "classic tabs" */
:root {
  --tab-min-height: 22px !important;
}


.tabbrowser-tab {
  flex-grow: 1;
  min-width: 128px !important;
  max-width: 128px !important;
}


.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height);
}


.tab-stack {
  width: 100%;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(10*var(--tab-min-height)) !important; /* 10 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


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

Alles anzeigen

superbertel

Leider keine Verbesserung !

2002Andreas

Ok, noch ein Versuch von mir :wink:

CSS

/*Mehrzeilige Tab-Leiste*/


/*AGENT_SHEET*/


/* tabs height for "classic tabs" */
:root {
  --tab-min-height: 18px !important;
}


.tabbrowser-tab {
max-height:18px!important;
  flex-grow: 1;
  min-width: 128px !important;
  max-width: 128px !important;
}


.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height);
}


.tab-stack {
  width: 100%;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(10*var(--tab-min-height)) !important; /* 10 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


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

Alles anzeigen

Das wäre dein kompl. Code mit obigen Anpassungen:

CSS

/*AGENT_SHEET*/


/* Firefox 57+ userChrome.css tweaks ****************************************************/
/* code mostly taken from 'NoiaButtons' add-on ******************************************/
/* by Aris (aris-addons@gmx.net)*********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


/****************************************************************************************/
/* NoiaButtons add-on for Firefox 57+ ***************************************************/
/****************************************************************************************/


/* icons for default browser buttons ****************************************************/
@import url(./css/toolbar_buttons_noia.css);
/*@import url(./css/toolbar_buttons_firefox1.css);*/
/*@import url(./css/toolbar_buttons_firefox2.css);*/
/*@import url(./css/toolbar_buttons_firefox3.css);*/
/*@import url(./css/toolbar_buttons_firefox3aero.css);*/


/* shrink icons on hover ****************************************************************/
@import url(./css/toolbar_buttons_reduce_size_on_hover.css);


/* icon size on navigation toolbar (auto: compact=24/normal=30/touch=36) ****************/
@import url(./css/toolbar_buttons_size_on_navbar_auto.css);
/*@import url(./css/toolbar_buttons_size_on_navbar_18px.css);*/
/*@import url(./css/toolbar_buttons_size_on_navbar_24px.css);*/
/*@import url(./css/toolbar_buttons_size_on_navbar_30px.css);*/
/*@import url(./css/toolbar_buttons_size_on_navbar_36px.css);*/


/* location bar: go button and autocomple dropmarker icons ******************************/
@import url(./css/locationbar_buttons.css);


/* light Noia theme for tabs & toolbars + 'tabs not on top' (known from "Noia" themes) **/
/*@import url(./css/noiaui_light.css);*/
/*@import url(./css/noiaui_light_tabs_below_navigation_toolbar.css);*/


/* dark Noia theme for tabs & toolbars + 'tabs not on top' (known from "Noia" themes) ***/
/*@import url(./css/noiaui_dark.css);*/
/*@import url(./css/noiaui_dark_tabs_below_navigation_toolbar.css);*/


/**/




/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */


/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 
url("chrome://browser/content/history/history-panel.xul") {
	treechildren::-moz-tree-image(container) {
fill:orange !important;}
}


/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xul") {
	treechildren::-moz-tree-image(container) {
fill:orange !important;}
}


/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xul") {
	.bookmark-item[container="true"] {
fill:orange !important;}
}




#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}
 
#TabsToolbar .tabbrowser-tab {
   color: white !important;
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 15px 15px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}


#TabsToolbar .tabbrowser-tab:hover {
   color: white !important;
}


#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: orange !important;
  font-weight:bold !important;
  color: black ! important;
}


#TabsToolbar .tab-icon-image {
  height: 20px !important;
  width:  20px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: white !important;
}


#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}












/* Do not remove the @namespace line -- it's required for correct functioning
 * set default namespace to XUL
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


/**********************************************************
 ********** Reihenfolge der Leisten ***********************
 **********************************************************/


/* Die Reihenfolge der Leisten im Leisten-Container wird durch die
 * zugewiesenen Zahlen der "-moz-box-ordinal-group" bestimmt:
 * Oben die Menü-Leiste, darunter die Navigations-Leiste danach
 * die Lesezeichen-Leiste, unten die TAB-Leiste, so wie man es
 * von früher her gewohnt ist.
 * 
 * Oft wird eine andere Vorgehensweise beschrieben.
 * Ob es wichtig ist? Ich habe sie jedenfalls einfach von 1 bis 4
 * durchnummeriert, das ist übersichtlich und hat bisher geklappt.
 */
#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;
}




	


#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}


.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
  display: none !important;
}




/* tabs height for "classic tabs" */
:root {
  --tab-min-height: 18px !important;
}


.tabbrowser-tab:not([pinned]) {
  flex-grow: 1;
  max-height:18px!important;
  min-width: 170px !important;
  max-width: 170px !important;
}


.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height);
}


.tab-stack {
  width: 100%;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


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




/*Senkrechte Striche in der Menuleiste (Flexibler Zwischenraum=Strich)*/
#nav-bar toolbarspring {
	background: transparent !important;
	max-width: 0px !important;
	min-width: 0px !important;
	width: 0px !important;
	border-left: 1px solid black !important;
	border-right: 1px solid black !important;
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

Alles anzeigen

superbertel

Andreas, Du bist mein Held !!! Schaut jetzt so aus:

[attachment=0]Screenshot5.png[/attachment]

Vielen herzlichen Dank für die Mühe.

Was war jetzt letztendlich der Knackpunkt ?

Noch etwas: ich habe momentan absolute PerfomanceProbleme mit Firefox. Tabs laden teilweise minutenlang überhaupt nicht. Bilde mir ein, das ist seit dem letzten Update auf 58.0b10 so. Kann das jemand bestätigen ? Vorher haben die Seiten nur so gefluscht, das war die reinste Freude.

2002Andreas

Zitat von superbertel

Was war jetzt letztendlich der Knackpunkt ?

Ich habe hier:

Zitat

.tabbrowser-tab {
max-height:18px!important;
flex-grow: 1;
min-width: 128px !important;
max-width: 128px !important;
}

eine begrenzte Höhe für die Tabs zusätzlich eingefügt.

Zitat von superbertel

das ist seit dem letzten Update auf 58.0b10 so

Dafür solltest du wenn dann einen neuen Thread eröffnen, und zwar unter Firefox Builds
da es sich ja um eine Beta Version handelt.
Wobei man bei einer Beta Version immer mal mit kleinen Problemen zu tun haben kann.

Ansonsten, freut mich dass dein Problem behoben ist.

superbertel

Oh nein.

Seit dem Update auf 60.0.1 sind die Tabs wieder riesig groß (hoch).

Eine Veränderung des Wertes max-height:18px!important; bewirkt leider überhaupt nichts.

Hat jemand einen Rat für mich ?

2002Andreas

Nur ein Versuch, teste bitte mal diesen kompletten neuen Code:

CSS

/*AGENT_SHEET*/


/* Firefox 57+ userChrome.css tweaks ****************************************************/
/* code mostly taken from 'NoiaButtons' add-on ******************************************/
/* by Aris (aris-addons@gmx.net)*********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


/****************************************************************************************/
/* NoiaButtons add-on for Firefox 57+ ***************************************************/
/****************************************************************************************/


/* icons for default browser buttons ****************************************************/
@import url(./css/toolbar_buttons_noia.css);
/*@import url(./css/toolbar_buttons_firefox1.css);*/
/*@import url(./css/toolbar_buttons_firefox2.css);*/
/*@import url(./css/toolbar_buttons_firefox3.css);*/
/*@import url(./css/toolbar_buttons_firefox3aero.css);*/


/* shrink icons on hover ****************************************************************/
@import url(./css/toolbar_buttons_reduce_size_on_hover.css);


/* icon size on navigation toolbar (auto: compact=24/normal=30/touch=36) ****************/
@import url(./css/toolbar_buttons_size_on_navbar_auto.css);
/*@import url(./css/toolbar_buttons_size_on_navbar_18px.css);*/
/*@import url(./css/toolbar_buttons_size_on_navbar_24px.css);*/
/*@import url(./css/toolbar_buttons_size_on_navbar_30px.css);*/
/*@import url(./css/toolbar_buttons_size_on_navbar_36px.css);*/


/* location bar: go button and autocomple dropmarker icons ******************************/
@import url(./css/locationbar_buttons.css);


/* light Noia theme for tabs & toolbars + 'tabs not on top' (known from "Noia" themes) **/
/*@import url(./css/noiaui_light.css);*/
/*@import url(./css/noiaui_light_tabs_below_navigation_toolbar.css);*/


/* dark Noia theme for tabs & toolbars + 'tabs not on top' (known from "Noia" themes) ***/
/*@import url(./css/noiaui_dark.css);*/
/*@import url(./css/noiaui_dark_tabs_below_navigation_toolbar.css);*/


/**/




/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */


/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/* Lesezeichen Sidebar - Ordnericon stehend gelb */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xul"), 
url("chrome://browser/content/history/history-panel.xul") {
	treechildren::-moz-tree-image(container) {
fill:orange !important;}
}


/* Lesezeichen verwalten - Ordnericon stehend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xul") {
	treechildren::-moz-tree-image(container) {
fill:orange !important;}
}


/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xul") {
	.bookmark-item[container="true"] {
fill:orange !important;}
}




#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}
 
#TabsToolbar .tabbrowser-tab {
   color: white !important;
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 15px 15px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}


#TabsToolbar .tabbrowser-tab:hover {
   color: white !important;
}


#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: orange !important;
  font-weight:bold !important;
  color: black ! important;
}


#TabsToolbar .tab-icon-image {
  height: 20px !important;
  width:  20px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: white !important;
}


#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}












/* Do not remove the @namespace line -- it's required for correct functioning
 * set default namespace to XUL
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


/**********************************************************
 ********** Reihenfolge der Leisten ***********************
 **********************************************************/


/* Die Reihenfolge der Leisten im Leisten-Container wird durch die
 * zugewiesenen Zahlen der "-moz-box-ordinal-group" bestimmt:
 * Oben die Menü-Leiste, darunter die Navigations-Leiste danach
 * die Lesezeichen-Leiste, unten die TAB-Leiste, so wie man es
 * von früher her gewohnt ist.
 * 
 * Oft wird eine andere Vorgehensweise beschrieben.
 * Ob es wichtig ist? Ich habe sie jedenfalls einfach von 1 bis 4
 * durchnummeriert, das ist übersichtlich und hat bisher geklappt.
 */
#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;
}




	


#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}


.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
  display: none !important;
}




/* tabs height for "classic tabs" */
 #titlebar,#tabbrowser-tabs{
  --tab-min-height: 18px !important;
}


.tabbrowser-tab:not([pinned]) {
  flex-grow: 1;
  max-height:18px!important;
  min-width: 170px !important;
  max-width: 170px !important;
}


.tabbrowser-tab,.tab-background {
  min-height: var(--tab-min-height);
}


.tab-stack {
  width: 100%;
}


#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto !important;
  min-height: var(--tab-min-height);
  max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */
}


#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}


#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}


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




/*Senkrechte Striche in der Menuleiste (Flexibler Zwischenraum=Strich)*/
#nav-bar toolbarspring {
	background: transparent !important;
	max-width: 0px !important;
	min-width: 0px !important;
	width: 0px !important;
	border-left: 1px solid black !important;
	border-right: 1px solid black !important;
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

Alles anzeigen

superbertel

Guten Morgen Andreas,

Du Fuchs hast es wieder mal hinbekommen. Vielen herzlichen Dank!

2002Andreas

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

superbertel

Oh nein.

Nach dem Upgrade auf 71.0 habe ich die Tabs nicht mehr mehrzeilig untereinander, sondern

alle in einer Zeile nebeneinander.

Kann mir bitte jemand sagen, wie ich den alten Zustand wieder herstellen kann ?

2002Andreas

Das halbe Unterforum Anpassungen besteht fast nur aus der gleichen Nachfrage dazu.

Und Lösungen dafür wurden auch schon gegeben.

Hier z.B.:

Mehrzeilige Tableiste für aktuelle FireFox-Versionen (71+)

superbertel

Danke Andreas, habs wieder hingebracht !

2002Andreas