Symbole in Menüs

  • Firefox-Version
    102.0 (64Bit)
    Betriebssystem
    Windows 10 Version 21H2 (Build 19044.1766)

    Hallo.


    Inspiriert durch diesen Beitrag, bzw. den Link auf Reddit

    erwuchs in mir das Bedürfnis, meine Menüs auch mit Symbole zu verschönern.

    Eventuell kann mir da jemand, Andreas?, unter die Arme greifen.

    Was ich bräuchte sind sie Symbole bzw, die Verweise darauf.

    Und so in etwa sollte es dann ausschauen.


    Es geht NUR um die Symbole, eventuell in hell und dunkel,

    aber eher in hell, da z.Z. bei mir der Hintergrund dunkel ist.

    Hamburgermenü

    Lesezeichen, weil hier auch die Popups sind.


    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • Vielleicht liest Endor das. Er hat schon vor langem 5 CSS-Dateien für das Hamburger-Menü zusammengestellt, mit denen farbige Symbole zugewiesen werden:


    CSS/Firefox/Hamburger-Panel at master · Endor8/CSS
    CSS Codes. Contribute to Endor8/CSS development by creating an account on GitHub.
    github.com


    Ob auf seiner Github-Seite der Stand aktuell ist, kann ich dir nicht sagen. Aber Endor wird sich sicher melden.


    So sieht das bei mir im sorbischen Firefox aus:


    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • Hallo Mira_Belle .

    Leider habe ich im Moment keine Zeit meine Codes auf Github zu pflegen.
    Daher kann ich auch nicht sagen ob die im aktuellen Firefox richtig funktionieren.

    Sobald ich wieder Zeit habe kümmere ich mich darum.

    Mfg.
    Endor

    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0.1
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/109.0

    OS: Windows 7 64 bit - Irgendwann Windows 10 64 bit wenn Firma will.
    Kein Support per PN. Fragen bitte im Forum stellen!

  • Danke Endor für Deine Rückmeldung.

    Ich habe, die vom mir gewünschten Symbole (Icons) gefunden.


    Lepton (old name: Proton Fix)


    Jetzt muss ich nur noch zusehen, wie ich diese so einbinde, dass sie auch an richtiger Stelle erscheinen.

    Dazu kann ich ja dann Deinen Code als Beispiel heranziehen.


    Mal schauen, ob ich das dann an diesem WE wie von mir gewünscht hinbekomme.


    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

  • So, habe mal ein neues Profil angelegt und mit "Lepton" [hingerichtet. =O ] eingerichtet. ;)

    Die Menüs schauen schon so aus, wie ich sie gerne auch hätte.

    Habe mir dann die CSS's angeschaut, und blöde aus der Wäsche geschaut.

    Danach geschaut, was ich mit den "Werkzeugen" rausfinden kann.

    So auf die Schnelle nix.

    Werde also etwas Zeit benötigen.


    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle ()

  • mit "Lepton" hingerichtet

    Du bist ja ziemlich brutal. ;)

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • So etwas...

    CSS
    #appMenu-new-window-button2 {
    list-style-image: url("chrome://browser/skin/window.svg");
    }

    ... stellt mich vor ein Rätzel!

    Wo bitte finde ich diese "windows.svg"?

    Im Profilordner schon mal nicht! Oder etwa doch? :/


    Wenn ich also all diese Codefragmente kopiere, werden die Icons dann auch in meinem anderen Profil gefunden und eingebunden?

    Und wenn ja, muss ich noch herausfinden, wie sie dann anrichtiger Stelle erscheinen.


    Gruß

    Mira


    PS: Nur zur Erinnerung!

    CSS
    @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
    #appMenu-new-tab-button2 {
    list-style-image: url("chrome://browser/skin/new-tab.svg");
    }
    }

    Mit <3lichem Gruß

    Mira

  • So, habe einige "Sybole" (Icons) gefunden und genau so in die Stilbearbeitung mal eingetragen.

    Siehe da, die Anordnung stimmt schon mal.

    Jedoch, so'n Käse, sind alle Symbole dunkel (schwarz)

    und mit fill: white  !important; oder color: white  !important; tut sich auch nichts.

    Schade.

    Auch klebt die Beschriftung direkt an den "Sybolen" (Icons),

    auch nicht wirklich schön!

    Tja, und was ich bisher so gar nicht herausgefunden habe,

    die "Sybole" (Icons) für:

    Zoom, Weitere Werkzeuge und Beenden.


    Gruß

    Mira


    PS:

    Normalerweise sollten diese Eintrage die fehlenden "Sybole" (Icons) sein.

    Jedoch werden die so nicht angesprochen und erscheinen dan ja nicht.

    Wie bekomme ich das noch hin?


    HA!

    "screenshot.svg" & "quit.svg" sind im Unterverzeichnis!

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle ()

  • Jedoch, so'n Käse, sind alle Symbole dunkel (schwarz)

    und mit fill: white !important; oder color: white !important; tut sich auch nichts.


    Kannst du so lösen:


    CSS
    #appMenu-new-tab-button2 image {
      width: 16px;
      height: 16px;
      mask-image: url('chrome://browser/skin/new-tab.svg');
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: rebeccapurple;
    }


    Auch klebt die Beschriftung direkt an den "Sybolen" (Icons),

    auch nicht wirklich schön!


    Einfach ein bisschen padding hinzugefügt:


    CSS
    #appMenu-new-tab-button2 label {
      padding-start: 10px;
    }

  • Führt leider nicht zum erwünschten Erfolg.

    Rot markiert stimmt es!

    Icon ist "hell" der Abstand zum Text ist auch i.O.

    ABER die Zeilenhöhe wurde verändert!

    Siehe Zeilenabstäne ab "Lesezeichen".

    Die Icons, gelb unterstichen, wollen aber nicht hell werden.


    Meinst du das alles so?


    Ja, genau so!

    Nur mit weniger Zeilenhöhe.


    Also, eigentlich genau so =>


    Gruß

    Mira


    PS: Das Icon für Daten synchronisieren und speichern habe ich auch noch nicht gefunden).

    Mit <3lichem Gruß

    Mira

  • War gerade etwas Künstlerisch!

    Habe einen Entwurf gemacht.


    Wie bis Download, so hätte ich gerne das Menü.

    Probleme, welche ich bisher habe:

    * Mir fehlen zwei Icons Datei synchronisieren und speichern, Weitere Werkzeuge und Zoom

    * Icon bekomme ich nicht alle HELL

    * Zeilenhöhe !


    Gruß

    Mira

    Mit <3lichem Gruß

    Mira