Texte d'en-tête conditionnel basé sur l'appartenance à un groupe

Dev
1

J’espère obtenir de l’aide concernant un en-tête et du CSS. Je connais beaucoup de langages, mais je débute tout juste avec le CSS.

Je tente d’afficher un message en haut de mon en-tête pour rappeler aux membres de renouveler leur abonnement lorsqu’ils approchent de la date d’échéance. Le renouvellement s’effectuera via notre site principal, donc j’aimerais inclure un lien. J’utilise le thème « Light ».

Je suis très proche du résultat, après avoir suivi ces étapes :

  1. J’ai créé un groupe nommé « renewal » avec un avatar « please renew », mais sans autre action.

  2. J’ai défini « renewal » comme groupe principal.

  3. J’ai inclus « renewal » dans la propriété du groupe en utilisant SSO depuis mon site distant, basé sur la date de renouvellement.

  4. J’ai inséré le code personnalisé suivant dans l’en-tête de Common :

image
image335×104 3.84 KB

  1. J’ai inséré le code suivant dans le CSS de Common :

image
image364×111 4.14 KB

Cela fonctionne jusqu’à afficher le texte lorsque l’utilisateur est membre du groupe « renewal ».

Maintenant, j’aimerais améliorer ce message en mettant le texte en rouge et en ajoutant une balise pour « cliquez ici pour renouveler ». Mais comme beaucoup d’entre vous le savent, on ne peut pas ajouter de balises HTML dans une chaîne de contenu « Content ». J’ai essayé d’ajouter une couleur de police à la balise

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 « J'aime »
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 « J'aime »