About Seiten mit CSS Codes anpassen

  • Brauche noch einmal Hilfe:

    Wie lautet der Code, um das :hover der Elemente im drop-down menü rechts oben im Kasten der einzelnen Erweiterungen (u.a. "Auf Updates prüfen") anzusprechen?

  • Nur ich finde nichts funktionierendes für :hover der einzelnen Einträge.

    Teste bitte das ↓.

    CSS
    addon-options > panel-list > panel-item:hover,
    plugin-options > panel-list > panel-item:hover {
    fill: #000 !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
    }

    Es grüßt,

    Ralf

  • Nur ich finde nichts funktionierendes für :hover der einzelnen Einträge.

    Teste bitte das ↓.

    CSS
    addon-options > panel-list > panel-item:hover,
    plugin-options > panel-list > panel-item:hover {
    fill: #000 !important;
    background-color: #D1E2F2 !important;
    color: #000 !important;
    }

    Danke. Hat nicht 100% funktioniert, war aber eine große Hilfe.

    Hier die (bei mir) funktionierende Lösung:


    CSS
    addon-options > panel-list > panel-item:hover,
    plugin-options > panel-list > panel-item:hover {
    fill: #9c1818 !important;
    --in-content-button-background-hover: #ffd700 !important;
    --in-content-button-text-color-hover: #9c1818 !important;
    }
  • Beim Hovern wird die ganze Zeile "markiert",

    ist es möglich links, wie rechts einen Abstand zum Rand hinzuzaubern

    und die Ecken dann noch abzurunden?

    Wie wäre es mal mit nem Screenshot?

    z.B.

    ...

    2002Andreas hat doch Gif's eingestellt!

    Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.

    Aber hier mal zwei Beispiele, wie ich mir das vorstelle.

    ...

    Kannst du mir bitte noch sagen, wie ich bei dem drop-down Menü bei :hover den border-radius ändern kann?


    Denn das funktioniert ja nicht!

    Und links, wie rechts ist es dann halt auch nicht möglich den Hintergrund "einzuschränken".

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle ()

  • Hier die (bei mir) funktionierende Lösung:

    Die beiden --in-content-button-Einträge können wiederum bei mir nicht funktionieren, das ist per :root-Eintrag auf unset gesetzt, das hatte ohne diesen :root-Eintrag bei mir einen sehr merkwürdigen Effekt.


    Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.

    Natürlich, denn die ganze Zeile ist das panel-item, in dem Fall müsstest Du mit margin-left und margin-right arbeiten, aber eben nicht nur bei dem Eintrag fürs hovern.


    Bei mir sieht die panellist übrigens so ↓ aus.

    Es grüßt,

    Ralf

    2 Mal editiert, zuletzt von Dharkness () aus folgendem Grund: Ein Beitrag von Dharkness mit diesem Beitrag zusammengefügt.

  • Teste bitte:

  • Da kann man genau sehen, dass in der ganze Zeile der Hintergrund eingefärbt wird.

    Natürlich, denn die ganze Zeile ist das panel-item, in dem Fall müsstest Du mit margin-left und margin-right arbeiten, aber eben nicht nur bei dem Eintrag fürs hovern.

    D.h. ich müsste erst das "Menü" verbreitern,

    um dann links wie rechts das panel-item jeweils um ca. 5px einzuschränken.

    UND um einen Radius hinzuzuzaubern? :/


    Oh weh.

    Mit <3lichem Gruß

    Mira

  • Welch schwierige Geburt!

    Nun klappt es aber, so wie von mir gewünscht.

    Danke für die Zaunlatte, Dharkness.

    Danke für den Code, grisu2099.

    Danke 2002Andreas für Deinen Code.


    Alles zusammen ergibt folgenden funktionierenden Code:


    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle ()

  • Hier die (bei mir) funktionierende Lösung:

    Nur mal so. ;)


    Das :hover jeweils am Ende brauchst du nicht:


    addon-options > panel-list > panel-item:hover,

    plugin-options > panel-list > panel-item:hover


    weil es hier ja schon enthalten ist:

    --in-content-button-background-hover: #ffd700 !important;

    --in-content-button-text-color-hover: #9c1818 !important;


    Der Code funktioniert in diesem Fall zwar trotzdem, aber das ist Zufall wie ich meine.

  • Käse, jetzt habe ich mit Verfügbaren Updates anzeigen das gleiche Problem!

    Es wird durch root,

    genauer durch die Einträge

    CSS
    --in-content-button-background: rgba(207,207,216,.33);
    --in-content-button-background-hover: rgba(207,207,216,.66);
    --in-content-button-background-active: rgb(207,207,216);

    verschiedene Hintergründe festgelegt.

    Wenn ich jedoch

    CSS
    :root {
      --in-content-button-background: red !important;
      --in-content-button-background-hover: green !important;
      --in-content-button-background-active: blue !important;
      }

    nutze, ändert sich nichts.

    Wenn ich statt

    :root, [data-l10n-id="addon-updates-manual-updates-found"] eintrage, ändert sich auch nichts :!:


    1. Wie bekomme ich den nicht passenden Hintergrund transparent?

    2. Wie kann ich "neuen", abgerundeten und mit eigenen Farben versehenen Hintergrund definieren?

    Ähnlich meinem Problem hier #1.174

    Mit <3lichem Gruß

    Mira

  • Wie bekomme

    Ich bin mir nicht sicher was genau du meinst.


    Geht es um diesen Button?



    Wenn ja:


    CSS
    #updates-message {
      --in-content-button-background: red !important;
      --in-content-button-background-hover: green !important;
      --in-content-button-text-color-hover: #FFA500 !important;
    }

    Evtl. hilft dir das bei deinem Problem weiter.

  • Wie bekomme

    Ich bin mir nicht sicher was genau du meinst.


    Geht es um diesen Button?

    Ja!

    CSS
    #updates-message {
      --in-content-button-background: red !important;
      --in-content-button-background-hover: green !important;
      --in-content-button-text-color-hover: #FFA500 !important;
    }

    Auf den Punkt! Vielen Dank.

    Ich habe daraus, ...

    CSS
        #updates-message {
            --in-content-button-background: transparent !important;
            --in-content-button-background-hover: transparent !important;
            --in-content-button-text-color-hover: #FFA500 !important;
            --in-content-button-background-active: transparent !important; 
          }

    ..., gemacht. Somit ist Aufgabe 1 gelöst.


    Nun zu 2.

    Den "Rahmen" bei hovern einfärben

    und Hintergründe devinieren, ähnlich wie oben beschrieben!

    Z.Z. schaut der "Eintrag" (Button) gehovert so aus:


    Wenn Du/sich jemand fragt, was ich genau meine, stelle ich nochmal Bildchen ohne Code ein.

    1. normal

    2. hover

    3. active


    Deshalb dieser Aufwand!

    Mit <3lichem Gruß

    Mira

    3 Mal editiert, zuletzt von Mira_Belle ()

  • Mit diesem Code bin ich recht nahe an meinem Ziel.


    Hier mal der komplette Code für about:addons

    Mit <3lichem Gruß

    Mira