Rendere gli utenti staff più riconoscibili con avatar, post e menzioni personalizzati

Documentazione Gestione del sito
, ,
1

Esistono diversi metodi per rendere immediatamente riconoscibile un utente dello staff agli altri utenti.

Mostra lo scudo del moderatore

Qualsiasi utente dello staff che è moderatore, o amministratore e moderatore, avrà lo scudo del moderatore accanto al nome utente.

image
image444×209 12.3 KB

:left_speech_bubble: Suggerimenti: lo scudo non apparirà se l’utente dello staff ha il ruolo di amministratore ma non di moderatore.

CSS per cambiare il colore dello scudo

Cambia il colore per tutti gli utenti dello staff 
/*Cambia il colore per tutti gli utenti dello staff*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

image
image428×285 16.8 KB

Per cambiare il colore dello scudo in ogni luogo in cui appare, non solo in un argomento:

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;
}
Cambia il colore differenziando gli utenti ADMIN da quelli MOD 
/*Cambia il colore differenziando gli utenti ADMIN da quelli 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 per nascondere lo scudo

Nascondi lo scudo solo nei post 
.names .svg-icon-title {
    display: none;
}
Nascondi lo scudo nei post e nella scheda utente 
.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

Aggiungi titoli

Qualsiasi utente dello staff può accedere a /admin/users/list/staff e creare un titolo per il proprio account. Il titolo apparirà accanto al nome utente degli utenti dello staff:

image
image930×124 9.34 KB

Vedi come esempio:

image
image679×572 41.1 KB

CSS per personalizzare un titolo esistente

Personalizza il titolo per i membri dello staff 
.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

image
image707×573 41.3 KB

Personalizza il titolo differenziando amministratori e moderatori 
.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: Suggerimenti: gli utenti dello staff della tua organizzazione non devono essere necessariamente amministratori o moderatori del sito; possono semplicemente essere membri senza permessi speciali. Per personalizzare il loro titolo, crea semplicemente un nuovo gruppo personalizzato, configuralo come primario e aggiungi gli utenti necessari. È possibile impostare un titolo automatico che verrà assegnato di default a tutti i membri.

Personalizza il titolo di utenti non amministratori e non moderatori appartenenti a un gruppo personalizzato primario

Cambia YOUR-CUSTOM-GROUP con il nome del gruppo; nell’esempio qui sotto è .group--community ~ .user-title ecc.

image
image284×262 3.11 KB

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

image
image480×526 27.8 KB

Ricorda che un utente può scegliere un altro titolo diverso da quello assegnato, dal profilo utente: in questo caso il titolo nei post diventerà quello scelto dall’utente e può anche essere configurato su “nessuno” - in questo caso nessun titolo verrà mostrato.

Per evitare ciò, è possibile creare un titolo personalizzato da zero in modo che non sia modificabile dal lato utente.

CSS per creare un titolo personalizzato da zero

Esempio:

image

Suggerimenti per creare un titolo dopo il nome utente 
/*Visualizza un titolo personalizzato dopo il nome utente per tutti gli utenti STAFF
Non verrà visualizzato se l'impostazione del sito "prioritize username in ux" è disabilitata */
.username.staff::after {
    content: 'Utente dello staff';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Opzionale - Riduci le dimensioni nella scheda utente*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Opzionale - Nascondi lo scudo del moderatore solo nei post*/
.names .svg-icon-title {
    display:none;
}

image

/*Visualizza un titolo personalizzato dopo il nome utente differenziando gli utenti ADMIN da quelli MOD
Non verrà visualizzato se l'impostazione del sito "prioritize username in ux" è disabilitata */
.username {
  &.admin:after {
    content: 'Utente amministratore' !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: 'Utente moderatore';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*Opzionale - Nascondi lo scudo solo nei post*/
.names .svg-icon-title {
  display: none;
}

image
image518×308 18.6 KB

Suggerimenti per creare un titolo dopo il nome 
/*Visualizza un titolo personalizzato dopo il nome completo per tutti i membri STAFF*/
span.staff :after {
  content: "Staff";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

image

/*Visualizza un titolo personalizzato dopo il nome completo differenziando gli utenti ADMIN da quelli 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: "Moderator";
    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

Domanda: Posso aggiungere entrambi i titoli personalizzati?

Sì, è possibile, anche se ridondante. Vedi l’esempio qui sotto:

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

/*Opzionale - Riduci le dimensioni nella scheda utente*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Opzionale - Nascondi lo scudo del moderatore*/
.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: "Moderator";
    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

Aggiungi un’aura all’avatar

Puoi aggiungere un’aura in basso a destra sull’avatar di un utente dello staff:

image
image395×293 16 KB

Devi creare un gruppo personalizzato, aggiungere gli utenti dello staff come membri e rendere il gruppo primario. Vedi Add group flair on member avatars per i dettagli.

Se vuoi aggiungere un’immagine personalizzata invece di un’icona, puoi caricarla sul tuo sito web e utilizzare l’URL come descritto nella guida Inclusione di risorse in temi e componenti remoti. Dopo aver aggiunto l’immagine nella sezione Uploads del tema, appariranno la variabile dell’immagine e il suo link diretto. Fai clic con il tasto destro sul link diretto e copia il link nel campo Immagine dell’aura dell’avatar.

Personalizza i nomi e i nomi utente dello staff

Usando un po’ di CSS puoi personalizzare i nomi utente dello staff nei post.

Tieni presente che quelli mostrati di seguito sono solo esempi; ognuno può modificare lo stile come preferisce!

Cambia il colore del nome utente

Di default il nome utente appare prima del nome completo.

Cambia il colore del nome utente per tutti gli utenti dello staff 
span.username.staff a {
      color: #00A9DB;
}

image
image391×250 14.8 KB
Cambia il colore del nome utente differenziando amministratori e moderatori 
span.username {
  &.moderator {
    a {
      color: green;
    }
  }

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

image
image391×254 14.9 KB

Questa variante utilizza (quasi) lo stesso CSS usato per il titolo personalizzato.

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

Cambia il colore del nome

Se vuoi che il nome completo appaia prima del nome utente, attiva l’impostazione del sito display name on posts e disattiva prioritize username in ux.

Cambia il colore del nome per tutti gli utenti dello staff 
.names span.staff a {
   color: #00A9DB;
}

image
image397×252 15.3 KB

Questa variante utilizza (quasi) lo stesso CSS usato per il titolo personalizzato.

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

image
image416×265 16.1 KB

Cambia il colore del nome differenziando amministratori e moderatori 
.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

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

image
image408×251 14.9 KB

Questa variante utilizza (quasi) lo stesso CSS usato per il titolo personalizzato.

.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: Suggerimenti: per qualche motivo potresti voler personalizzare un singolo membro dello staff - forse il fondatore del sito o un membro particolarmente apprezzato. Ecco un esempio di come selezionare un singolo utente - e sì, lo stesso metodo può essere utilizzato per qualsiasi utente, anche non appartenente allo staff

Nome utente 
/*Sostituisci USERNAME con il nome utente dell'utente*/
.topic-meta-data .names span.username a[data-user-card=USERNAME] {
  color: blue;
}

image

Nome 
/*Sostituisci USERNAME con il nome dell'utente*/
.topic-meta-data .full-name a[data-user-card=USERNAME] {
  color: blue;
}

image

Entrambi nome e nome utente 
.topic-meta-data .names span a[data-user-card=USERNAME] {
    color: blue;
}

image

Personalizza lo sfondo dei post dello staff

Gli utenti dello staff possono aggiungere manualmente un colore dello staff utilizzando il pulsante Aggiungi colore dello staff nei post.

image
image179×302 4.04 KB

e il risultato sarà:

image
image793×208 10.5 KB

Aggiungi un colore di sfondo all'intero post

Aggiungendo alcune righe di CSS, il colore di sfondo può essere applicato all’intero post quando viene cliccato il pulsante Aggiungi colore dello staff.

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*cambia qui il colore*/
  }
}

image
image802×300 15.5 KB

È possibile automatizzare questa funzione e personalizzare tutti i post scritti dagli utenti dello staff in vari modi utilizzando il CSS. Per fare ciò, è necessario creare un gruppo personalizzato primario come descritto sopra, vedi il capitolo Aura. Quando i membri del tuo staff sono in un gruppo primario, puoi selezionare i loro post con il CSS.

:left_speech_bubble: Suggerimenti: puoi aggiungere al gruppo tutti i membri dello staff o decidere di aggiungere solo gli amministratori o solo i moderatori. Puoi anche creare due diversi gruppi primari per amministratori e moderatori (nota che dovrai usare due nomi diversi poiché “admins” e “moderators” sono nomi già utilizzati per i gruppi automatici) e impostare il CSS per differenziare i post degli amministratori da quelli dei moderatori.

Cambia automaticamente lo sfondo dei post per tutti gli utenti dello staff 

/*Sostituisci GROUP-NAME con il nome del tuo gruppo*/
.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*cambia qui il colore*/
}

image
image776×298 20.7 KB

oppure

.topic-post.group-GROUP-NAME .topic-body { 
    background-color: #ffffd0; /*cambia qui il colore*/
}

image
image781×253 14 KB

o anche

/*Sostituisci GROUP-NAME con il nome del tuo gruppo*/

.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*cambia qui il colore*/
}

.topic-post.group-GROUP-NAME .names span { 
    background-color: #ffffd0; /*cambia qui il colore*/
}

image
image783×215 13.7 KB

Cambia automaticamente il colore del font e la famiglia di font per tutti gli utenti dello staff 
/*Sostituisci GROUPNAME con il nome del tuo gruppo*/
.topic-post.group-GROUPNAME .topic-body .cooked { 
    color: #fec601; /*cambia qui il colore del font*/
    font-family: ......; /* cambia qui la famiglia di font */
}
Cambia automaticamente solo lo sfondo delle risposte dello staff e non del loro primo post

Ogni post in un argomento ha un ID con questo formato: post_number. Per il primo post in un argomento l’ID è post_1, le risposte hanno ID come post_2, post_3 e così via.

Se vuoi aggiungere uno sfondo a tutti i post dello staff tranne il primo:

/*Sostituisci GROUP-NAME con il nome del tuo gruppo*/
.topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*cambia qui il colore*/
}

image
image1270×1000 95.2 KB

Aggiungi contenuto extra nei post dello staff

Una semplice firma 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    content: "Dal tuo staff amichevole";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

image
image802×173 13.2 KB

Un semplice logo 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    background-image: url("IMAGE-URL");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*cambia questi valori in base alle dimensioni dell'immagine*/
    width: 138px; /*cambia questo valore in base alle dimensioni dell'immagine*/
    height: 36px; /*cambia questo valore in base alle dimensioni dell'immagine*/
    display: block;
    float: right;
    content: "";
}

image
image785×196 17.3 KB

Personalizza i colori delle menzioni

Vedi: Customize mention colors

58 Mi Piace
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