Условный текст заголовка в зависимости от членства в группе

Разработка
1

Надеюсь, кто-нибудь поможет с заголовком и CSS. Я знаю много языков, но только начинаю разбираться в CSS.

Я пытаюсь разместить в верхней части заголовка уведомление, напоминающее участникам о необходимости продления по мере приближения даты продления. Продление будет осуществляться через наш основной веб-сайт, поэтому я хотел бы добавить ссылку. Я использую тему «Light».

Я уже почти добился результата, выполнив следующие шаги:

  1. Создал группу под названием «renewal» с аватаром «please renew», но без других действий.

  2. Установил группу «renewal» в качестве основной.

  3. Включил группу «renewal» в состав группы владения, используя SSO с моего удалённого сайта на основе даты продления.

  4. Вставил следующий пользовательский код в раздел Header (Заголовок) Common:

image
image335×104 3.84 KB

  1. Вставил следующий код в раздел CSS (Стили) Common:

image
image364×111 4.14 KB

Это работает: текст отображается, когда пользователь является участником группы renewal.

Теперь я хочу улучшить это уведомление, сделав текст красным и добавив тег <a с текстом «нажмите здесь для продления». Но, как многие из вас знают, в строку Content нельзя добавлять HTML-теги. Я пытался задать цвет шрифта для тега <div, но безрезультатно.

Есть ли простое решение? Или, может быть, стоит рассмотреть другой подход, например, включать или отключать весь блок <div?

Кстати, пример, с которого я начал, использовал тег <p в заголовке, но это добавляло лишнюю пустую строку в верхней части заголовка, независимо от того, срабатывало уведомление или нет. Я хотел бы избежать этого…

Спасибо за помощь!

2

Я создал простой компонент темы, который добавляет CSS-классы групп в тег body HTML для удобства кастомизации. Я называю его GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

Таким образом, вы можете создать весь баннер в HTML в заголовке и скрывать/показывать его в зависимости от классов в теге body.

3

Спасибо, @Falco. Вы очень близки к решению! Моя проблема в том, как использовать эту возможность. В том компоненте вы пишете:

После установки этого компонента в активную тему вы можете применять CSS-стили, ориентируясь на членство в группе, например:

body.group-patrons div.donation-banner {
display: none;
}

Я понимаю, что это, вероятно, просто, но я пытаюсь разобраться в этом примере. Если у меня есть блок заголовка div, такой как:

<div name="test">Мой текст</div>

Могу ли я включить отображение этого текста, когда существует определённый класс? Конкретно что-то вроде:

.primary-group-renewal div.test  {
   display: inline;
 }

И не нужно ли мне также отключать его, когда этого класса нет? На самом деле, разве не отключение является наиболее важной частью? Так что, возможно, что-то вроде этого:

:not(.primary-group-renewal) div.test{
    display: none;
  }

Я экспериментировал и искал в Google, но пока ничего не нашёл. Я начал смотреть видео на YouTube о CSS, что, вероятно, полезно, но пока никаких конкретных подсказок. Благодарю за вашу помощь!

4

Я провел множество экспериментов, и сейчас это работает, но у меня есть вопрос.

В заголовке:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Пожалуйста, нажмите, чтобы продлить членство
    </font>
    </a>
</div>

В CSS:

.renewlink{
    display: none;
  }

.primary-group-renewal .renewlink{
    display: block;
  }

Я действительно ожидал, что это сработает вместо двух записей CSS выше, но не получилось. Что я упускаю?

:not(.primary-group-renewal) .renewlink{
    display: block;
  }

Спасибо