Hoverfarbe der Symbole in der Urlbar

  • Firefox-Version
    93.0
    Betriebssystem
    Windows 11

    Hallo Zusammen,

    ich bin heute dem Forum beigetreten da ich ein großer Firefox-Fan bin und diesen seit 2002 nutze. Ich möchte zunächst alle grüßen. Mit CSS beschäftige ich mich seit ca. 2 Jahren erst. Daher habe ich nun eine Frage. In der Urlbar gibt es links ein Schildsymbol, daneben ein Schlosssymbol. Rechts ist z. B. das Sternsymbol um Lesezeichen hinzuzufügen.

    Die Hoverfarbe dieser Symbole ist in einem Grau gehalten und ich würde diese Farbe gerne ändern:

    Dies ist bestimmt mit CSS möglich. Welchen Befehl muss ich dazu in die userChrome.css eintragen? Ich danke vielmals im Voraus für Eure Hilfe.

  • Hallo @Fearen56s,

    die Button links der urlbar-input-box solltest Du damit ↓ abdecken können.

    CSS
    #identity-box > box:hover {
        fill: #000 !important;
        background: #D1E2F2 !important;
    }

    Die Farben musst Du noch Deinen Empfinden entsprechend einfärben.

    Es grüßt,

    Ralf

  • Hallo Ralf,

    das mit der Identity-Box hat super geklappt. So wollte ich da. Perfekt. Ich hätte halt gerne noch die anderen Symbole genauso. Dann wäre es ganau das was ich wollte. Super Ralf.

  • noch die anderen Symbole

    Hallo und Willkommen hier im Forum. 😊

    Teste bitte mal:

  • Jupp,

    da war ich noch dabei, das sollte damit ↓ gehen.

    CSS
    #page-action-buttons > hbox:hover {
        fill: #000 !important;
        background: #D1E2F2 !important;
    }
    #page-action-buttons > hbox image:hover {
        background: none !important;
    }

    Es grüßt,

    Ralf

  • Hi Zusammen, das mit dem Schildsymbol ging so:

    #tracking-protection-icon-container:hover {

    fill: #ffffff !important;

    background: #400000 !important;

    border-radius: 8px !important;

    }

    Perfekt gemacht. Danke Euch. Jetzt fehlen nur noch die Symbole der rechten Seite.

  • Hi,

    dieser Befehl wars für die Symbole auf der rechten Seite:

    CSS
    #page-action-buttons > hbox:hover {    fill: #000 !important;    background: #D1E2F2 !important;
    }
    #page-action-buttons > hbox image:hover {    background: none !important;
    }

    Hab die Farben angepasst und noch border-radius: 8px !important; hinzugefügt. Perfekt Dharkness. Und auch Andreas vielen lieben Dank. Ihr seid der Hammer. So sieht mein Füchschen jetzt aus:

    Danke Euch sehr.

  • 2002Andreas 16. Oktober 2021 um 10:10

    Hat das Thema geschlossen.