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

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.

5 Me gusta
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

1 me gusta