Intestazione condizionale basata sull'appartenenza al gruppo

Sviluppatore
1

Spero di ricevere aiuto per l’intestazione e il CSS. Conosco molti linguaggi, ma sto appena iniziando con il CSS.

Sto cercando di inserire un avviso in cima all’intestazione per ricordare ai membri di rinnovare quando si avvicinano alla data di scadenza. Il rinnovo avverrà tramite il nostro sito web principale, quindi vorrei includere un link. Sto utilizzando il tema ‘Light’.

Sono molto vicino alla soluzione, avendo seguito questi passaggi:

  1. Ho creato un gruppo chiamato ‘renewal’ con un avatar ‘please renew’, ma senza altre azioni.

  2. Ho impostato ‘renewal’ come gruppo principale.

  3. Ho incluso ‘renewal’ nella proprietà del gruppo utilizzando SSO dal mio sito remoto in base alla data di scadenza.

  4. Ho inserito il seguente codice personalizzato nell’intestazione di Common:

image
image335×104 3.84 KB

  1. Ho inserito il seguente codice nel CSS di Common:

image
image364×111 4.14 KB

Funziona fino al punto di mostrare il testo quando l’utente è membro del gruppo ‘renewal’.

Ora vorrei migliorare questo avviso rendendo il testo rosso e includendo un tag <a per “clicca qui per rinnovare”. Ma come molti di voi sanno, non è possibile aggiungere tag HTML a una stringa Content:. Ho provato ad aggiungere un colore del font al <div, ma senza successo.

C’è una risposta semplice? O esiste un approccio completamente diverso, ad esempio attivando o disattivando l’intero blocco div?

Per tua informazione, l’esempio da cui sono partito utilizzava un tag <p nell’intestazione, ma questo aggiungeva una riga vuota extra in cima all’intestazione, indipendentemente dal fatto che fosse attivato o meno. Vorrei evitare ciò…

Grazie per il vostro aiuto!

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 Mi Piace
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 Mi Piace