Nightly: Hamburger-Menü verschönern

Zitat von Endor

Manchmal wenn man den Pfeil zu nahe kommt verschwindet der Hintergrund

und dann geht er nicht.

Hallo!

Das war immer der Fall. Nachdem Andreas aber die Icons dort deaktiviert hat, und den zweiten Code mit margin noch dazu gegeben hat, so ist die volle Schaltfläche bedienbar. Ich hatte aus Versehen bei

padding-right 125px eingegeben, auch da war dann die gesamte Fläche bedienbar. Also mir persönlich gefällt das so ohne ein Icon da oben bestens. Trotzdem, nochmals meinen Dank für diese "Riesenarbeit"!

Zitat von Endor

Nochmals vielen Dank dafür.

Gerne doch

Für den Zurückpfeil gibt es drei Klassen subviewbutton, subviewbutton-back und subviewbutton-iconic. Letzteres have ich unter den Inspektorregeln nicht gefunden, aber für subviewbutton ist standardmäßig margin: 0 festgelegt. Das könnte sich mit margin-left: 32px von subviewbutton-back beißen.

andreas

Ich habe in dem verkürzten Code das hier #appMenu-fxa-label mal aktiviert, im Untermenü ist oben links noch das Icon enthalten. Kannst du bitte im Code das auch noch deaktivieren.

Mit dem zweiten Code von hier RE: Nightly: Hamburger-Menü verschönern wird bei Hover aber das Icon überlagert, und die volle Fläche ist nutzbar.

Zitat von FuchsFan

im Code das auch noch deaktivieren.

Meinst du das so?

Hamburger -Icons + div. ausgeblendet 2.zip

Zitat von 2002Andreas

Meinst du das so?

Nun ist es gut, Icon weg. Danke!

Den Code aus Beitrag Nr. 27 musst du noch einfügen, der war nicht dabei.

Zitat von 2002Andreas

Den Code aus Beitrag Nr. 27 musst du noch einfügen, der war nicht dabei.

Ja, Andreas, ist schon gemacht.

Glaube habe das Problem gefunden warum der Pfeil mal geht und mal nicht.

Ich habe den ja wegen des Symbols mit diesem Code nach rechts verschoben,

zbs so:

#PanelUI-fxa .subviewbutton-back{margin-left: 24px !important; }

milupo hat mich durch seinen Beitrag auf die Idee gebracht

das mal anders zu versuchen und zwar so:

#PanelUI-fxa .subviewbutton{margin-left: 24px !important; }

das scheint das Problem behoben zu haben.
Also hatte ich anscheinend nur die falsche Klasse verwendet.

An dieser Stelle vielen Dank an milupo.

Mfg.
Endor

Zitat von Endor

mit diesem Code nach rechts verschoben,

Das sollte pauschal für alle Pfeile funktionieren:

#appMenu,.subviewbutton {
  margin-left: 24px !important; 
  }

Ansonsten musst du ja jeden einzeln ansprechen.

Hallo Andreas.

Vielen Dank. Werde ich gleich mal testen.

Ja ich hatte alle einzeln angesprochen und dementsprechend auch

bei allen ändern müssen. Auf die Idee das pauschal für alle zu machen

bin ich ja mal wieder nicht gekommen......

:klasse:

Mfg.
Endor

Zitat von Endor

An dieser Stelle vielen Dank an milupo.

Gern geschehen, es ist immer schön auch etwas beitragen zu können.

Zitat von 2002Andreas

Das sollte pauschal für alle Pfeile funktionieren:

Das funktioniert, Andreas. Weil aber damit die untere Icons auch nach rechts gesetzt werden, so habe ich statt der 24 nur 5px genommen, und das reicht.

Ja der pauschale Code hat mir hier auch alles verschoben.

Leider hat auch meine Änderung von

.subviewbutton-back

auf

.subviewbutton

bei zwei Untermenüs den selben Effekt bei:

Bei Firefox Anmelden

und

Bibliothek und Untermenüs.

Muss mir das in Ruhe nochmal anschauen.

Mfg.
Endor

Neuer Versuch

#appMenu, box:nth-child(1) > toolbarbutton:nth-child(1) {
  margin-left: 24px !important; 
  }

Zitat von 2002Andreas

Neuer Versuch

Das passt !

Irrtum, gleiches Problem wie zum Anfang mit dem Button. Ich hatte in der uC.css den ersten Eintrag nicht auskommentiert. Sorry!

Nachtrag:

Ich habe den Code mal ein wenig verändert, so erhält der Button bei Hover etwa die Originalgröße und ist auf der ganzen Fläche bedienbar. Bitte mal testen.

#appMenu, box:nth-child(1) > toolbarbutton:nth-child(1) {
    margin-left: 10px !important; 
    margin-right: 24px !important;
    }

margin-left könnte ganz weg und margin-right sollte nicht unter 20px liegen

Hallo 2002Andreas .

Hier hat es auch funktioniert.

Vielen Dank.

:klasse:

Da ich ja oben die Symbole haben will musste ich den Code auch leicht ändern,

    #appMenu, box:nth-child(1) > toolbarbutton:nth-child(1) {
    margin-left: 24px !important;
    margin-right: 24px !important;
    }

Aber nun passt es.

Habe dann natürlich noch ein paar Fehler entdeckt, die musste ich

dann unbedingt beheben.

Muss jetzt nur noch die Dateien bei Github aktualisieren.

Komme aber erst morgen dazu.

Mfg.
Endor

Freut mich wenn es letzlich funktioniert, erspart ja einige zusätzliche Einträge dann

Zitat von Endor

Muss jetzt nur noch die Dateien bei Github aktualisieren.

Persönlich nutze ich es nicht, deshalb nur der Vollständigkeit halber, kannst du das bitte gleich mal mit überprüfen. Ist z.B. die Seite von Camp-Firefox geöffnet, ein rechter Klick genau auf die Schrift, dort fehlt das Icon für Pocket. Ein Klick links neben die Adresse, dort ist es dann wieder da. Wir hatten es ja mit deiner Hilfe eingefügt, aber in dem anderen Kontextmenü wohl nicht. Nun habe ich den Code in alle Dateien eingefügt, leider habe ich wohl nicht die richtige erwischt.

Link in Pocket speichern ist auch ein anderer Code, als Seite in Pocket speichern.