In Fx 96.0.1 funktioniert die Hintergrundfarbe für die diversen Leisten nicht mehr...

Fischkopp

Hallo zusammen,

seit bereits längerer Zeit färbe ich mir den Hintergrund der Menüzeile, der Symbol-/Adress-Leiste, der Lesezeichenleiste und der Tab-Leiste in hellblau ein, weil ich es für meine Augen als angenehmer empfinde. Nach dem Update auf die 96.0.1 (von der letzten 95.?) wird leider nur noch die Tab-Leiste eingefärbt.

"Mein" Fx sieht jetzt nach dem Update aus wie auf dem Screenshot:

Vorher waren alle genannten Leisten hellblau wie jetzt nur noch die Tab-Leiste...

Der CSS-code für die chrome.css ist folgender:

CSS

/****************************************************************************************/
/* DEN HIER BENUTZTEN VARIABLEN WERTE ZUWEISEN                                          */
/****************************************************************************************/

:root {
  --tab_min_width: 50px;
  --tab_max_width: 180px;
 
  --classic_squared_tabs_tab_height: 26px !important;
  --classic_squared_tabs-border-radius: 10px !important;
  --default_tab_border_roundness: 5px  !important;
 
  --general_toolbar_color_toolbars: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --general_toolbar_color_navbar: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --colored_menubar_background_image: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* TAB_MIN_WIDTH UND TAB_MAX_WIDTH SETZEN                                               */
/****************************************************************************************/

/* tab max-width */
.tabbrowser-tab:not([pinned]) {
  min-width: var(--tab_min_width) !important;
  clip-width: var(--tab_min_width) !important;
}

/* tab max-width */
#tabbrowser-tabs:not([overflow="true"]):not([using-closing-tabs-spacer="true"]) .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--tab_max_width) !important;
  overflow: hidden !important;
}


/****************************************************************************************/
/* EIGENE HINTERGRUNDFARBEN FÜR DIE TOOLBARS                                            */
/****************************************************************************************/

/* hierfür ist folgender Code aus "tab_toolbar_colors_force_menubar_color.css" nötig:   */
/****************************************************************************************/
#main-window:not(:-moz-lwtheme) #navigator-toolbox #TabsToolbar {
  -moz-appearance: none !important;
  background: var(--colored_menubar_background_image, inherit) !important;
}

/****************************************************************************************/
/* EIGENE FARBEN FÜR DIE TABS                                                           */
/****************************************************************************************/

/*******************************************/
/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: linear-gradient(to bottom,#66FFFF,#33CCFF) !important;  /*RGB(102,255,255),RGB(51,204,255)*/
}

/*******************************************/
/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
  border: 1px solid black !important;
  border-bottom: none !important;
}

/*******************************************/
/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}

/*******************************************/
/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* unread tab ******************************/

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[unread] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}


/****************************************************************************************/
/* FLEXIBLER ZWISCHENRAUM AUF MINIMALE UND MAXIMALE (ALSO FESTE) BREITE SETZEN          */
/****************************************************************************************/

toolbarspring {
    -moz-box-flex: 1;
    min-width: 10px!important;
    max-width: 10px!important;
}

toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
    min-width: 10px!important;
    max-width: 10px!important;
}


/****************************************************************************************/
/* DEN ZOOM DER ADRESSLEISTE AUSSCHALTEN                                                */
/****************************************************************************************/

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}


/****************************************************************************************/
/* ZEILENABSTÄNDE IN DEN MENÜS UND LESEZEICHEN WIEDER AUF DAS ALTE MASS REDUZIEREN      */
/****************************************************************************************/

menupopup > menuitem,
menupopup > menu {
  padding-block: 2px !important;
  padding-inline-start: 14px !important;
}


/****************************************************************************************/
/* SCHRIFTGRÖSSE IN MENÜLEISTE UND LESEZEICHENLEISTE ANPASSEN                           */
/****************************************************************************************/

#main-menubar > menu {
   font-size: 14px !important;
}

#PersonalToolbar .toolbarbutton-text {
font-size: 14px !important;
}

Alles anzeigen

Den Code habe ich mir aus Aris-t2's "CustomCSSforFx" selbst "zusammengestoppelt.

Kann mir hier freundlicherweise jemand helfen, die Farbgebung wieder auf den alten Stand zu bringen? Was muss ich dazu am Code ändern?

1000 Dank im voraus und schöne Grüße

Peter

2002Andreas

Zitat von Fischkopp

Vorher waren

Meinst du das so?

Wenn ja, dann teste bitte diesen kompl. Code mal:

CSS

/****************************************************************************************/
/* DEN HIER BENUTZTEN VARIABLEN WERTE ZUWEISEN                                          */
/****************************************************************************************/

:root {
  --tab_min_width: 50px;
  --tab_max_width: 180px;
 
  --classic_squared_tabs_tab_height: 26px !important;
  --classic_squared_tabs-border-radius: 10px !important;
  --default_tab_border_roundness: 5px  !important;
 
  --general_toolbar_color_toolbars: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --general_toolbar_color_navbar: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --colored_menubar_background_image: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* TAB_MIN_WIDTH UND TAB_MAX_WIDTH SETZEN                                               */
/****************************************************************************************/

/* tab max-width */
.tabbrowser-tab:not([pinned]) {
  min-width: var(--tab_min_width) !important;
  clip-width: var(--tab_min_width) !important;
}

/* tab max-width */
#tabbrowser-tabs:not([overflow="true"]):not([using-closing-tabs-spacer="true"]) .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--tab_max_width) !important;
  overflow: hidden !important;
}


/****************************************************************************************/
/* EIGENE HINTERGRUNDFARBEN FÜR DIE TOOLBARS                                            */
/****************************************************************************************/

/* hierfür ist folgender Code aus "tab_toolbar_colors_force_menubar_color.css" nötig:   */
/****************************************************************************************/
#navigator-toolbox-background, 
#nav-bar,
#PersonalToolbar{
  -moz-appearance: none !important;
  background: var(--colored_menubar_background_image, inherit) !important;
}

/****************************************************************************************/
/* EIGENE FARBEN FÜR DIE TABS                                                           */
/****************************************************************************************/

/*******************************************/
/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: linear-gradient(to bottom,#66FFFF,#33CCFF) !important;  /*RGB(102,255,255),RGB(51,204,255)*/
}

/*******************************************/
/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
  border: 1px solid black !important;
  border-bottom: none !important;
}

/*******************************************/
/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}

/*******************************************/
/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* unread tab ******************************/

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[unread] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}


/****************************************************************************************/
/* FLEXIBLER ZWISCHENRAUM AUF MINIMALE UND MAXIMALE (ALSO FESTE) BREITE SETZEN          */
/****************************************************************************************/

toolbarspring {
    -moz-box-flex: 1;
    min-width: 10px!important;
    max-width: 10px!important;
}

toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
    min-width: 10px!important;
    max-width: 10px!important;
}


/****************************************************************************************/
/* DEN ZOOM DER ADRESSLEISTE AUSSCHALTEN                                                */
/****************************************************************************************/

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}


/****************************************************************************************/
/* ZEILENABSTÄNDE IN DEN MENÜS UND LESEZEICHEN WIEDER AUF DAS ALTE MASS REDUZIEREN      */
/****************************************************************************************/

menupopup > menuitem,
menupopup > menu {
  padding-block: 2px !important;
  padding-inline-start: 14px !important;
}


/****************************************************************************************/
/* SCHRIFTGRÖSSE IN MENÜLEISTE UND LESEZEICHENLEISTE ANPASSEN                           */
/****************************************************************************************/

#main-menubar > menu {
   font-size: 14px !important;
}

#PersonalToolbar .toolbarbutton-text {
font-size: 14px !important;
}

Alles anzeigen

Fischkopp

Hi Andreas,

tausend Dank! Ja, so sollte es aussehen und Dein Code funktioniert (fast) super: der Tab-Leisten-Hintergrund ist jetzt grau statt hellblau.

Ich werde Deinen Code mal mit meinem alten Code vergleichen und das dann wohl (hoffentlich) selbst auf die Reihe bekommen...

Peter

2002Andreas

Zitat von Fischkopp

der Tab-Leisten-Hintergrund ist jetzt grau statt hellblau.

Hier nicht, siehe meinen Screenshot oben

Ansonsten teste es so bitte mal:

CSS

/****************************************************************************************/
/* DEN HIER BENUTZTEN VARIABLEN WERTE ZUWEISEN                                          */
/****************************************************************************************/

:root {
  --tab_min_width: 50px;
  --tab_max_width: 180px;
 
  --classic_squared_tabs_tab_height: 26px !important;
  --classic_squared_tabs-border-radius: 10px !important;
  --default_tab_border_roundness: 5px  !important;
 
  --general_toolbar_color_toolbars: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --general_toolbar_color_navbar: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --colored_menubar_background_image: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* TAB_MIN_WIDTH UND TAB_MAX_WIDTH SETZEN                                               */
/****************************************************************************************/

/* tab max-width */
.tabbrowser-tab:not([pinned]) {
  min-width: var(--tab_min_width) !important;
  clip-width: var(--tab_min_width) !important;
}

/* tab max-width */
#tabbrowser-tabs:not([overflow="true"]):not([using-closing-tabs-spacer="true"]) .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--tab_max_width) !important;
  overflow: hidden !important;
}


/****************************************************************************************/
/* EIGENE HINTERGRUNDFARBEN FÜR DIE TOOLBARS                                            */
/****************************************************************************************/

/* hierfür ist folgender Code aus "tab_toolbar_colors_force_menubar_color.css" nötig:   */
/****************************************************************************************/
#navigator-toolbox-background, 
#nav-bar,
#TabsToolbar,
#PersonalToolbar{
  -moz-appearance: none !important;
  background: var(--colored_menubar_background_image, inherit) !important;
}

/****************************************************************************************/
/* EIGENE FARBEN FÜR DIE TABS                                                           */
/****************************************************************************************/

/*******************************************/
/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: linear-gradient(to bottom,#66FFFF,#33CCFF) !important;  /*RGB(102,255,255),RGB(51,204,255)*/
}

/*******************************************/
/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
  border: 1px solid black !important;
  border-bottom: none !important;
}

/*******************************************/
/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}

/*******************************************/
/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* unread tab ******************************/

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[unread] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}


/****************************************************************************************/
/* FLEXIBLER ZWISCHENRAUM AUF MINIMALE UND MAXIMALE (ALSO FESTE) BREITE SETZEN          */
/****************************************************************************************/

toolbarspring {
    -moz-box-flex: 1;
    min-width: 10px!important;
    max-width: 10px!important;
}

toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
    min-width: 10px!important;
    max-width: 10px!important;
}


/****************************************************************************************/
/* DEN ZOOM DER ADRESSLEISTE AUSSCHALTEN                                                */
/****************************************************************************************/

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}


/****************************************************************************************/
/* ZEILENABSTÄNDE IN DEN MENÜS UND LESEZEICHEN WIEDER AUF DAS ALTE MASS REDUZIEREN      */
/****************************************************************************************/

menupopup > menuitem,
menupopup > menu {
  padding-block: 2px !important;
  padding-inline-start: 14px !important;
}


/****************************************************************************************/
/* SCHRIFTGRÖSSE IN MENÜLEISTE UND LESEZEICHENLEISTE ANPASSEN                           */
/****************************************************************************************/

#main-menubar > menu {
   font-size: 14px !important;
}

#PersonalToolbar .toolbarbutton-text {
font-size: 14px !important;
}

Alles anzeigen

Fischkopp

Hallo Andreas,

Du bist ja schneller als der Schall!

Ich habe auch mal den letzten Code probiert, keine Änderung. Und auch eigenes Probieren und Suchen hat mich nicht weitergebracht.

Jetzt könnte nur noch sein, dass ein Code aus der "CustomCSSforFx" stört, denn daraus lade ich auch noch einige Einstellungen. Aber auch da bin ich nicht fündig geworden...

Könntest Du freundlicherweise mal drüberschauen, in welcher Datei der Hund begraben sein könnte? Ich füge meine komplette userChrome.css mal hier bei, allerdings nicht die dadurch importierten Dateien; denn ich vermute mal, dass Du diese userChrome.css mit den zu importieren Dateien selbst hast...?

Wenns nicht anders geht, muss ich eben mit der grauen Tableiste leben.

Danke nochmals,

Peter

2002Andreas

Zitat von Fischkopp

diese userChrome.css mit den zu importieren Dateien selbst hast...?

Nein.

Ich nutze keine Codes von Aris.

Zitat von Fischkopp

keine Änderung.

In deinem ersten Code ist die Tableiste hellblau laut Screenshot und Aussage von dir.

Daran hatte ich nichts verändert

Damit habe ich den Leisten mal die Hg Farbe direkt gegeben:

CSS

/****************************************************************************************/
/* DEN HIER BENUTZTEN VARIABLEN WERTE ZUWEISEN                                          */
/****************************************************************************************/

:root {
  --tab_min_width: 50px;
  --tab_max_width: 180px;
 
  --classic_squared_tabs_tab_height: 26px !important;
  --classic_squared_tabs-border-radius: 10px !important;
  --default_tab_border_roundness: 5px  !important;
 
  --general_toolbar_color_toolbars: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --general_toolbar_color_navbar: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --colored_menubar_background_image: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* TAB_MIN_WIDTH UND TAB_MAX_WIDTH SETZEN                                               */
/****************************************************************************************/

/* tab max-width */
.tabbrowser-tab:not([pinned]) {
  min-width: var(--tab_min_width) !important;
  clip-width: var(--tab_min_width) !important;
}

/* tab max-width */
#tabbrowser-tabs:not([overflow="true"]):not([using-closing-tabs-spacer="true"]) .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--tab_max_width) !important;
  overflow: hidden !important;
}


/****************************************************************************************/
/* EIGENE HINTERGRUNDFARBEN FÜR DIE TOOLBARS                                            */
/****************************************************************************************/

/* hierfür ist folgender Code aus "tab_toolbar_colors_force_menubar_color.css" nötig:   */
/****************************************************************************************/
#navigator-toolbox-background, 
#nav-bar,
#TabsToolbar,
#PersonalToolbar{
  -moz-appearance: none !important;
  background: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* EIGENE FARBEN FÜR DIE TABS                                                           */
/****************************************************************************************/

/*******************************************/
/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: linear-gradient(to bottom,#66FFFF,#33CCFF) !important;  /*RGB(102,255,255),RGB(51,204,255)*/
}

/*******************************************/
/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
  border: 1px solid black !important;
  border-bottom: none !important;
}

/*******************************************/
/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}

/*******************************************/
/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* unread tab ******************************/

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[unread] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}


/****************************************************************************************/
/* FLEXIBLER ZWISCHENRAUM AUF MINIMALE UND MAXIMALE (ALSO FESTE) BREITE SETZEN          */
/****************************************************************************************/

toolbarspring {
    -moz-box-flex: 1;
    min-width: 10px!important;
    max-width: 10px!important;
}

toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
    min-width: 10px!important;
    max-width: 10px!important;
}


/****************************************************************************************/
/* DEN ZOOM DER ADRESSLEISTE AUSSCHALTEN                                                */
/****************************************************************************************/

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}


/****************************************************************************************/
/* ZEILENABSTÄNDE IN DEN MENÜS UND LESEZEICHEN WIEDER AUF DAS ALTE MASS REDUZIEREN      */
/****************************************************************************************/

menupopup > menuitem,
menupopup > menu {
  padding-block: 2px !important;
  padding-inline-start: 14px !important;
}


/****************************************************************************************/
/* SCHRIFTGRÖSSE IN MENÜLEISTE UND LESEZEICHENLEISTE ANPASSEN                           */
/****************************************************************************************/

#main-menubar > menu {
   font-size: 14px !important;
}

#PersonalToolbar .toolbarbutton-text {
font-size: 14px !important;
}

Alles anzeigen

Ab Zeile 41 ist die Änderung.

Fischkopp

Lieben Dank für Deine Hilfe und Geduld, Andreas!

Mit der "direkten" Einfärbung ändert sich nichts, die Tab-Leiste bleibt grau...

Ich versteh's auch nicht, dass mit meinem "alten" CSS-code die Tab-Leiste blau war, die anderen grau, und mit dem "neuen" genau umgekehrt.

Wenn sonst niemand eine Idee hat, dann muss ich wohl mit dem jetzigen Aussehen leben.

Gruß

Peter

2002Andreas

Zitat von Fischkopp

Mit der "direkten" Einfärbung ändert sich nichts, die Tab-Leiste bleibt grau...

Ich habe die Farbe mal auf rot geändert, funktioniert einwandfrei:

.DeJaVu

Zitat von Fischkopp

Jetzt könnte nur noch sein, dass ein Code aus der "CustomCSSforFx" stört

Wird normalerweise in den Browserwerkzeugen angezeigt. Daher immer den gesamt genutzten Code einbringen, und wenn das mehr als eine Datei ist, den \chrome\ Ordner packen und als ZIP anhängen.

Ich nutze auch CSS von Aris, und sobald man CSS von Aris übergehen will, muss a) das CSS bekannt sein und b) die Änderungen immer danach erfolgen. Deswegen gibt es hier (und auch in Aris Sammlung) eine Korrekturdatei.

milupo

Ich sehe auch nur hellblau, getestet mit den Codes aus den Beiträgen #1, #2 und #4. Was mich allerdings wundert, dass es mit Beitrag #2 funktioniert, obwohl in den Zeilen 41 bis 46 #TabsToolbar gar nicht angegeben ist.

Fischkopp

Danke für die weiteren Kommentare und Entschuldigung, dass ich

1. entgegen meiner Ankündigung die Liste der von mir genutzten css-Dateien nicht beigefügt habe, und

2. ich nicht auf die Idee gekommen bin, diese genutzten Dateien als zip-Datei anzuhängen.

dejavu

hier also mal die Liste zu 1

Code

/* Firefox userChrome.css tweaks ****************************************************************/
/* Based on 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons CSS code ***************/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/************************************************************************************************/

/************************************************************************************************/
/* Custom CSS for Firefox 91+ *******************************************************************/
/* Version 4.1.3 ********************************************************************************/
/************************************************************************************************/

@import "./css/buttons/icons_colorized.css"; /**/
@import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance.css"; /**/
@import "./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css"; /**/
@import "./css/buttons/whatnew_button_always_hidden.css"; /**/
@import "./css/appbutton/appbutton_popup_icons.css"; /**/
@import "./css/appbutton/appbutton_popup_icons_colorized.css"; /**/
@import "./css/appbutton/appbutton_in_titlebar.css"; /**/ /* <-- label only */
@import "./css/appbutton/appbutton_in_titlebar_autocolor.css"; /**/
@import "./css/tabs/classic_squared_tabs_australized.css"; /**/
@import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/
@import "./css/tabs/missing_tab_favicon_restored_default.css"; /**/
@import "./css/tabs/tab_throbber_grey_classic.css"; /**/
@import "./css/tabs/tab_close_always_visible.css"; /**/
@import "./css/tabs/tab_icon_colors.css"; /**/
@import "./css/generalui/private_mode_indicator_hidden.css"; /**/
@import "./css/generalui/bookmark_icons_colorized.css"; /**/
@import "./css/generalui/close_icon_windows10redv2.css"; /**/
@import "./css/generalui/searchbar_glassplus_indicator_hidden.css"; /**/
@import "./css/toolbars/toolbars_old_padding.css"; /**/
@import "./css/toolbars/tabs_toolbar_adjustments.css"; /**/
@import "./css/toolbars/bookmarks_toolbar_old_height.css"; /**/
@import "./css/locationbar/compact_mode_reduce_fontsize.css"; /**/
@import "./css/locationbar/identitybox_colors.css"; /**/
@import "./css/locationbar/identitybox_padlock_icon_classic.css"; /**/
@import "./css/locationbar/starbutton_popup_preview_image_hidden.css"; /**/
@import "./css/locationbar/megabar_expanding_breakout_disabled.css"; /**/
@import "./css/locationbar/urlbar_restore_visible_border.css"; /**/
@import "./css/locationbar/ac_popup_megabar_title_and_url_50percent_width.css"; /**/
@import "./css/eigene/EIGENE_Anpassungen_komplett.css"; /**/

Alles anzeigen

und die zip-Datei mit allen obigen Dateien als Anhang.

Zitat von .DeJaVu

Deswegen gibt es hier (und auch in Aris Sammlung) eine Korrekturdatei

Und was ist das für eine Datei und was bewirkt die? Wahrscheinlich ist meine Frage etwas dumm, aber ich weiß damit wirklich nichts anzufangen, und würde mich deshalb über eine Erklärung sehr freuen.

Vielleicht kann einer von Euch Experten mal drüber schauen und mir einen Tipp geben, wo ich was ändern muss, damit auch die Tab-Leiste den gewünschten Hintergrund bekommt.

Vielen Dank für Eure Hilfe!

Peter

milupo

Zitat von Fischkopp

@import "./css/toolbars/tabs_toolbar_adjustments.css"; /**/

Der Inhalt dieser Datei wäre zum Beispiel interessant.

Ach nein, da ist keine Festlegung zu Farben drin.

2002Andreas

Zitat von Fischkopp

wo ich was ändern muss

Nur mal so, bist du dir sicher das alles wirklich zu brauchen

Und wenn, prüfst du hier regelmäßig nach, ob es ein Update gibt?

CustomCSSforFx/classic/css at master · Aris-t2/CustomCSSforFx

Custom CSS tweaks for Firefox. Contribute to Aris-t2/CustomCSSforFx development by creating an account on GitHub.

github.com

Ansonsten, da die Tableiste bei dir unten ist laut dem einen Code teste bitte wieder:

CSS

/****************************************************************************************/
/* DEN HIER BENUTZTEN VARIABLEN WERTE ZUWEISEN                                          */
/****************************************************************************************/

:root {
  --tab_min_width: 50px;
  --tab_max_width: 180px;
 
  --classic_squared_tabs_tab_height: 26px !important;
  --classic_squared_tabs-border-radius: 10px !important;
  --default_tab_border_roundness: 5px  !important;
 
  --general_toolbar_color_toolbars: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --general_toolbar_color_navbar: linear-gradient(#E5F3FF,#E5F3FF) !important;
  --colored_menubar_background_image: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* TAB_MIN_WIDTH UND TAB_MAX_WIDTH SETZEN                                               */
/****************************************************************************************/

/* tab max-width */
.tabbrowser-tab:not([pinned]) {
  min-width: var(--tab_min_width) !important;
  clip-width: var(--tab_min_width) !important;
}

/* tab max-width */
#tabbrowser-tabs:not([overflow="true"]):not([using-closing-tabs-spacer="true"]) .tabbrowser-tab[fadein]:not([pinned]) {
  max-width: var(--tab_max_width) !important;
  overflow: hidden !important;
}


/****************************************************************************************/
/* EIGENE HINTERGRUNDFARBEN FÜR DIE TOOLBARS                                            */
/****************************************************************************************/

/* hierfür ist folgender Code aus "tab_toolbar_colors_force_menubar_color.css" nötig:   */
/****************************************************************************************/
#TabsToolbar-customization-target,
#navigator-toolbox-background, 
#nav-bar,
#TabsToolbar,
#PersonalToolbar{
  -moz-appearance: none !important;
  background: linear-gradient(#E5F3FF,#E5F3FF) !important;
}

/****************************************************************************************/
/* EIGENE FARBEN FÜR DIE TABS                                                           */
/****************************************************************************************/

/*******************************************/
/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: linear-gradient(to bottom,#66FFFF,#33CCFF) !important;  /*RGB(102,255,255),RGB(51,204,255)*/
}

/*******************************************/
/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
  border: 1px solid black !important;
  border-bottom: none !important;
}

/*******************************************/
/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}

/*******************************************/
/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* unread tab ******************************/

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[unread] .tab-content {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

/*******************************************/
/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: linear-gradient(to bottom,#E5F3FF,#E5F3FF) !important;
}

#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: linear-gradient(to bottom,#FFFAF0,#FFFAF0) !important;
}


/****************************************************************************************/
/* FLEXIBLER ZWISCHENRAUM AUF MINIMALE UND MAXIMALE (ALSO FESTE) BREITE SETZEN          */
/****************************************************************************************/

toolbarspring {
    -moz-box-flex: 1;
    min-width: 10px!important;
    max-width: 10px!important;
}

toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] {
    min-width: 10px!important;
    max-width: 10px!important;
}


/****************************************************************************************/
/* DEN ZOOM DER ADRESSLEISTE AUSSCHALTEN                                                */
/****************************************************************************************/

#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: none !important;
}


/****************************************************************************************/
/* ZEILENABSTÄNDE IN DEN MENÜS UND LESEZEICHEN WIEDER AUF DAS ALTE MASS REDUZIEREN      */
/****************************************************************************************/

menupopup > menuitem,
menupopup > menu {
  padding-block: 2px !important;
  padding-inline-start: 14px !important;
}


/****************************************************************************************/
/* SCHRIFTGRÖSSE IN MENÜLEISTE UND LESEZEICHENLEISTE ANPASSEN                           */
/****************************************************************************************/

#main-menubar > menu {
   font-size: 14px !important;
}

#PersonalToolbar .toolbarbutton-text {
font-size: 14px !important;
}

Alles anzeigen

milupo

Fischkopp Sage mal, den Code aus Beitrag #1 hast du in der userChrome.css? (hoffentlich nicht chrome.css, wie du dort geschrieben hast) Der gleiche Code ist nämlich auch in der Datei EIGENE_Anpassungen_komplett.css. Der entsprechende Code wäre dann doppelt, da letztere ja mit @import-Befehl ebenfalls eingelesen wird - siehe Code aus Beitrag #11, Zeile 39.

2002Andreas

Ich habe mal so ein paar der Codes für die Tableiste getestet:

Mit dem Code aus Beitrag Nr. 13 sollte es wieder passen.

Fischkopp

Zitat von 2002Andreas

Mit dem Code aus Beitrag Nr. 13 sollte es wieder passen.

Das tut es auch! 1000 Dank Andreas!!!

Aber: könntest Du mir verraten, woran es gelegen hat? Nur an "#TabsToolbar-customization-target," ??

milupo

Danke für Deinen Kommentar! Nein, ich hatte in meinem ersten Beitrag dem Kind nur einen falschen Namen gegeben und verschwiegen - Asche auf mein Haupt! -, dass ich meinen code in die userChrome.css importiere nachdem schon einige andere css-Dateien importiert wurden. "Mein" code wird also nur einmal aufgerufen und ausgeführt.

Dank Andreas ist aber inzwischen alles wieder "in Butter".

Peter

2002Andreas

Zitat von Fischkopp

Nur an "#TabsToolbar-customization-target," ??

Ja.

Wobei es auch ein kleiner Fehler von mir erst war, da du ja die Tableiste unten hast per Code.

Und diese Tableiste hat eine andere Bezeichnung als die (normale).

Zitat von Fischkopp

Das tut es auch! 1000 Dank Andreas!!!

Gerne doch, und sorry das mir das nicht sofort aufgefallen ist.

.DeJaVu

Zitat von Fischkopp

und was bewirkt die?

Zitat von .DeJaVu

die Änderungen immer danach erfolgen.

Klingt logisch, oder? Erst fertiges CSS, dass man hinterher ändert (aus seiner userChrome):

Code

/************************************************************************************************/
/* Create a new file "my_userChrome.css" and add own/custom code to it. *************************/
@import "./my_userChrome.css"; /**/
/************************************************************************************************/

Steht ganz unten. Also parallel zu seiner userChrome.css eine my_userChrome.css erstellen und dort die Änderungen einfügen, mit der man unerwünschtes vorher ausmerzt. Damit ist sichergestellt, dass man die Dateien von Aris nach einem Update mühselig noch ändern muss.

BrokenHeart

So am Rande: Ich glaube, man sollte sich die Frage von 2002Andreas wirklich ernsthaft stellen und für sich selbst beantworten.

Zitat von 2002Andreas

Nur mal so, bist du dir sicher das alles wirklich zu brauchen

Meines Erachtens sollte man die Sammlung von Aris nur verwenden, wenn man keine (oder nur äußerst wenige) eigene Änderungen bzw. Ergänzungen in Form von CSS-Code hinzufügen will, zumal ja sehr viele Sachen im Code von Aris auch über Variablen einstellbar sind. Sonst hat man immer eine zusätzliche, potentielle Fehlerquelle in Form von Inkompatibilitäten , wenn man eigene Änderungen einpflegt...

milupo

Zitat von BrokenHeart

Sonst hat man immer eine zusätzliche, potentielle Fehlerquelle in Form von Inkompatibilitäten , wenn man eigene Änderungen einpflegt...

Und man muss die Änderungen, die Aris im Laufe der Zeit macht, verfolgen und dann den eigenen Code entsprechend anpassen.

Fischkopp 17. Januar 2022 um 14:27