Comment masquer un bouton (icône SVG) si l'utilisateur est connecté ?

Dev
1

Salut. Comment puis-je masquer un bouton (il s’agit en fait d’une icône SVG qui renvoie à quelque chose), mais uniquement lorsqu’une personne est connectée à un compte ?

1 « J'aime »
2

Vous pourriez utiliser la classe .anon et procéder comme suit :

2 « J'aime »
3

Vous avez une classe anon attachée à la balise <html>.

Vous pouvez donc l’utiliser comme ceci :

html:not(.anon) .your_svg_selector {
   display: none;
}
2 « J'aime »
4

@omarfilip @Arkshine Et cela fera en sorte que cette icône soit masquée uniquement pour les utilisateurs connectés ? De plus, où se trouve exactement cette classe anon ? Je n’arrive pas à la trouver.

5

Oui.

image
image1219×208 15.8 KB

6

Ah, désolé - vous vouliez l’inverse, donc : not(.anon)

3 « J'aime »
7

Ahah, je l’ai aussi complètement mal lu, désolé !

8

Ah, donc il doit être ajouté manuellement d’une manière ou d’une autre ? Le mien a juste :
class="desktop-view not-mobile-device text-size-normal no-touch discourse-no-touch"

9

Il n’y a rien à ajouter. Discourse applique automatiquement une classe « anon » si vous n’êtes pas connecté. Vous pouvez donc avoir un CSS disant : « Si la classe anon n’est pas présente… ».

1 « J'aime »
10

C’est tout ce qui est lié à l’icône que je veux cacher. Quelle partie ici est le « sélecteur » ? :open_mouth:

cccc
cccc883×190 10 KB

11

Oui, vous devrez personnaliser le CSS de votre site :

2 « J'aime »
12

@45thj5ej .header-icon-login .d-icon-user devrait convenir.

1 « J'aime »
13

Ok, cool, et je place ceci dans mon code CSS ?

HTML:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}
1 « J'aime »
14 
html:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}

Vous pouvez le placer dans le CSS de votre thème (s’il est disponible) ou, mieux encore, dans un composant CSS de thème attaché à votre thème.

1 « J'aime »
15

Ah, mince. Donc, ça a fonctionné, mais quand il est masqué, il ne fait pas glisser l’icône à sa gauche, donc il y a un espace étrange. Y a-t-il un moyen de le faire sans l’espace, mais sans changer l’ordre des icônes ?
yyyy

1 « J'aime »
16

Essayez ceci, pour inclure le <li>.

html:not(.anon) .header-icon-login  {
   display: none;
}
4 « J'aime »
17

Mec, merci beaucoup. :pray:

2 « J'aime »
18

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