Torne usuários da equipe mais reconhecíveis com avatares, posts e menções personalizados

[Discourse]

Existem vários métodos que podem ser usados para tornar um usuário da equipe imediatamente reconhecível para outros usuários.

Mostrar escudo de moderador

Qualquer usuário da equipe que seja moderador, ou administrador e moderador, terá o escudo de moderador ao lado do nome de usuário.

Dicas: o escudo não aparecerá se o usuário da equipe tiver o cargo de administrador, mas não de moderador.

CSS para alterar a cor do escudo

Alterar a cor para todos os usuários da equipe

/*Alterar a cor para todos os usuários da equipe*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

Para alterar a cor do escudo em todos os lugares onde ele aparece, não apenas em um tópico:

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;
}

Alterar a cor diferenciando usuários ADMIN de usuários MOD

/*Alterar a cor diferenciando usuários ADMIN de usuários MOD*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

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

CSS para ocultar o escudo

Ocultar o escudo apenas nas postagens

.names .svg-icon-title {
    display: none;
}

Ocultar o escudo nas postagens e no cartão de usuário

.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

Adicionar títulos

Qualquer usuário da equipe pode acessar /admin/users/list/staff e criar um título para sua própria conta. O título aparecerá ao lado do nome de usuário dos usuários da equipe:

Veja como exemplo:

CSS para personalizar um título existente

Personalizar o título para membros da equipe

.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

Personalizar o título diferenciando administradores e moderadores

.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

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

Dicas: os usuários da equipe da sua organização não precisam ser administradores ou moderadores reais do site; eles podem simplesmente ser membros sem permissões especiais. Para personalizar o título deles, basta criar um novo grupo personalizado, configurá-lo como primário e adicionar os usuários necessários. É possível definir um título automático que será atribuído a todos os membros por padrão.

Personalizar o título de usuários não administradores e não moderadores pertencentes a um grupo personalizado primário

Substitua SEU-GROUP-PERSONALIZADO pelo nome do grupo; no exemplo abaixo é .group--community ~ .user-title, etc.

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

Lembre-se de que um usuário pode escolher outro título além do atribuído, no perfil do usuário — neste caso, o título nas postagens será o escolhido pelo usuário — e também configurá-lo como “nenhum” — neste caso, nenhum título será exibido.

Para evitar isso, é possível criar um título personalizado do zero para que não seja editável pelo lado do usuário.

CSS para criar um título personalizado do zero

Exemplo:

Dicas para criar um título após o nome de usuário

/*Exibir um título personalizado após o nome de usuário para todos os usuários da EQUIPE
Não será exibido se a configuração do site "priorizar nome de usuário na UX" estiver desativada */
.username.staff::after {
    content: 'Usuário da equipe';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Opcional - Reduzir tamanho no cartão de usuário*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

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

/*Exibir um título personalizado após o nome de usuário diferenciando usuários ADMIN de usuários MOD
Não será exibido se a configuração do site "priorizar nome de usuário na UX" estiver desativada */
.username {
  &.admin:after {
    content: 'Usuário Admin' !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: 'Usuário Moderador';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*Opcional - Ocultar o ícone do escudo apenas nas postagens*/
.names .svg-icon-title {
  display: none;
}

Dicas para criar um título após o nome

/*Exibir um título personalizado após o nome completo para todos os membros da EQUIPE*/
span.staff :after {
  content: "Equipe";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

/*Exibir um título personalizado após o nome completo diferenciando usuários ADMIN de usuários MOD */
span {
  &.admin :after {
    content: "Admin" !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;
  }
}

Pergunta: Posso adicionar ambos os títulos personalizados?

Sim, é possível, embora redundante. Veja o exemplo abaixo:

.username.staff::after {
    content: 'Usuário da equipe';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Opcional - Reduzir tamanho no cartão de usuário*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

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


span {
  &.admin :after {
    content: "Admin" !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;
  }
}

Adicionar ornamento de avatar

Você pode adicionar um ornamento no canto inferior direito do avatar de um usuário da equipe:

Você precisa criar um grupo personalizado, adicionar usuários da equipe como membros e tornar o grupo primário. Veja Add group flair on member avatars para detalhes.

Se você quiser adicionar uma imagem personalizada em vez de um ícone, pode fazer o upload dela para seu site e usar o URL conforme descrito no guia Incluindo ativos em temas e componentes remotos. Após adicionar a imagem na seção Uploads do tema, a variável da imagem e seu link direto aparecerão. Clique com o botão direito no link direto e copie o link no campo Imagem do Ornamento de Avatar.

Personalizar nomes e nomes de usuário da equipe

Usando um pouco de CSS, você pode personalizar os nomes de usuário da equipe nas postagens.

Observe que os mostrados abaixo são apenas exemplos; todos podem modificar o estilo como preferirem!

Alterar a cor do nome de usuário

Por padrão, o nome de usuário aparece antes do nome completo.

Alterar a cor do nome de usuário para todos os usuários da equipe

span.username.staff a {
      color: #00A9DB;
}

Alterar a cor do nome de usuário diferenciando administradores e moderadores

span.username {
  &.moderator {
    a {
      color: green;
    }
  }

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

Esta variante usa (quase) o mesmo CSS usado para o 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;
    }
  }
}

Alterar a cor do nome

Se você quiser que o nome completo apareça antes do nome de usuário, ative a configuração do site exibir nome nas postagens e desative priorizar nome de usuário na UX.

Alterar a cor do nome para todos os usuários da equipe

.names span.staff a {
   color: #00A9DB;
} 

Esta variante usa (quase) o mesmo CSS usado para o título personalizado.

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

Alterar a cor do nome diferenciando administradores e moderadores

.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

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

Esta variante usa (quase) o mesmo CSS usado para o 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;
    }
  }
}

Dicas: por algum motivo, você pode querer personalizar um único membro da equipe — talvez o fundador do site ou um membro particularmente valorizado. Aqui está um exemplo de como direcionar um único usuário — e sim, o mesmo método pode ser usado para qualquer usuário, mesmo não da equipe-

Nome de usuário

/*Substitua NOME-DE-USUARIO pelo nome de usuário do usuário*/
.topic-meta-data .names span.username a[data-user-card=NOME-DE-USUARIO] {
  color: blue;
}

Nome

/*Substitua NOME-DE-USUARIO pelo nome do usuário*/
.topic-meta-data .full-name a[data-user-card=NOME-DE-USUARIO] {
  color: blue;
}

Ambos nome e nome de usuário

.topic-meta-data .names span a[data-user-card=NOME-DE-USUARIO] {
    color: blue;
}

Personalizar o fundo das postagens da equipe

Usuários da equipe podem adicionar manualmente uma cor da equipe usando o botão Adicionar cor da equipe nas postagens.

e o resultado será:

Adicionar uma cor de fundo a toda a postagem

Adicionando algumas linhas de CSS, a cor de fundo pode ser aplicada a toda a postagem quando o botão Adicionar cor da equipe é clicado.

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*altere a cor aqui*/
  }
}

É possível automatizar essa função e personalizar todas as postagens escritas por usuários da equipe de várias maneiras usando CSS. Para fazer isso, é necessário criar um grupo personalizado primário conforme descrito acima, veja o capítulo Ornamento. Quando seus membros da equipe estiverem em um grupo primário, você poderá direcionar suas postagens com CSS.

Dicas: você pode adicionar todos os membros da equipe ao grupo ou decidir adicionar apenas os administradores ou apenas os moderadores. Você também pode criar dois grupos primários diferentes para administradores e moderadores (observe que você terá que usar dois nomes diferentes, pois “administradores” e “moderadores” são nomes já usados para grupos automáticos) e definir o CSS para diferenciar as postagens dos administradores das dos moderadores.

Alterar automaticamente o fundo das postagens para todos os usuários da equipe

/*Substitua NOME-DO-GROUP pelo nome do seu grupo*/
.topic-post.group-NOME-DO-GROUP .topic-body .cooked { 
    background-color: #ffffd0; /*altere a cor aqui*/
}

ou

.topic-post.group-NOME-DO-GROUP .topic-body { 
    background-color: #ffffd0; /*altere a cor aqui*/
}

ou até mesmo

/*Substitua NOME-DO-GROUP pelo nome do seu grupo*/

.topic-post.group-NOME-DO-GROUP .topic-body .cooked { 
    background-color: #ffffd0; /*altere a cor aqui*/
}

.topic-post.group-NOME-DO-GROUP .names span { 
    background-color: #ffffd0; /*altere a cor aqui*/
}

Alterar automaticamente a cor da fonte e a família de fontes das postagens para todos os usuários da equipe

/*Substitua NOME-DO-GROUP pelo nome do seu grupo*/
.topic-post.group-NOME-DO-GROUP .topic-body .cooked { 
    color: #fec601; /*altere a cor da fonte aqui*/
    font-family: ......; /* altere a família de fontes aqui */
}

Alterar automaticamente apenas o fundo das respostas da equipe e não sua primeira postagem

Cada postagem em um tópico tem um ID com este formato: numero_postagem. Para a primeira postagem em um tópico, o ID é post_1, as respostas têm IDs como post_2, post_3 e assim por diante.

Se você quiser adicionar um fundo a todas as postagens da equipe, exceto a primeira:

/*Substitua NOME-DO-GROUP pelo nome do seu grupo*/
.topic-post.group-NOME-DO-GROUP .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*altere a cor aqui*/
}

Adicionar conteúdo extra nas postagens da equipe

Uma assinatura simples

.topic-post.group-NOME-DO-GROUP .topic-body .cooked::after {
    content: "De sua equipe amigável";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

Um logotipo simples

.topic-post.group-NOME-DO-GROUP .topic-body .cooked::after {
    background-image: url("URL-DA-IMAGEM");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*altere esses valores de acordo com o tamanho da imagem*/
    width: 138px; /*altere este valor de acordo com o tamanho da imagem*/
    height: 36px; /*altere este valor de acordo com o tamanho da imagem*/
    display: block;
    float: right;
    content: "";
}

Personalizar cores de menção

Veja: Customize mention colors

[one1]

@Discourse

Dicas: seus usuários da equipe não precisam ser administradores ou moderadores do site à força, eles podem ser simplesmente membros sem permissões especiais.

Estou confuso com isso. Quando diz, “seus usuários da equipe”, a equipe de que está falando é a equipe da organização ou empresa (por exemplo, funcionários) que não tem nada a ver com a administração do fórum? Porque no contexto do Discourse “equipe” tem um significado muito específico, ou seja, moderadores e administradores.

Se for esse o caso, então eu recomendaria mudar para ler:

Dicas: os usuários funcionários da sua organização não precisam ser administradores ou moderadores reais do site, eles podem ser simplesmente membros sem permissões especiais.