Hacer que los usuarios del personal sean más reconocibles con avatares, publicaciones y menciones personalizadas

Documentación Gestión del sitio
, ,
1

Existen varios métodos que se pueden utilizar para que un usuario del personal sea inmediatamente reconocible para otros usuarios.

Mostrar escudo de moderador

Cualquier usuario del personal que sea moderador, o administrador y moderador, tendrá el escudo de moderador junto al nombre de usuario.

image
image444×209 12.3 KB

:left_speech_bubble: Consejos: el escudo no aparecerá si el usuario del personal tiene el rol de administrador pero no de moderador.

CSS para cambiar el color del escudo

Cambiar el color para todos los usuarios del personal 
/*Cambiar el color para todos los usuarios del personal*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

image
image428×285 16.8 KB

Para cambiar el color del escudo en todos los lugares donde aparece, no solo en un tema:

span.username.staff .d-icon.d-icon-shield-halved,
.user-card .first-row .names .d-icon.d-icon-shield-halved,
.user-profile-names .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}
Cambiar el color diferenciando usuarios ADMIN de usuarios MOD 
/*Cambiar el color diferenciando usuarios ADMIN de usuarios MOD*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
}

image
image425×253 15 KB

CSS para ocultar el escudo

Ocultar el escudo solo en las publicaciones 
.names .svg-icon-title {
    display: none;
}
Ocultar el escudo en las publicaciones y en la tarjeta de usuario 
.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

Añadir títulos

Cualquier usuario del personal puede acceder a /admin/users/list/staff y crear un título para su propia cuenta. El título aparecerá junto al nombre de usuario de los usuarios del personal:

image
image930×124 9.34 KB

Ver como ejemplo:

image
image679×572 41.1 KB

CSS para personalizar un título existente

Personalizar el título para los miembros del personal 
.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

image
image707×573 41.3 KB

Personalizar el título diferenciando administradores y moderadores 
.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

image
image466×311 16.8 KB

:left_speech_bubble: Consejos: los usuarios del personal de su organización no tienen que ser realmente administradores o moderadores del sitio; pueden ser simplemente miembros sin permisos especiales. Para personalizar su título, simplemente cree un nuevo grupo personalizado, configúrelo como principal y agregue los usuarios necesarios. Es posible establecer un título automático que se asignará a todos los miembros por defecto.

Personalizar el título de usuarios que no son administradores ni moderadores y pertenecen a un grupo personalizado principal

Cambie SU-GROUP-PERSONALIZADO por el nombre del grupo; en el ejemplo de abajo es .group--community ~ .user-title, etc.

image
image284×262 3.11 KB

.group--SU-GROUP-PERSONALIZADO ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
  }

image
image480×526 27.8 KB

Recuerde que un usuario puede elegir otro título distinto al asignado desde su perfil de usuario; en este caso, el título en las publicaciones será el elegido por el usuario, y también puede configurarlo como “ninguno”; en ese caso no se mostrará ningún título.

Para evitar esto, es posible crear un título personalizado desde cero para que no sea editable desde el lado del usuario.

CSS para crear un título personalizado desde cero

Ejemplo:

image

Consejos para crear un título después del nombre de usuario 
/*Mostrar un título personalizado después del nombre de usuario para todos los usuarios del PERSONAL
No se mostrará si la configuración del sitio "priorizar nombre de usuario en la interfaz de usuario" está desactivada */
.username.staff::after {
    content: 'Usuario del personal';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Opcional - Reducir tamaño en la tarjeta de usuario*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Opcional - Ocultar el escudo de moderador solo en las publicaciones*/
.names .svg-icon-title {
    display:none;
}

image

/*Mostrar un título personalizado después del nombre de usuario diferenciando usuarios ADMIN de usuarios MOD
No se mostrará si la configuración del sitio "priorizar nombre de usuario en la interfaz de usuario" está desactivada */
.username {
  &.admin:after {
    content: 'Usuario administrador' !important;
    color: red !important;
    border: 1px solid red !important;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }

  &.moderator:after {
    content: 'Usuario moderador';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*Opcional - Ocultar el escudo de icono solo en las publicaciones*/
.names .svg-icon-title {
  display: none;
}

image
image518×308 18.6 KB

Consejos para crear un título después del nombre completo 
/*Mostrar un título personalizado después del nombre completo para todos los miembros del PERSONAL*/
span.staff :after {
  content: "Personal";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

image

/*Mostrar un título personalizado después del nombre completo diferenciando usuarios ADMIN de usuarios MOD */
span {
  &.admin :after {
    content: "Administrador" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Moderador";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

image
image518×295 18.4 KB

Pregunta: ¿Puedo añadir ambos títulos personalizados?

Sí, es posible, aunque redundante. Consulte el ejemplo a continuación:

.username.staff::after {
    content: 'Usuario del personal';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Opcional - Reducir tamaño en la tarjeta de usuario*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Opcional - Ocultar el escudo de moderador*/
.names .svg-icon-title {
    display:none;
}


span {
  &.admin :after {
    content: "Administrador" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "Moderador";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

image
image587×326 19.7 KB

Añadir brillo al avatar

Puede añadir un brillo en la parte inferior derecha del avatar de un usuario del personal:

image
image395×293 16 KB

Necesita crear un grupo personalizado, añadir usuarios del personal como miembros y establecer el grupo como principal. Consulte Add group flair on member avatars para obtener detalles.

Si desea añadir una imagen personalizada en lugar de un icono, puede subirla a su sitio web y utilizar la URL según se describe en la guía Incluir activos en temas y componentes remotos. Después de añadir la imagen en la sección Subidas del tema, aparecerá la variable de la imagen y su enlace directo. Haga clic derecho en el enlace directo y copie el enlace en el campo Imagen del brillo del avatar.

Personalizar nombres y nombres de usuario del personal

Utilizando un poco de CSS, puede personalizar los nombres de usuario del personal en las publicaciones.

Tenga en cuenta que los mostrados a continuación son solo ejemplos; ¡todos pueden modificar el estilo como prefieran!

Cambiar el color del nombre de usuario

Por defecto, el nombre de usuario aparece antes del nombre completo.

Cambiar el color del nombre de usuario para todos los usuarios del personal 
span.username.staff a {
      color: #00A9DB;
}

image
image391×250 14.8 KB
Cambiar el color del nombre de usuario diferenciando administradores y moderadores 
span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

image
image391×254 14.9 KB

Esta variante utiliza (casi) el mismo CSS utilizado para el título personalizado.

span.username {
  &.moderator {
    a {
        color: white;
        background-color: green;
        border-radius: 8px;
        margin-left: 5px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }

  &.admin {
    a {
        color: white;
        background-color: red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }
}

image
image400×248 15 KB

Cambiar el color del nombre

Si desea que el nombre completo aparezca antes del nombre de usuario, active la configuración del sitio mostrar nombre en las publicaciones y desactive priorizar nombre de usuario en la interfaz de usuario.

Cambiar el color del nombre para todos los usuarios del personal 
.names span.staff a {
   color: #00A9DB;
}

image
image397×252 15.3 KB

Esta variante utiliza (casi) el mismo CSS utilizado para el título personalizado.

.names span.staff a {
    color: #00A9DB;
    background-color: #D3F5FF; /*utilice un color claro*/
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
}

image
image416×265 16.1 KB

Cambiar el color del nombre diferenciando administradores y moderadores 
.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

image
image408×251 14.9 KB

Esta variante utiliza (casi) el mismo CSS utilizado para el título personalizado.

.names span {
  &.moderator {
    a {
        color: green;
        border: 1px solid green;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }

  &.admin {
    a {
        color: red;
        border: 1px solid red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }
}

image
image406×259 15.9 KB

:left_speech_bubble: Consejos: por alguna razón, quizás quiera personalizar un solo miembro del personal, tal vez el fundador del sitio o un miembro particularmente valorado. Aquí hay un ejemplo de cómo dirigirse a un solo usuario, y sí, el mismo método puede usarse para cualquier usuario, incluso si no es del personal.

Nombre de usuario 
/*CAMBIAR NOMBRE-DE-USUARIO por el nombre de usuario del usuario*/
.topic-meta-data .names span.username a[data-user-card=NOMBRE-DE-USUARIO] {
  color: blue;
}

image

Nombre 
/*CAMBIAR NOMBRE-DE-USUARIO por el nombre del usuario*/
.topic-meta-data .full-name a[data-user-card=NOMBRE-DE-USUARIO] {
  color: blue;
}

image

Ambos, nombre y nombre de usuario 
.topic-meta-data .names span a[data-user-card=NOMBRE-DE-USUARIO] {
    color: blue;
}

image

Personalizar el fondo de las publicaciones del personal

Los usuarios del personal pueden agregar manualmente un color de personal usando el botón Añadir color de personal en las publicaciones.

image
image179×302 4.04 KB

y el resultado será:

image
image793×208 10.5 KB

Añadir un color de fondo a toda la publicación

Añadiendo algunas líneas de CSS, el color de fondo se puede aplicar a toda la publicación cuando se hace clic en el botón Añadir color de personal.

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*cambie el color aquí*/
  }
}

image
image802×300 15.5 KB

Es posible automatizar esta función y personalizar todas las publicaciones escritas por usuarios del personal de varias maneras usando CSS. Para ello, es necesario crear un grupo personalizado principal como se describió anteriormente, consulte el capítulo de Brillo. Cuando sus miembros del personal estén en un grupo principal, podrá dirigirse a sus publicaciones con CSS.

:left_speech_bubble: Consejos: puede añadir todos los miembros del personal al grupo o decidir añadir solo a los administradores o solo a los moderadores. También puede crear dos grupos principales diferentes para administradores y moderadores (tenga en cuenta que deberá usar dos nombres diferentes, ya que “administradores” y “moderadores” son nombres ya utilizados para grupos automáticos) y configurar el CSS para diferenciar las publicaciones de los administradores de las de los moderadores.

Cambiar automáticamente el fondo de las publicaciones para todos los usuarios del personal 

/*CAMBIAR NOMBRE-DEL-GROUP por el nombre de su grupo*/
.topic-post.group-NOMBRE-DEL-GROUP .topic-body .cooked { 
    background-color: #ffffd0; /*cambie el color aquí*/
}

image
image776×298 20.7 KB

o

.topic-post.group-NOMBRE-DEL-GROUP .topic-body { 
    background-color: #ffffd0; /*cambie el color aquí*/
}

image
image781×253 14 KB

o incluso

/*CAMBIAR NOMBRE-DEL-GROUP por el nombre de su grupo*/

.topic-post.group-NOMBRE-DEL-GROUP .topic-body .cooked { 
    background-color: #ffffd0; /*cambie el color aquí*/
}

.topic-post.group-NOMBRE-DEL-GROUP .names span { 
    background-color: #ffffd0; /*cambie el color aquí*/
}

image
image783×215 13.7 KB

Cambiar automáticamente el color de la fuente y la familia de fuentes de las publicaciones para todos los usuarios del personal 
/*CAMBIAR NOMBREDELGRUPO por el nombre de su grupo*/
.topic-post.group-NOMBREDELGRUPO .topic-body .cooked { 
    color: #fec601; /*cambie el color de la fuente aquí*/
    font-family: ......; /* cambie la familia de fuentes aquí */
}
Cambiar automáticamente solo el fondo de las respuestas del personal y no su primera publicación

Cada publicación en un tema tiene un ID con este formato: post_number. Para la primera publicación en un tema, el ID es post_1; las respuestas tienen IDs como post_2, post_3, etc.

Si desea añadir un fondo a todas las publicaciones del personal excepto la primera:

/*CAMBIAR NOMBRE-DEL-GROUP por el nombre de su grupo*/
.topic-post.group-NOMBRE-DEL-GROUP .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*cambie el color aquí*/
}

image
image1270×1000 95.2 KB

Añadir contenido extra en las publicaciones del personal

Una firma simple 
.topic-post.group-NOMBRE-DEL-GROUP .topic-body .cooked::after {
    content: "De su amable personal";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

image
image802×173 13.2 KB

Un logo simple 
.topic-post.group-NOMBRE-DEL-GROUP .topic-body .cooked::after {
    background-image: url("URL-DE-LA-IMAGEN");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*cambie estos valores según el tamaño de la imagen*/
    width: 138px; /*cambie este valor según el tamaño de la imagen*/
    height: 36px; /*cambie este valor según el tamaño de la imagen*/
    display: block;
    float: right;
    content: "";
}

image
image785×196 17.3 KB

Personalizar los colores de las menciones

Ver: Customize mention colors

58 Me gusta
How to make it obvious who is staff?
How to add a symbol next to someone’s name
Can I display a Font Awesome class icon next to a user Title?
Make Staff Responses More Visible
Help "sorting" my users
Admin / Mod post in different color
Nick or name customize, colorful and icon, how to do it?
Staff color by default for group members
Using CSS to hide specific elements based on user role
Customize mention colors
Adjust user titles to look like “team” or “Tester” above
CSS username colors only working for admin/moderators?
Create custom badges for admin moderator or employee group
The /about page does not display moderators that are also administrators
Update our admins and moderator shields
Flair image and Admin Icon next to my username not visible
Trust Level Permissions Reference
Icons and text next to the user info
Resources for using Discourse in the classroom
Please update 'Understanding Discourse Trust Levels' — or is there a different doc?
As admin I want to be able to change usernames, regardless of filters
Custom Icons for admins and moderators (and other groups)
Avatar flair image not visible for 'Staff' Group
Shield icon for Admins (in discussion threads)
Post Logo doesn't show up
How to display the shield icon on topics and on the admin profile to all members
63

Estoy confundido por esto. Cuando dice “tus usuarios del personal”, ¿el personal del que se habla es el personal de la organización o empresa (por ejemplo, empleados) que no tiene nada que ver con la gestión del foro? Porque en el contexto de Discourse “personal” tiene un significado muy específico, es decir, moderadores y administradores.

Si ese es el caso, entonces recomendaría cambiarlo para que diga:

:left_speech_bubble: Consejos: Los usuarios empleados de tu organización no tienen que ser administradores o moderadores del sitio, pueden ser simplemente miembros sin permisos especiales.

2 Me gusta