Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Mitleser

Zitat von Horstmann

Hat es übrigens jemand geschafft, ::part(scrollbutton-up) etc. für die Lesezeichen Popups mit der userChromeShadow.css zu manipulieren?

Leider nur auf diesem Weg:

CSS

menupopup:not([placespopup="true"])::part(arrowscrollbox) {
    background-color: red !important;
}

Zitat von Horstmann

In dem Sinne auch sowas; das Problem ist, dass initial nicht greift (den nativen Wert benutzt), wenn eine Variable nicht ausdrücklich gesetzt ist, zB wenn man --ug-scroller_hoverbgcolor: orange; ganz oben löscht.

Es funzt, siehe Scrollbuttons in der Tableiste (die einen Wert haben müssen, da die Var nicht gefunden wird).

grisu2099

Zitat von 2002Andreas

Wenn du magst, dann teste auch das mal:

Deine Variante aus #19 wirkt aber auch auf die Tableiste - nicht nur bei den Lesezeichenordnern...

FuchsFan

Mitleser , 2002Andreas , Horstmann

Dankeschön für eure Hilfe, hat mir für diese Baustelle gezeigt, da muss man schon den richtigen Überblick haben. Kann ich nicht mithalten.

Andreas, das musste ich von deinem gestrigen Code in der userChromeShadow.css bestehen lassen.

CSS

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
	--arrowscrollbox-scrollicon-active-background-color: transparent !important;  
    border-radius: 0px !important; 
	margin-top: 5px !important;
  }
}

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up):hover, &::part(scrollbutton-down):hover {
	--arrowscrollbox-scrollicon-hover-background-color: transparent !important;  
    background-color: yellow !important;
    border: 1px solid red !important;
 }
}

Alles anzeigen

Den heutigen Code hatte ich schon angepasst, funktionierte auch, musste dafür aber das Shadow-Script an die erste Startposition setzen.

Und dann kam Horstmann mit seinem Code, und der war jetzt prima einsetzbar. Und so sieht das dann in der userChrome.css aus.

CSS

/* diese Schreibweise erlaubt die Anpassung der Scroll-Button in Lesezeichen-Ordnern */
/* in der userChromeShadow.css ist noch ein Eintrag, gültig für Scroll-Button im All-Tabs-Button */

#navigator-toolbox {
    --ug-scroller_bgcolor: lightgrey;
    --ug-scroller_border: 1px solid grey; 
    --ug-scroller_height: 28px;  	
    --ug-scroller_hoverbgcolor: lightyellow;
    --ug-scroller_border_hover: 1px solid purple;
}

/*menupopup,*/
toolbarbutton.bookmark-item {
	--ug-scroller_height: 22px; 
    --ug-scroller_bgcolor: lightblue;
    --ug-scroller_border: 1px solid grey; 
    --ug-scroller_border_radius: 5px;  	
    --ug-scroller_hoverbgcolor: yellow;
    --ug-scroller_border_hover: 1px solid red;         
}

:is(#scrollbutton-down, #scrollbutton-up) {
    background-color: var(--ug-scroller_bgcolor, initial) !important;    
    border: var(--ug-scroller_border, initial) !important; 
	height: var(--ug-scroller_height, initial) !important;
    border-radius: var(--ug-scroller_border_radius, initial) !important; 	
	
}

:is(#scrollbutton-down, #scrollbutton-up):is(:hover, :active) {
    background-color: var(--ug-scroller_hoverbgcolor, initial) !important;    
    border: var(--ug-scroller_border_hover, initial) !important; 
}

/*=========== eigene Icons eingebaut ============*/ 
	 
/* Scroll-Button für hoch/runter in Lesezeichen-Ordnern */
toolbarbutton#scrollbutton-up {
    list-style-image: url("file:///C:/FoxIcons/hoch.png") !important;
}

toolbarbutton#scrollbutton-down {
    list-style-image: url("file:///C:/FoxIcons/runter.png") !important;
}


/* Scroll-Button für rechts/links in der TabsToolbar */
#tabbrowser-arrowscrollbox {
    --custom-right-image: url("file:///C:/FoxIcons/rechts.png") !important;
    --custom-left-image: url("file:///C:/FoxIcons/links.png") !important;
    --custom-arrow-transform: scale(1) !important;
}

#scrollbutton-down > .toolbarbutton-icon {
    list-style-image: var(--custom-right-image) !important;
    transform: var(--custom-arrow-transform) !important;
}

#scrollbutton-up > .toolbarbutton-icon {
    list-style-image: var(--custom-left-image) !important;
    transform: var(--custom-arrow-transform) !important;
}

Alles anzeigen

2002Andreas

Zitat von FuchsFan

das musste ich

Wenn es jetzt so funktioniert wie du es gerne wolltest

Zitat von grisu2099

Deine Variante aus #19 wirkt aber auch auf die Tableiste

Du hast recht, das habe ich nicht überprüft.

Ich musste das dann noch in die userChromeShadow eintragen.

CSS

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
	  --arrowscrollbox-scrollicon-active-background-color: transparent !important;
    fill: red !important;
    background: lightgrey !important;    
    border: 1px solid grey !important;
	border-radius: 5px !important; 
	height: 32px !important;
  }
}

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up):hover, &::part(scrollbutton-down):hover {
    fill: blue !important;
    background-color: yellow !important;
    --arrowscrollbox-scrollicon-hover-background-color: transparent !important;
    border: 1px solid red !important;
 }
}

Alles anzeigen

Dann sieht es hier so aus:

Aber das FuchsFan zufrieden ist, teste ich auch nicht weiter.

Horstmann

Zitat von FuchsFan
das musste ich von deinem gestrigen Code in der userChromeShadow.css bestehen lassen.
Code
#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
....
Den heutigen Code hatte ich schon angepasst, funktionierte auch, musste dafür aber das Shadow-Script an die erste Startposition setzen.

Sauber gemacht!

Du könntest auch noch versuchen, statt das Shadow-Script zu benutzen die Selektoren #tabbrowser-arrowscrollbox, #pinned-tabs-container mit in das normale CSS zu packen:

CSS

#navigator-toolbox {
    --ug-scroller_bgcolor: lightgrey;
    ... etc...
    
==>     

#navigator-toolbox, #tabbrowser-arrowscrollbox, #pinned-tabs-container {
    --ug-scroller_bgcolor: lightgrey;
    ... etc...

Ist in dem Beispiel nicht sehr elegant, und #navigator-toolbox kannste dir vermutlich sparen, aber meine Fx Version ist minimal zu alt zum sauber testen...

Das Prinzip ist, wie von Mitleser beschrieben, dass man halt einen Satz Variablen für jeden gewünschten Bereich erstellt, mit der gleichen Bezeichnung, aber verschiedenen Werten, und die dann universell an das zu verändernde Element packt, welches dann je nach Bereich die entsprechenden Werte benutzt.

Dann würde ich noch ein Auge auf diese Scrollbuttons in anderen Bereichen halten - viele gibt's nicht, aber kann immer sein dass man was übersieht mit diesem Variablen Ansatz.
Wir hatten dazu mal eine gute Diskussion auch mit Sören, find ich aber leider grade nicht.

FuchsFan

Zitat von Horstmann

Du könntest auch noch versuchen, statt das Shadow-Script zu benutzen die Selektoren #tabbrowser-arrowscrollbox, #pinned-tabs-container mit in das normale CSS zu packen:

Horstmann

Damit #tabbrowser-arrowscrollbox, #pinned-tabs-container { funktioniert es (ohne Shadow-Script), danke dafür.

Nun "musst" du mir nur noch sagen, wo und wie ich das in meinem Code unterbringen kann, damit bei bedienen der Navbar-Button der originale Hintergrund ausgeblendet wird.

--arrowscrollbox-scrollicon-active-background-color: transparent !important;

grisu2099

Zum Beispiel so (ungetestet):

CSS

#tabbrowser-arrowscrollbox, #pinned-tabs-container {
	--arrowscrollbox-scrollicon-active-background-color: transparent !important; 
}

FuchsFan

Zitat von grisu2099

Zum Beispiel so (ungetestet):

Hatte ich schon gemacht, ist nicht.

Edit:

Aber damit klappt es jetzt.

CSS

#scrollbutton-down > image, #scrollbutton-up > image {
	background-color: transparent !important;
}

2002Andreas

Zitat von FuchsFan

ist nicht.

Teste bitte:

CSS

:is(#scrollbutton-down, #scrollbutton-up) {
	--arrowscrollbox-scrollicon-hover-background-color: transparent !important;
	--arrowscrollbox-scrollicon-active-background-color: transparent !important;
}

Wobei das :is( ) nicht gebraucht wird.

FuchsFan

Zitat von 2002Andreas

Teste bitte:

Schau mal den Beitrag darüber.

Dieser Code funktioniert auch prima, dann habe ich ja freie Auswahl jetzt. Danke!

2002Andreas

Zitat von FuchsFan

dann habe ich ja freie Auswahl jetzt.

Und somit ein neues Problem

Hauptsache es funktioniert wie du möchtest.

Horstmann

Zitat von FuchsFan
Aber damit klappt es jetzt.
CSS
#scrollbutton-down > image, #scrollbutton-up > image {
	background-color: transparent !important;
}

Da hat Mozilla schon wieder was geändert, ohne mich vorher anzurufen.
Der Code von Andreas in #29 ist vermutlich besser, aber gibt sich uU nicht viel.

Mira_Belle

Wenn ich mal reingrätschen dürfte?
Hat mit dem Thema zu tun!

Wie kann ich die Symbole im Lesezeichenmenü austauschen?
Alles was ich hier bisher gesehen habe, funktioniert bei mir nicht.
Alle anderen Anpassungen funktionieren irgendwie,
Farbe der Symbole, Schaltflächen usw.!

2002Andreas

Zitat von Mira_Belle

im Lesezeichenmenü austauschen?

Hallo Mira.

Meinst du das hier?

Wenn ja, dann teste bitte wenn du magst:

CSS

.menupopup-arrowscrollbox {
    --top-image: url("..//Icons/Hoch.gif");
    --bottom-image: url("..//Icons/Runter.gif");
    --arrow-transform: scale(1) !important;
}

#scrollbutton-down > .toolbarbutton-icon {
    list-style-image: var(--bottom-image) !important;   
}

#scrollbutton-up > .toolbarbutton-icon {
    list-style-image: var(--top-image) !important;
    transform: var(--arrow-transform) !important;
}

Alles anzeigen

Pfeile.zip

FuchsFan

Nur zur Info, den Block musste ich nachträglich doch wieder einfügen, weil ein Script darauf angewiesen ist.

CSS

#navigator-toolbox {
	--ug-scroller_bgcolor: gainsboro;
    --ug-scroller_border: 1px solid grey;
    --ug-scroller_border_radius: 5px; 	
    --ug-scroller_height: 22px; 
    --ug-scroller_margin_top: 0px;   	
    --ug-scroller_hoverbgcolor: lightyellow;
    --ug-scroller_border_hover: 1px solid purple;
}

Mira_Belle

So, jetzt aber!

CSS

/* *********************************** */
/*=========== eigene Icons ============*/ 
/* *********************************** */

/* Scroll-Button für hoch/runter in Lesezeichen-Ordnern */
.menupopup-arrowscrollbox {
    --custom-up-image: url("../icons/Chevron-up.svg") !important;
    --custom-down-image: url("../icons/Chevron-down.svg") !important;
}
toolbarbutton#scrollbutton-up {
    list-style-image: var(--custom-up-image) !important;
}
toolbarbutton#scrollbutton-down {
    list-style-image: var(--custom-down-image) !important;
    transform: scaleY(1) !important;
}

/* Scroll-Button für rechts/links in der TabsToolbar */
#tabbrowser-arrowscrollbox {
    --custom-right-image: url("../icons/Chevron-right.svg") !important;
    --custom-left-image: url("../icons/Chevron-left.svg") !important;
    --custom-arrow-transform: scale(1) !important;
}
#scrollbutton-down > .toolbarbutton-icon {
    list-style-image: var(--custom-right-image) !important;
    transform: var(--custom-arrow-transform) !important;
}
#scrollbutton-up > .toolbarbutton-icon {
    list-style-image: var(--custom-left-image) !important;
    transform: var(--custom-arrow-transform) !important;
}

Alles anzeigen

Danke

2002Andreas

Zitat von Mira_Belle

So, jetzt aber

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Beitrag von Horstmann (4. Januar 2026 um 18:55)

Beitrag von Mitleser (4. Januar 2026 um 19:12)

Beitrag von Mira_Belle (4. Januar 2026 um 19:41)

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

TABs lassen sich nicht mehr nach rechts verschieben

Gruppieren der Tabs mit MultiRowTabLiteforFx.uc.js nicht möglich?

Mehrzeilige Tableiste eine leere Zeile (Fehler)