로그인된 사용자에게 버튼(SVG 아이콘)을 숨기는 방법?

개발
1

안녕하세요. 로그인한 사용자가 있을 때만 버튼(실제로는 무언가 링크되는 SVG 아이콘)을 숨기는 방법은 어떻게 되나요?

2

.anon 클래스를 사용하여 다음과 유사하게 구현할 수 있습니다:

3

<html> 태그에 anon 클래스가 붙어 있습니다.

따라서 다음과 같이 사용할 수 있습니다:

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

@omarfilip @Arkshine 그러면 이 아이콘은 로그인한 사용자에게만 숨겨지는 건가요? 또한 그 anon 클래스가 정확히 어디에 있나요? 아무리 찾아도 찾을 수가 없네요.

5

네.

image
image1219×208 15.8 KB

6

아, 죄송합니다 - 반대 조건을 원하셨군요. 그래서: not(.anon)

7

아하, 나도 완전히 오해했네, 미안해!

8

아, 그러면 어딘가에서 수동으로 추가해야 하는 건가요? 제 쪽에는 이 정도만 있습니다:
class="desktop-view not-mobile-device text-size-normal no-touch discourse-no-touch"

9

추가할 내용은 없습니다. 로그인하지 않은 상태에서는 Discourse가 자동으로 “anon” 클래스를 적용합니다. 따라서 CSS에서 "anon 클래스가 존재하지 않는 경우…"라는 조건을 지정할 수 있습니다.

10

여기 있는 모든 것은 숨기고 싶은 아이콘으로 연결되는 요소들입니다. 여기서 "선택기(selector)"는 어떤 부분인가요? :open_mouth:

cccc
cccc883×190 10 KB

11

네, 사이트의 CSS를 사용자 지정해야 합니다:

12

@45th5ej .header-icon-login .d-icon-user 는 괜찮을 겁니다.

13

네, 좋습니다. 이 코드를 CSS에 그대로 넣으면 되나요?

HTML:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}
14 
html:not(.anon) .header-icon-login .d-icon-user {
   display: none;
}

이 코드를 테마 CSS(사용 가능한 경우)에 넣거나, 더 좋게는 테마에 연결된 테마 컴포넌트 CSS에 추가할 수 있습니다.

15

아, 안 되겠다. 그래서 동작은 하는데, 숨겨지면 왼쪽에 있는 아이콘이 안으로 밀려오지 않아서 이상한 간격이 생기는 거야. 아이콘의 순서를 바꾸지 않으면서도 그 간격 없이 만들 수 있는 방법이 있을까?
yyyy

16

<li>를 포함하려면 이렇게 시도해 보세요.

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

형, 정말 고마워. :pray: