Texto de cabeçalho condicional baseado na associação ao grupo

Dev
1

Estou esperando ajuda com um cabeçalho / CSS. Conheço muitas linguagens, mas estou apenas começando com CSS.

Estou tentando colocar um aviso no topo do meu cabeçalho lembrando os membros de renovar quando estiverem perto da data de renovação. A renovação será feita através do nosso site principal, então gostaria de incluir um link. Estou usando o tema ‘Light’.

Estou muito perto, tendo tomado as seguintes medidas:

  1. Criei um grupo chamado ‘renovação’ com um avatar ‘por favor renove’, mas sem outras ações.

  2. Defini ‘renovação’ como o grupo principal.

  3. Incluí ‘renovação’ na propriedade do grupo usando SSO do meu site remoto com base na data de renovação.

  4. Coloquei o seguinte código personalizado no Cabeçalho de Comum:

image
image335×104 3.84 KB

  1. Coloquei o seguinte código no CSS de Comum

image
image364×111 4.14 KB

Funciona até o ponto de mostrar o texto quando o usuário é membro do grupo de renovação.

Agora gostaria de aprimorar esse aviso tornando a fonte vermelha e incluindo uma tag para ‘clique aqui para renovar’. Mas, como a maioria de vocês sabe, não é possível adicionar tags HTML a uma string de Conteúdo: . Tentei adicionar uma cor de fonte ao

2

I made a simple theme-component that puts group CSS classes in the html body for easy customizations, I call it GitHub - discourse/discourse-groups-css-classes-in-body :sweat_smile:

That way you can create the entire banner in the HTML on the header and hide/show it based on the classes in the body.

3

Thanks @Falco. That is in the ballpark! My challenge is how to use that capability. In that component you say:

After installing this component to the active theme you can target CSS using group membership like, for example:

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

I know it is probably simple, but I am trying to understand that example. If I have a header div block like this:

<div name="test">My Text</div>

Then can I turn on that text when a class exists? Specifically something like:

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

And wouldn’t I also need to shut it off when that class does not exist? In fact isn’t the shutting off part the important bit? So perhaps something like this:

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

I have been experimenting and googling but have not found this yet. I’m starting to watch the ‘about CSS’ youtubes which is probably good for me, but so far no hard clues. I appreciate your help!

4

I’ve done a lot of experimentation and right now this is working, but I do have a question.

In Header:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Please click to renew your membership
    </font>
    </a>
</div>

In CSS:

.renewlink{
    display: none;
  }

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

I really expected this to work instead of the double CSS entry above and it did not. What am I missing here?

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

Thanks