Button-Inhalt verändern

harff182

Ich habe mit folgendem Code Buttons in meiner nav-bar verändert:

CSS

/*    42_Rahmen.css
    Rahmen um die Buttons 
    210612: FF89neu
    210829: und angenehmene Trenner zwischen den Buttons, wenn gebraucht
    211012: angepaßt mit Andys Lösung aus 22_rahmen.css
    211013: Buttons "sidebar" und "ExtraConfigMenu" verändert 
*/

#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#nav-bar .toolbarbutton-1 > image  {
    background-color: gold !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    height: 28px !important;
    width: 28px !important;
}

/* sidebar-button-icon verändern*/
#sidebar-button > image {
    list-style-image: url('../icons/dummy_16.png') !important;
    background: 2px 2px url('../icons/sidebar-20.png') no-repeat !important;   
}

/*    ExtraConfigMenu-button verändern */
#ExtraConfigMenu-button > image {
    list-style-image: url('../icons/dummy_16.png') !important;
    background: 2px 2px url('../icons/UC-20.png') no-repeat !important; 
}

Alles anzeigen

Der Code funktioniert - aaaaber...

Ich bin mir ziemlich sicher, daß mein Weg nicht nur unelegant, sondern eventuell auch irgendwie falsch ist.

Wie müßte ich das ändern, damit es richtig ist und funktioniert, also:

- alten Inhalt weg

- neuen inhalt rein.

2002Andreas

Zitat von harff182

Wie müßte ich das ändern

Teste es bitte mal so:

CSS

#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#nav-bar .toolbarbutton-1 > image  {
    background-color: gold !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    height: 28px !important;
    width: 28px !important;
}

/* sidebar-button-icon verändern*/
#sidebar-button {
 list-style-image: url('../icons/sidebar-20.png')  !important;   
}

/*    ExtraConfigMenu-button verändern */
#ExtraConfigMenu-button {
    list-style-image: url('../icons/UC-20.png') !important;
}

Alles anzeigen

Entweder nimmt man:

list-style-image

oder:

background

Aber nicht beides in einem Code.

harff182

Wenn ich den Code nehme:

CSS

/* sidebar-button-icon verändern*/
#sidebar-button {
 list-style-image: url('../icons/sidebar-20.png')  !important;   
}

habe ich wieder so ein Mini-Bildchen in der Mitte des Buttons (der linke):

Im rechten Button ist das dann UC-20.png in der gewünschten Größe (ist quasi der Bruder von sidebar-20.png

Hier mal die beiden:

harff182

Mit diesem Code

CSS

/*    42_Rahmen.css
    Rahmen um die Buttons 
    210612: FF89neu
    210829: und angenehmene Trenner zwischen den Buttons, wenn gebraucht
    211012: angepaßt mit Andys Lösung aus 22_rahmen.css
    211013: Buttons "sidebar" und "ExtraConfigMenu" verändert 
            Nachfrage CFF: https://www.camp-firefox.de/forum/thema/133520
*/

#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#nav-bar .toolbarbutton-1 > image  {
    background-color: gold !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    height: 28px !important;
    width: 28px !important;
}

/*     211013: downloads-button-icon verändern */
#downloads-button {
    list-style-image: url('../icons/download_20.gif')  !important;
}

/*     211013: sidebar-button-icon verändern Andreas*/
#sidebar-button {
    list-style-image: url('../icons/sidebar-20.png')  !important;   
}

/*  211013: ExtraConfigMenu-button verändern Andreas */
#ExtraConfigMenu-button > image {
    list-style-image: url('../icons/UC-20.png') !important;
}
/*    211013:    Verti-Bar toggeln    */
#tooglebutton_addonbar_v > image { 
    list-style-image: url('../icons/dock-side-right-20.gif') !important;
}

/*     211013: Tip von Dharkness hier: https://www.camp-firefox.de/forum/thema/133510-buttons-verkleinern/?postID=1184954#post1184954
        positiv: vor/zurück werden  größer
        negativ: Downloads-Button (Original) verrutscht :( 
*/
:root #nav-bar {
    --toolbarbutton-inner-padding: 2px !important; /*10px oben, 15px rechts, 20px unten, 25px links*/
}

Alles anzeigen

siehts dann so aus:

Warum wird der Code für den Downloads-Button nicht ausgeführt?

Warum verrutsch der Inhalt des Original-Buttons als einziger nach links?

Jezz bin ich wieder und geh

guuts nächtle...

2002Andreas

Zitat von harff182

Warum wird der Code für den Downloads-Button nicht ausgeführt?

Weil die Bezeichnung etwas anders ist.

So sieht das hier aus, wobei ich natürlich ein Icon von mir verwenden musste:

Das wäre der Download-Button:

CSS

#downloads-indicator-anchor {
    list-style-image: url('../icons/download_20.gif') !important;
    padding-left: 3px !important;
}

Zitat von harff182

Warum verrutsch der Inhalt des Original-Buttons als einziger nach links?

Das liegt an diesem Eintrag in deinem Code:

CSS

:root #nav-bar {
    --toolbarbutton-inner-padding: 2px !important; /*10px oben, 15px rechts, 20px unten, 25px links*/
}

Der verschiebt die Icons innerhalb des Buttons.

(Darum habe ich auch ein padding-left in den Code zusätzlich eingefügt)

2002Andreas

Kleine Anpassung noch.

Da das Icon etwas gedrungen wirkt

kannst du es wenn bei dir nötig auch etwas vergrößern

CSS

#downloads-indicator-anchor {
  list-style-image: url('../icons/download_20.gif') !important;
  transform: scale(1.3, 1) !important;
  padding-left: 3px !important;
}

harff182

Zitat von 2002Andreas

#downloads-indicator-anchor

Grummel - warum bin ich zu doof, sowas per Browser-Werkzeuge zu finden und stolpere immer nur in die einzigen 2 Fundorte, die auch noch in die Irre führen. Hatte ich neulich schonmal

Egal, ich sprech den jetzt an und schon klappts auch hier mitm Button.

Ich hab dann mit Deinen Vorschlägen und meinem Code/meinen Icons etwas rumgetestet und folgendes für mich optisch zufriedenstellende Ergebnis erreicht:

Eben bin ich dann aber über eine Site mit interessanten GFX für den DL-Button gestolpert und sehe den aktuellen eher als proof of concept - mal abwarten, was ich finde, das mir besser gefällt und auch zum Stil der 3 Buttons daneben paßt.

2002Andreas :

Wie so oft: Mein Dank wird Dich ewig verfolgen, nie erreichen und erst......

2002Andreas

Zitat von harff182

Mein Dank wird Dich ewig verfolgen

Alles ist gut..

harff182 14. Oktober 2021 um 20:52