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

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“.
  • verkleinern kann?

    Teste bitte, und pass die die Werte wenn dann an:



    CSS
    #appMenu-fxa-label2 {
      max-width: 65px !important;
      font-size: 10px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    also eine separate CSS-Datei erstellen?

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

  • 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: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

  • 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: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

  • 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: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

  • 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, WordPress und Facebook

  • Test. Danke dir^^

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

  • 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, WordPress und Facebook

  • Die Erfahrung hab ich schon gemacht. Danke :)


    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: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

    2 Mal editiert, zuletzt von omar1979 () 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: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

    Einmal editiert, zuletzt von omar1979 ()

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

    "Klug sein hat noch nie einen Menschen an Dummheiten gehindert." Stefan Zweig
    Firefox-Version: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo

  • 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: 93.0
    Edition: Windows 10 Home
    Version: 21H1
    System-Typ: 64-Bit-Betriebssystem

    Freundliche Grüsse
    Ramo