Personalizza i colori delle menzioni

Ispirato da questo argomento, e dai colori personalizzati dei ruoli di Discord, ho scritto questo codice molto semplice che aggiunge un data-mention alle menzioni di gruppi e utenti, in questo modo per poter posizionare colori diversi (e non un “colore generale”) tramite CSS :smile:

Il codice al momento è JQuery ma a un certo punto lo cambierò in Vanilla JavaScript :sweat_smile:


Per applicarlo devi solo incollare il codice nell’intestazione del tuo tema o componente:

<script type="text/discourse-plugin" version="0.9">
$(document).ajaxSuccess(() =>{
  $('a.mention').each(function() {
    $(this).attr('data-mention', $(this).text().replace('@', ''));  
   });
  $('a.mention-group').each(function() {
   $(this).attr('data-mention', $(this).text().replace('@', ''));  
   });
});
</script>

Dopo questo puoi applicare lo stile che desideri tramite CSS :partying_face:

Ad esempio:

a.mention[data-mention="Alexander"] {
  color: #4527a0 !important;
}

CapturaMentionUser


In questo caso era per un nome utente specifico, tuttavia funziona anche per i gruppi usando a.mention-group[data-mention="group-name"]


Cercherò di trasformarlo in un componente tema che possa essere personalizzato dalle sue “impostazioni” senza modificare il CSS :thinking:

10 Mi Piace

Lo dico solo per metterlo in chiaro. Penso che questo si adatti bene a questo argomento. Soprattutto questo

4 Mi Piace

È possibile introdurre delle modifiche in modo che vengano colorate le menzioni di tutti i membri del gruppo impostato?

+1

Sto cercando un modo per identificare quali utenti non sono in un gruppo (o sono in un gruppo) in un argomento che contiene un elenco di menzioni di utenti.