Personalizar tarjetas de usuario

Documentación Gestión del sitio
,
1

:bookmark: Esta guía describe cómo personalizar si y cómo se muestran las tarjetas de usuario en Discourse, incluyendo la adición de campos personalizados y la ocultación de perfiles de usuario.

:person_raising_hand: Nivel de usuario requerido: Administrador

Personalizar las tarjetas de usuario con CSS te permite personalizar la apariencia y la información mostrada.

Personalización de tarjetas de usuario

Las tarjetas de usuario se pueden personalizar con CSS. Aquí hay algunos ejemplos de personalizaciones CSS que puedes utilizar:

Cambiar el color de fondo

Para cambiar el color de fondo de las tarjetas de usuario:

.user-card {
    background-color: #f0f0f0;
}

Agregar un borde alrededor de las tarjetas de usuario

Para agregar un borde alrededor de las tarjetas de usuario:

.user-card {
    border: 2px solid #4CAF50;
    border-radius: 10px;
}

Cambiar la fuente y el color de los nombres de usuario

Para cambiar la fuente y el color del nombre principal/nombre de usuario mostrado en las tarjetas de usuario:

.user-card .name-username-wrapper {
    font-family: 'Arial', sans-serif;
    color: #FF5733;
}

Ocultar elementos específicos

Para ocultar ciertos elementos, como la ubicación del usuario o la fecha de registro:

.user-card .location,
.user-card .metadata__user-created {
    display: none;
}

Personalizar la apariencia según el grupo de usuario o un usuario específico

Para personalizar la apariencia de la tarjeta de usuario para un grupo de usuarios o usuario específico:

/* Personalizar para un grupo de usuarios específico */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Personalizar para un nombre de usuario específico */
.user-card.user-card-Username {
    background-color: #FFD700;
}

:information_source: Solo el grupo principal del usuario se establece como un selector de clase. Cuando el usuario no tiene un grupo principal, el selector de clase es group-null.

Campos de usuario personalizados

Además, puedes agregar campos de usuario personalizados a las tarjetas de usuario siguiendo estos pasos:

  1. Navega a la página /admin/config/user-fields.
  2. Selecciona la casilla Mostrar en la tarjeta de usuario? para los campos que deseas mostrar en la tarjeta de usuario.

screenshot
screenshot697×512 19.7 KB

Ocultar todos los perfiles de usuario

Si necesitas ocultar los perfiles de usuario del público, puedes utilizar la siguiente configuración del sitio:

  • ocultar perfiles de usuario del público: Desactiva las tarjetas de usuario, los perfiles de usuario y el directorio de usuarios para usuarios anónimos.

Otras personalizaciones

Otras personalizaciones se pueden realizar a través de componentes de tema, como:

7 Me gusta
Using user cards to quickly view information about others
2

Esto no funciona.
No hay ‘data-user-card’ en la clase ‘user-card’.

3

Estoy intentando que los administradores tengan nombres de usuario de color azul en todo el sitio. No estoy seguro de si hay un selector para nombres de usuario en todas partes que funcione, pero esto es lo que tengo para CSS y no funciona.

.group-admins .user-card .username {
    color: #2596be;
}

¿Alguna idea u opinión? ¿Es el selector diferente ahora que han pasado más de dos años desde que se publicó esto? @SaraDev, pareces ser la persona que escribió esto, ¿sabes qué pasa?

4

Sí, esto no parece estar actualizado. Creo que las declaraciones actuales serían:

Además, solo el grupo principal del usuario se establece como selector de clase. Cuando el usuario no tiene un grupo principal, el selector de clase es group-null.

Eso significa que no puedes apuntar a las tarjetas de usuario de administradores o moderadores, ya que estos grupos no se pueden establecer como grupos principales. Si inspeccionas las tarjetas de usuario de los administradores aquí en meta, verás que el selector de clase es group-team.

2 Me gusta
6

Puedo confirmar que esto es correcto y actualmente es el mejor método para personalizar la apariencia de la tarjeta de usuario según el grupo de usuarios o el usuario específico.

Gracias @manuel y @Turtle por señalar esto. :slightly_smiling_face:

También he actualizado la guía aquí con esta información.

3 Me gusta
7

De acuerdo, pero ¿y si quiero cambiar el color del nombre de usuario en la tarjeta? ¿Qué añado? Lo siento, no sé mucho sobre selectores CSS.

1 me gusta
8

Para este tipo de personalización, querrás usar el siguiente CSS:

.name-username-wrapper {
   color: #f47dff;
}

Esto personalizaría el color del elemento username en las tarjetas de usuario de todos los usuarios en un sitio.

Ej:

image
image1071×366 25.4 KB

Además, para ayudarte a encontrar los selectores CSS específicos para usar en personalizaciones como esta en tu sitio, puedes seguir: Encontrar los selectores CSS correctos

2 Me gusta
9

Sugerencia rápida y pequeña: siempre que los usuarios tenían un avatar con el mismo color de fondo que la tarjeta de usuario, no había una separación adecuada.

Simplemente agregamos la misma sombra paralela a la imagen del avatar de la tarjeta de usuario, lo que solucionó el problema.

.user-card .first-row .avatar {
    box-shadow: var(--shadow-dropdown);
}