Hi. How can I hide a button (it’s really a SVG icon that links to something), only when someone is logged into an account, though?
إعجاب واحد (1)
You could use the .anon class and do it similar to this:
إعجابَين (2)
You have a anon class attached to the <html> tag.
So you can use like:
html:not(.anon) .your_svg_selector {
display: none;
}
إعجابَين (2)
@omarfilip @Arkshine And this will make it so that this icon is hidden from logged in users only? Also, where exactly is that anon class? I can’t seem to find it.
Ah, sorry - you wanted the opposite, so: not(.anon)
3 إعجابات
Ahah, I totally read the wrong way as well, my bad!
Oh, so it has to manually be added somehow? Mine just has:
class="desktop-view not-mobile-device text-size-normal no-touch discourse-no-touch"
There is nothing to add. Discourse automatically applies an “anon” class if you are not logged in. So you can have a CSS saying, “If anon class is not present…”.
إعجاب واحد (1)
Yes, you will need to customize your site’s css:
إعجابَين (2)
@45thj5ej .header-icon-login .d-icon-user should be okay.
إعجاب واحد (1)
Ok, cool, and I just place this in my CSS code?
HTML:not(.anon) .header-icon-login .d-icon-user {
display: none;
}
إعجاب واحد (1)
html:not(.anon) .header-icon-login .d-icon-user {
display: none;
}
You can put in your theme CSS (if available) or, better, a theme component CSS attached to your theme.
إعجاب واحد (1)
Ah, shoot. So, it worked, but when it gets hidden, it doesn’t slide the icon to the left of it over, so there’s a weird gap. Is there a way to make it without the gap, but without moving the order of the icons?
إعجاب واحد (1)
Try this, to include the <li>.
html:not(.anon) .header-icon-login {
display: none;
}
4 إعجابات
Dude, thank you so much. 
إعجابَين (2)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.