Personalize os cartões de usuário

[Discourse]

Este guia descreve como personalizar se e como os cartões de usuário são exibidos no Discourse, incluindo a adição de campos personalizados e a ocultação de perfis de usuário.

Nível de usuário necessário: Administrador

A personalização dos cartões de usuário com CSS permite que você personalize a aparência e as informações exibidas.

Personalizando cartões de usuário

Os cartões de usuário podem ser personalizados com CSS. Aqui estão alguns exemplos de personalizações CSS que você pode usar:

Alterando a cor de fundo

Para alterar a cor de fundo dos cartões de usuário:

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

Adicionando uma borda ao redor dos cartões de usuário

Para adicionar uma borda ao redor dos cartões de usuário:

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

Alterando a fonte e a cor dos nomes de usuário

Para alterar a fonte e a cor do nome principal/nome de usuário exibido nos cartões de usuário:

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

Ocultando elementos específicos

Para ocultar certos elementos, como a localização do usuário ou a data de entrada:

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

Personalizando a aparência com base no grupo de usuários ou em um usuário específico

Para personalizar a aparência do cartão de usuário para um grupo de usuários específico ou um usuário específico:

/* Personalizar para um grupo de usuários específico */
.user-card.group-NomeDoGrupo{
    background-color: #FFF8DC;
}

/* Personalizar para um nome de usuário específico */
.user-card.user-card-NomeDeUsuario {
    background-color: #FFD700;
}

Apenas o grupo principal do usuário é definido como um seletor de classe. Quando o usuário não tem um grupo principal, o seletor de classe é group-null.

Campos de usuário personalizados

Além disso, você pode adicionar campos de usuário personalizados aos cartões de usuário seguindo os seguintes passos:

1. Navegue até a página /admin/config/user-fields.
2. Selecione a caixa de verificação Mostrar no cartão de usuário? para os campos que deseja exibir no cartão de usuário.

Ocultando todos os perfis de usuário

Se você precisar ocultar os perfis de usuário do público, pode usar a seguinte configuração do site:

• ocultar perfis de usuário do público: Desative cartões de usuário, perfis de usuário e o diretório de usuários para usuários anônimos.

Outras Personalizações

Outras personalizações podem ser feitas por meio de componentes de tema, como:

• Links de Ícones Sociais Clicáveis no Perfil
• Diretório de Cartões de Usuário
• Cartão de Usuário “Visto Por Último”

[Mason_L]

@Discourse

.user-card[data-user-card="specific_username"] {
    background-color: #FFD700;
}

Esta parte não funciona.
Não há ‘data-user-card’ sob a classe ‘user-card’.

[Turtle]

Estou tentando fazer com que os administradores tenham nomes de usuário na cor azul em todos os lugares do site - não sei se existe um seletor para nomes de usuário em todos os lugares que funcione -, mas aqui está o que tenho para CSS e não está funcionando.

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

Alguma opinião ou ideia? O seletor é diferente agora, já que se passaram mais de dois anos desde que isso foi publicado? @SaraDev, você parece ser a pessoa que escreveu isso, sabe o que está acontecendo?

[manuel (Manuel Kostka)]

Sim, isso não parece atualizado. Acredito que as declarações atuais seriam:

@Discourse

/* Personalizar para um grupo de usuários específico */
user-card.group-NomeDoGrupo{
    background-color: #FFF8DC;
}

/* Personalizar para um nome de usuário específico */
.user-card.user-card-NomeDeUsuário {
    background-color: #FFD700;
}

Além disso, apenas o grupo principal do usuário é definido como um seletor de classe. Quando o usuário não tem um grupo principal, o seletor de classe é group-null.

Isso significa que você não pode direcionar os cartões de usuário de administradores ou moderadores, pois esses grupos não podem ser definidos como grupos principais. Se você inspecionar os cartões de usuário de administradores aqui no meta, verá que o seletor de classe é group-team.

[SaraDev (Sara Devlaeminck)]

@Turtle

Estou tentando fazer com que os administradores tenham nomes de usuário de cor azul em todos os lugares do site

@manuel

Acredito que as declarações atuais seriam:

@Discourse

/* Personalizar para um grupo de usuários específico */
user-card.group-NomeDoGrupo{
    background-color: #FFF8DC;
}

/* Personalizar para um nome de usuário específico */
.user-card.user-card-NomeDeUsuário {
    background-color: #FFD700;
}

Além disso, apenas o grupo principal do usuário é definido como um seletor de classe. Quando o usuário não tem um grupo principal, o seletor de classe é group-null.

Posso confirmar que isso está correto e atualmente é o melhor método a ser usado para personalizar a aparência do cartão de usuário com base no grupo de usuários ou em um usuário específico.

Obrigado @manuel e @Turtle por apontarem isso.

Também atualizei o guia aqui com essas informações.

[Turtle]

Tudo bem, mas e se eu quiser mudar a cor do nome de usuário no cartão? O que eu adiciono? Desculpe, não sei muito sobre seletores CSS.

[SaraDev (Sara Devlaeminck)]

@Turtle

mudar a cor do nome de usuário no cartão

Para este tipo de personalização, você vai querer usar o seguinte CSS:

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

Isso personalizaria a cor do elemento username nos cartões de usuário de todos os usuários em um site.

Ex:

Além disso, para ajudar a encontrar os seletores CSS específicos a serem usados para personalizações como esta em seu site, você pode seguir: Encontrando os seletores CSS corretos

[jrgong]

Sugestão rápida e pequena: sempre que os usuários tinham um avatar com a mesma cor de fundo do cartão do usuário, não havia uma separação adequada.

Simplesmente adicionamos a mesma sombra de caixa à imagem do avatar do cartão do usuário, o que resolveu o problema.

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