Wie man eine Schaltfläche (SVG-Symbol) versteckt, wenn der Benutzer eingeloggt ist?

Hallo. Wie kann ich einen Button (es ist eigentlich ein SVG-Symbol, das zu etwas verlinkt) ausblenden, aber nur, wenn jemand in einem Konto angemeldet ist?

1 „Gefällt mir“

Sie könnten die Klasse .anon verwenden und es ähnlich wie hier machen:

2 „Gefällt mir“

Sie haben eine anon-Klasse am \u003chtml\u003e-Tag angehängt.

Sie können es also so verwenden:

html:not(.anon) .your_svg_selector {
   display: none;
}
2 „Gefällt mir“

@omarfilip @Arkshine Und das wird dazu führen, dass dieses Symbol nur für angemeldete Benutzer ausgeblendet wird? Wo genau befindet sich diese anon-Klasse? Ich kann sie nicht finden.

Ja.

Ah, Entschuldigung – Sie wollten das Gegenteil, also: not(.anon)

3 „Gefällt mir“

Haha, ich habe es auch komplett falsch gelesen, mein Fehler!

Oh, also muss es irgendwie manuell hinzugefügt werden? Bei mir steht nur:
class="desktop-view not-mobile-device text-size-normal no-touch discourse-no-touch"

Es gibt nichts hinzuzufügen. Discourse wendet automatisch die Klasse „anon“ an, wenn Sie nicht angemeldet sind. Sie können also CSS haben, das besagt: „Wenn die Klasse anon nicht vorhanden ist…“.

1 „Gefällt mir“

Das sind all die Dinge, die auf das Symbol verweisen, das ich ausblenden möchte. Welcher Teil hier ist der „Selektor“? :open_mouth:

Ja, Sie müssen das CSS Ihrer Website anpassen:

2 „Gefällt mir“

@45thj5ej .header-icon-login .d-icon-user sollte in Ordnung sein.

1 „Gefällt mir“

Ok, cool, und ich platziere das einfach in meinem CSS-Code?

HTML:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}
1 „Gefällt mir“
html:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}

Sie können dies in Ihr Theme-CSS (falls verfügbar) oder, besser noch, in eine Theme-Komponente CSS, die an Ihr Theme angehängt ist, einfügen.

1 „Gefällt mir“

Ach, Mist. Es hat also funktioniert, aber wenn es ausgeblendet wird, wird das Symbol links davon nicht nachgezogen, sodass eine seltsame Lücke entsteht. Gibt es eine Möglichkeit, dies ohne Lücke zu tun, ohne jedoch die Reihenfolge der Symbole zu ändern?
yyyy

1 „Gefällt mir“

Versuchen Sie dies, um das <li> einzuschließen.

html:not(.anon) .header-icon-login  {
   display: none;
}
4 „Gefällt mir“

Alter, vielen Dank. :pray:

2 „Gefällt mir“

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.