Icons in Hamburger-Menü und den anderen Menüs einbauen.

  • also eine separate CSS-Datei erstellen?

    Ja, teste es mal.

    Ansonsten muss dein Code umgeschrieben werden.

    Besten Dank.

    habe es in die vorhandene hamburgermenu.css reingetan und etwas geändert an der grösse

    und es funkt..

    Kann man noch die Breite des Popups noch etwas grösser machen?

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

  • die Breite des Popups noch etwas grösser machen?

    Auch wieder testen, und den Wert wenn dann anpassen:

    CSS
    #appMenu-protonMainView {
      min-width: 500px !important;
    }

    es funkt.

    Du kannst auch die obere Zeile schmaler machen:

    Das wäre dann do, statt dem Code aus Beitrag Nr. 80

  • /* Bei Daten sychronisieren und speichern, Anmelde-Button verkleinern,eine Zeile. */

    #appMenu-fxa-label2 {

    max-width: 67px !important;

    max-height: 0 !important;

    font-size: 10px !important;

    padding: 0px !important;

    padding-left: 0 !important;

    padding-right: 8px !important;

    }

    #appMenu-fxa-text {

    font-weight: normal !important;

    font-size: 13px !important;

    }

    #appMenu-protonMainView {

    min-width: 360px !important;

    }

    Habe die 2 codes von dir zusammengefügt und etwas geändert..

    Sieht jetzt so aus:

    wie kann ich noch das Icon vor "Dateien synchrosieren und speichern" noch etwas höher stellen? Besten Danke. :)

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

  • noch etwas höher stellen?

    Such bitte in deinem Code mal nach diesem Teil:

    CSS
        #appMenu-fxa-text{
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADcElEQVR4nHVTXWxTZRh+zzntOafn9Gdt3enoz8po2dauMLYat6iom5OpCwMGmswrLjRecAGBkDkTkCtCiDeQaGKCF7vQoBL0gpARJyFTxCDQwqA/6Nba/bU9Xdedru1pe3441Y2MGJ7kTb683/c835PvfT4E1jB66E2zQ2/4WG8wD+KUzmgwvsCwqYWSUC4VVSKXZsz6B6HH8c+OnPslBRuArS8yCzGqu9075vG2tkp8zhwLXieTM0HdcipmSubKlv1793Q1O5kjO1u08nfXo5P/Ezh/bOh0y9bNfdmFx8AmQiBUy4ChKFTxhspAfy9eb9ICRWCow2rqfcOjt34zEb3yVODCSM9Aq8t+vlLioLiSVjoIEFojqEmtfPt+5F5yOkgE7tymljJpqDfqwLmpzv+iiwpfmow/QmsCjYzxKzUiAggFIEkCArH83G+h9JiAGVJ3Zrh9uNpkUxH4udzyMvx6609IZ5Zg21b7F7WbsAuf9HXsaLYdl8QKIDLA71MJ9tufA+2hxeSP2z3t5MXxwJUbIVacCC6N7+5u7K7T0e4iXwUrU6exm/AfVEaafI8kcUVMBgRB4G5k/uzfSWBrzkY+v3hq44trCOKMXke/TRI4rBYqyA6P/SBKooJP2QCNYp3AcQhPZ6/Cc/Aono3ptBTUSo0TgKtU9agoVUVRFoE2bQKDmYF3X201P0+gKsrv6LQ0/FcUZLjSFJpcKl+ORKJA1VlBZ2uHXT0vndxIOjzUNliblt8P6ja3daRGpCgSaJqSI3H2Kpb/IxHydpo/RRAJtTZ3gaO5Y8vwK0z+y+9v3lKI6Ae97gkCFfS9Ps/Z9/v9XprSQKEkQI7jY/tGL5/E4gBSf5ezMfzwfudKJgFN23ZCQ9uu/pHhzuEOO/gseqxn4HXfa2+97LNqaQ1kuRJUBFEOhGc/unQjGkbWE/n10e7p2bk5Z21Em5tcYHe6gZ2bWTVoMK3DYYEtThtwRQHiC1lYzhXGDpz46SD8G7k1WCxAjw75g8nFRffKagkaLPW8BhXIRpsVXC4nJNJFKPIVKFeF8Idnrm1XKMIzf6FQAPnuP8I9iqI5bxNjL/CSSlKRMsej0oNpVszl+TxfFVO5QuVmdDExns9D9RkHa1AxDOOUZdmGYeBCAXHUzoiC9JcS9HklaPMsy8aUnrhOeALXrFu6bGkawwAAAABJRU5ErkJggg==") no-repeat !important;
        min-height: 25px!important;
        padding-left:34px!important;
        background-position:7px 14px!important;
        }

    In der letzten Zeile musst du den Wert 14 verkleinern.

    Bei mir war es 3, sieht dann so aus:

  • noch etwas höher stellen?

    Such bitte in deinem Code mal nach diesem Teil:

    CSS
        #appMenu-fxa-text{
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADcElEQVR4nHVTXWxTZRh+zzntOafn9Gdt3enoz8po2dauMLYat6iom5OpCwMGmswrLjRecAGBkDkTkCtCiDeQaGKCF7vQoBL0gpARJyFTxCDQwqA/6Nba/bU9Xdedru1pe3441Y2MGJ7kTb683/c835PvfT4E1jB66E2zQ2/4WG8wD+KUzmgwvsCwqYWSUC4VVSKXZsz6B6HH8c+OnPslBRuArS8yCzGqu9075vG2tkp8zhwLXieTM0HdcipmSubKlv1793Q1O5kjO1u08nfXo5P/Ezh/bOh0y9bNfdmFx8AmQiBUy4ChKFTxhspAfy9eb9ICRWCow2rqfcOjt34zEb3yVODCSM9Aq8t+vlLioLiSVjoIEFojqEmtfPt+5F5yOkgE7tymljJpqDfqwLmpzv+iiwpfmow/QmsCjYzxKzUiAggFIEkCArH83G+h9JiAGVJ3Zrh9uNpkUxH4udzyMvx6609IZ5Zg21b7F7WbsAuf9HXsaLYdl8QKIDLA71MJ9tufA+2hxeSP2z3t5MXxwJUbIVacCC6N7+5u7K7T0e4iXwUrU6exm/AfVEaafI8kcUVMBgRB4G5k/uzfSWBrzkY+v3hq44trCOKMXke/TRI4rBYqyA6P/SBKooJP2QCNYp3AcQhPZ6/Cc/Aono3ptBTUSo0TgKtU9agoVUVRFoE2bQKDmYF3X201P0+gKsrv6LQ0/FcUZLjSFJpcKl+ORKJA1VlBZ2uHXT0vndxIOjzUNliblt8P6ja3daRGpCgSaJqSI3H2Kpb/IxHydpo/RRAJtTZ3gaO5Y8vwK0z+y+9v3lKI6Ae97gkCFfS9Ps/Z9/v9XprSQKEkQI7jY/tGL5/E4gBSf5ezMfzwfudKJgFN23ZCQ9uu/pHhzuEOO/gseqxn4HXfa2+97LNqaQ1kuRJUBFEOhGc/unQjGkbWE/n10e7p2bk5Z21Em5tcYHe6gZ2bWTVoMK3DYYEtThtwRQHiC1lYzhXGDpz46SD8G7k1WCxAjw75g8nFRffKagkaLPW8BhXIRpsVXC4nJNJFKPIVKFeF8Idnrm1XKMIzf6FQAPnuP8I9iqI5bxNjL/CSSlKRMsej0oNpVszl+TxfFVO5QuVmdDExns9D9RkHa1AxDOOUZdmGYeBCAXHUzoiC9JcS9HklaPMsy8aUnrhOeALXrFu6bGkawwAAAABJRU5ErkJggg==") no-repeat !important;
        min-height: 25px!important;
        padding-left:34px!important;
        background-position:7px 14px!important;
        }

    In der letzten Zeile musst du den Wert 14 verkleinern.

    Bei mir war es 3, sieht dann so aus:

    TipTop! Danke dir.

    Um die Icons etwas mehr nach vorne ziehen, muss ich bei allen padding-left: den Wert etwas nach unten setzen?

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

  • omar1979 Setze bitte mal in Zukunft deine CSS-Codes in einen Code-Kasten, so wie 2002Andreas das immer tut:

    1. Klicke auf das Symbol </> in der Symbolleiste des Antwortfensters

    2. Es wird ein Code-Kasten mit dem Wort Quellcode eingefügt

    3. Klicke auf das Wort Quellcode. Jetzt wird ein Fenster geöffnet

    4. Klicke dort auf den kleinen Pfeil neben dem Auswahlfeld Syntaxhervorhebung und wähle dann CSS aus

    5. Klicke dann auf OK und du bist wieder im Antwortfenster

    6. Füge jetzt deinen CSS-Code in den Code-Kasten ein

    7. Passe zum Schluss auf, dass du den Code-Kasten verlässt, wenn du dann noch anderen Text schreiben willst.

    Dein CSS-Code wird in Zukunft gemäß den Festlegungen für CSS eingefärbt.

    Ü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

  • Test. Danke dir^^

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

  • Test. Danke dir^^

    Gern geschehen.

    Super. :thumbup:

    Ü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

  • Test.

    :thumbup:

    Nur mal so als Hinweis in diesem Fall.

    Dein kompl. Code wäre dafür allerdings viel zu groß, weil mehr als 100.000 Zeichen.

    Das geht dann nur als .zip Datei.

    Die Erfahrung hab ich schon gemacht. Danke :)


    muss ich bei allen padding-left:

    Ändere mal den ersten Wert bei:

    background-position:7px 14px!important;

    also auf z.B. 3px

    Habe jetzt beim padding-left und background-position für nur das oberste Icon zum test gemacht.

    das ist die Code von dort:

    und das sieht dann so aus:

    ich denke muss überall im ganzen Code diese Werte ändern so wie diesem Teil.

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

    2 Mal editiert, zuletzt von omar1979 (13. Oktober 2021 um 19:50) aus folgendem Grund: Ein Beitrag von omar1979 mit diesem Beitrag zusammengefügt.

  • Kann mir jemand sagen wo ich evtl diesen hintergrund von *anmelden* finde?

    Oder wie man den nennt?
    Habe im Hamburger-Menü alles geändert fehlt nurnoch dieser Ort.

    Ich will dort die Farbe ändern so wie ich beim Zoom gemacht habe.

    Da ein Screen wie es im Moment aussieht:

    So siehts aus wenn mit Maus auf *anmelden* komme.

    So siehts aus wenn ich mit Maus auf *Dateien synchrosieren und speichern* komme.

    Und hier ist die ganze Code als ZIP.

    HamburgerMenu.zip

    PS: ich benütze auch das Addon Firefox Color.

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2

    Einmal editiert, zuletzt von omar1979 (13. Oktober 2021 um 23:49)

  • diesen hintergrund

    Meinst du das so bei hover?

    Wenn ja, dann teste bitte:

    CSS
    #appMenu-fxa-status2:not([fxastatus]):hover {
        background: #3333FF !important;
        border-radius: 7px !important;
    }

    Besten Danke, habe aber bei dem vorhandenen Hover die Farbe geändert.

  • So.. endlich fertig mit dem Hamburger-Menü :)

    Hier eine Vorschau..

    und hier die der ganze HamburgerMenu-Ordner darin all die Hamburger-Css-Dateien.

    Wer es benützen und ändern will kann das tun. Als erstes den Zip entpacken darin ist der HamburgerMenu Ordner enthalten. Von dort muss man nur die HamburgerMenu.css ins userChrome.css eintragen. :)

    HamburgerMenu.zip

    Nochmals ein Dankeschön an alle Helfer und Code-Besitzern. :)

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 124.0
    Edition: Windows 11 Home (64-Bit-Betriebssystem)
    Version: 23H2