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, incluida la adición de campos personalizados y la ocultación de perfiles de usuario.

:person_raising_hand: Nivel de usuario requerido: Administrador

La personalización de las tarjetas de usuario con CSS te permite personalizar la apariencia y la información que se muestra.

Personalización de tarjetas de usuario

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

Cambio del color de fondo

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

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

Añadir un borde alrededor de las tarjetas de usuario

Para añadir un borde alrededor de las tarjetas de usuario:

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

Cambio de la fuente y el color de los nombres de usuario

Para cambiar la fuente y el color de los nombres de usuario en las tarjetas de usuario:

.user-card .username {
    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 unión:

.user-card .map-location,
.user-card .user-info .join-date {
    display: none;
}

Personalización de la apariencia según el grupo de usuarios o un usuario específico

Para personalizar la apariencia de la tarjeta de usuario para un grupo de usuarios o un 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 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 añadir campos de usuario personalizados a las tarjetas de usuario siguiendo estos pasos:

  1. Navega a la página /admin/customize/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 al público, puedes usar la siguiente configuración del sitio:

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

Otras personalizaciones

Se pueden realizar otras personalizaciones a través de componentes de temas, como:

6 Me gusta
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);
}