Personaliza los colores de mención

Inspirado en este tema, y los colores personalizados de los roles de Discord, he escrito este código muy simple que añade un data-mention a las menciones de grupos y usuarios, de esta manera poder poner diferentes colores (Y no un “color general”) vía CSS :smile:

El código por el momento es JQuery pero en algún momento lo cambiaré a Vanilla JavaScript :sweat_smile:


Para aplicarlo solo tienes que pegar el código en la cabecera de tu 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>

Después de esto puedes aplicar el estilo que quieras a través de CSS :partying_face:

Por ejemplo:

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

CapturaMentionUser


En este caso fue para un nombre de usuario específico, sin embargo también funciona para grupos usando a.mention-group[data-mention="group-name"]


Miraré de hacer de esto un componente de tema que se pueda personalizar desde sus “ajustes” sin modificar el CSS :thinking:

10 Me gusta

Solo lo pongo aquí. Creo que esto encaja bien con este tema. Especialmente esto

4 Me gusta

¿Es posible introducir ajustes para que coloree las menciones de todos los que pertenecen al grupo establecido?

+1

Estoy buscando una forma de identificar qué usuarios no están en un grupo (o están en un grupo) en un Tema que contiene una lista de menciones de usuarios.