Как скрыть кнопку (иконку SVG), если пользователь вошел в систему?

Разработка
1

Привет. Но как скрыть кнопку (это на самом деле SVG-иконка, ведущая на что-то), только если пользователь вошел в аккаунт?

2

Вы можете использовать класс .anon и сделать это примерно так:

3

У вас есть класс anon, прикрепленный к тегу \u003chtml\u003e.

Поэтому вы можете использовать следующее:

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

@omarfilip @Arkshine И это скроет эту иконку только для авторизованных пользователей? Также, где именно находится этот анонимный класс? Я не могу его найти.

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

Это всё, что ссылается на иконку, которую я хочу скрыть. Какая часть здесь является «селектором»? :open_mouth:

cccc
cccc883×190 10 KB

11

Да, вам потребуется настроить CSS вашего сайта:

12

@45thj5ej .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: