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

J’ai créé un simple composant de thème qui ajoute des classes CSS de groupe dans le corps HTML pour faciliter les personnalisations. Je l’appelle GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:.

Ainsi, vous pouvez créer l’intégralité de la bannière dans le HTML de l’en-tête et l’afficher ou la masquer en fonction des classes présentes dans le corps.

3

Merci @Falco. C’est dans la bonne direction ! Mon défi est de savoir comment utiliser cette capacité. Dans ce composant, vous dites :

Après avoir installé ce composant dans le thème actif, vous pouvez cibler le CSS en fonction de l’appartenance à un groupe, par exemple :

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

Je sais que c’est probablement simple, mais j’essaie de comprendre cet exemple. Si j’ai un bloc div d’en-tête comme celui-ci :

<div name="test">Mon Texte</div>

Puis-je alors afficher ce texte lorsqu’une classe existe ? Plus précisément quelque chose comme :

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

Et n’aurais-je pas aussi besoin de le désactiver lorsque cette classe n’existe pas ? En fait, n’est-ce pas la partie désactivation qui est la plus importante ? Alors peut-être quelque chose comme ceci :

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

J’ai fait des expériences et cherché sur Google, mais je n’ai pas encore trouvé cela. Je commence à regarder les vidéos YouTube sur ‘à propos de CSS’, ce qui est probablement bon pour moi, mais pour l’instant, pas de pistes concrètes. Je vous remercie pour votre aide !

4

J’ai fait pas mal d’expérimentations et pour l’instant cela fonctionne, mais j’ai une question.

Dans l’en-tête :

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Veuillez cliquer pour renouveler votre adhésion
    </font>
    </a>
</div>

Dans le CSS :

.renewlink{
    display: none;
  }

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

Je m’attendais vraiment à ce que cela fonctionne avec l’entrée CSS suivante à la place de la double entrée ci-dessus, mais cela n’a pas fonctionné. Qu’est-ce que je rate ?

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

Merci