Button-Inhalt verändern

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    93.0
    Betriebssystem
    Win10

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

    Der Code funktioniert 8) - ?( 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.

    W10 Home 64bit - FF93.x Portable

  • Zur hilfreichsten Antwort springen
  • Wie müßte ich das ändern

    Teste es bitte mal so:

    Entweder nimmt man:

    list-style-image


    oder:

    background


    Aber nicht beides in einem Code.

  • 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:

    W10 Home 64bit - FF93.x Portable

  • Mit diesem Code

    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 :sleeping:

    guuts nächtle...

    W10 Home 64bit - FF93.x Portable

    • Hilfreichste Antwort

    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;
    }


    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)

  • 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

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.
  • #downloads-indicator-anchor

    :cursing: 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...... :D

    W10 Home 64bit - FF93.x Portable