Texto condicional del encabezado basado en la pertenencia al grupo

Desarrollador
1

Espero contar con ayuda sobre el encabezado / CSS. Conozco muchos lenguajes, pero apenas estoy comenzando con CSS.

Estoy intentando colocar un aviso en la parte superior de mi encabezado para recordar a los miembros que renueven cuando estén cerca de su fecha de renovación. La renovación se realizará a través de nuestro sitio web principal, por lo que me gustaría incluir un enlace. Estoy utilizando el tema ‘Light’.

Estoy muy cerca, habiendo realizado los siguientes pasos:

  1. Creé un grupo llamado ‘renewal’ con un avatar de ‘por favor renueve’, pero sin otras acciones.

  2. Establecí ‘renewal’ como el grupo principal.

  3. Incluí ‘renewal’ en la propiedad del grupo utilizando SSO desde mi sitio remoto basado en la fecha de renovación.

  4. Colocé el siguiente código personalizado en el Encabezado de Common:

image
image335×104 3.84 KB

  1. Colocé el siguiente código en el CSS de Common

image
image364×111 4.14 KB

Funciona hasta el punto de mostrar el texto cuando el usuario es miembro del grupo de renovación.

Ahora me gustaría mejorar este aviso cambiando el color de la fuente a rojo e incluyendo una etiqueta para ‘haga clic aquí para renovar’. Pero como la mayoría de ustedes sabe, no se pueden agregar etiquetas HTML a una cadena de Contenido: . Intenté agregar un color de fuente a la etiqueta

2

He creado un componente de tema sencillo que añade clases CSS de grupo al cuerpo del HTML para facilitar las personalizaciones. Lo llamo GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

De esta manera, puedes crear el banner completo en el HTML del encabezado y mostrarlo u ocultarlo según las clases presentes en el cuerpo.

3

¡Gracias @Falco! Eso está muy cerca de lo que necesito. Mi desafío es saber cómo usar esa capacidad. En ese componente dices:

Después de instalar este componente en el tema activo, puedes apuntar al CSS usando la pertenencia a grupos, por ejemplo:

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

Sé que probablemente sea algo sencillo, pero estoy tratando de entender ese ejemplo. Si tengo un bloque div de encabezado como este:

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

¿Puedo mostrar ese texto cuando existe una clase? Específicamente algo como:

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

¿Y no necesitaría también ocultarlo cuando esa clase no existe? De hecho, ¿no es la parte de ocultarlo la más importante? Así que quizás algo como esto:

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

He estado experimentando y buscando en Google, pero aún no he encontrado esto. Estoy empezando a ver los videos de YouTube sobre CSS, lo cual probablemente me vendrá bien, pero hasta ahora no tengo pistas concretas. ¡Agradezco mucho tu ayuda!

4

He realizado muchas pruebas y por ahora esto funciona, pero tengo una pregunta.

En el encabezado:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Haz clic aquí para renovar tu membresía
    </font>
    </a>
</div>

En CSS:

.renewlink{
    display: none;
  }

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

Realmente esperaba que esto funcionara en lugar de la doble entrada de CSS anterior y no fue así. ¿Qué estoy pasando por alto?

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

Gracias