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

Ho creato un semplice componente tema che inserisce classi CSS di gruppo nell’elemento body dell’HTML per facilitare le personalizzazioni; lo chiamo GitHub - discourse/discourse-groups-css-classes-in-body · GitHub :sweat_smile:

In questo modo puoi creare l’intero banner nell’HTML dell’intestazione e nasconderlo/mostrarlo in base alle classi presenti nel body.

3

Grazie @Falco. È nel giusto ballpark! La mia sfida è capire come utilizzare quella funzionalità. In quel componente hai detto:

Dopo aver installato questo componente nel tema attivo, puoi indirizzare il CSS in base all’appartenenza a un gruppo, ad esempio:

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

So che probabilmente è semplice, ma sto cercando di capire quell’esempio. Se ho un blocco div nell’intestazione come questo:

<div name="test">Il mio testo</div>

Posso attivare quel testo quando esiste una classe? Nello specifico qualcosa come:

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

E non dovrei anche disattivarlo quando quella classe non esiste? In realtà, non è forse la parte di disattivazione quella più importante? Quindi forse qualcosa del genere:

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

Sto facendo esperimenti e cercando su Google, ma non ho ancora trovato questa soluzione. Sto iniziando a guardare i video su YouTube riguardanti il CSS, il che è probabilmente utile per me, ma finora non ho trovato indizi concreti. Apprezzo molto il tuo aiuto!

4

Ho fatto molte prove e al momento questo funziona, ma ho una domanda.

Nell’Header:

<div id='renew' class='renewlink' align="center">
    <a href="https://www.example.com/renewlink" target="_blank")
    <font color='red'>
    Clicca qui per rinnovare la tua iscrizione
    </font>
    </a>
</div>

Nel CSS:

.renewlink{
    display: none;
  }

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

Mi aspettavo davvero che funzionasse usando invece la singola regola CSS qui sotto, ma non è successo. Cosa mi sto perdendo?

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

Grazie