How to hide a button (SVG icon) if user is logged in?

dev
1

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 Like
2

You could use the .anon class and do it similar to this:

2 Likes
3

You have a anon class attached to the <html> tag.

So you can use like:

html:not(.anon) .your_svg_selector {
   display: none;
}
2 Likes
4

@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.

5

Yes.

image
image1219×208 15.8 KB

6

Ah, sorry - you wanted the opposite, so: not(.anon)

3 Likes
7

Ahah, I totally read the wrong way as well, my bad!

8

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"

9

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 Like
10

This is all the stuff that links to the icon I want hidden. Which part here is the “selector”? :open_mouth:

cccc
cccc883×190 10 KB

11

Yes, you will need to customize your site’s css:

2 Likes
12

@45thj5ej .header-icon-login .d-icon-user should be okay.

1 Like
13

Ok, cool, and I just place this in my CSS code?

HTML:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}
1 Like
14 
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 Like
15

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?
yyyy

1 Like
16

Try this, to include the <li>.

html:not(.anon) .header-icon-login  {
   display: none;
}
4 Likes
17

Dude, thank you so much. :pray:

2 Likes