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

Criei um componente de tema simples que adiciona classes CSS de grupo ao elemento body do HTML para facilitar personalizações. Eu o chamo de GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

Dessa forma, você pode criar todo o banner no HTML do cabeçalho e mostrá-lo/ocultá-lo com base nas classes presentes no body.

3

Obrigado, @Falco. Isso está no caminho certo! Meu desafio é saber como usar essa funcionalidade. Nesse componente, você diz:

Após instalar este componente no tema ativo, você pode direcionar o CSS usando a associação a grupos, como, por exemplo:

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

Sei que provavelmente é algo simples, mas estou tentando entender esse exemplo. Se eu tiver um bloco div no cabeçalho assim:

<div name="test">Meu Texto</div>

Posso exibir esse texto quando uma classe existir? Algo como:

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

E eu não precisaria também desativá-lo quando essa classe não existir? Na verdade, a parte de desativar não é a mais importante? Então talvez algo assim:

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

Tenho experimentado e pesquisado no Google, mas ainda não encontrei isso. Estou começando a assistir aos vídeos sobre CSS no YouTube, o que provavelmente é bom para mim, mas até agora não tenho pistas concretas. Agradeço muito sua ajuda!

4

Fiz muitas experimentações e, por enquanto, isso está funcionando, mas tenho uma dúvida.

No cabeçalho:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Clique aqui para renovar sua assinatura
    </font>
    </a>
</div>

No CSS:

.renewlink{
    display: none;
  }

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

Eu realmente esperava que isso funcionasse em vez da entrada dupla de CSS acima, mas não funcionou. O que estou deixando passar?

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

Obrigado