Personalizza le schede utente

[Discourse]

Questa guida descrive come personalizzare se e come vengono visualizzate le schede utente su Discourse, inclusa l’aggiunta di campi personalizzati e la nascondibilità dei profili utente.

Livello utente richiesto: Amministratore

La personalizzazione delle schede utente tramite CSS consente di personalizzare l’aspetto e le informazioni visualizzate.

Personalizzazione delle schede utente

Le schede utente possono essere personalizzate con CSS. Di seguito sono riportati alcuni esempi di personalizzazioni CSS che puoi utilizzare:

Modifica del colore di sfondo

Per modificare il colore di sfondo delle schede utente:

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

Aggiunta di un bordo attorno alle schede utente

Per aggiungere un bordo attorno alle schede utente:

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

Modifica del font e del colore dei nomi utente

Per modificare il font e il colore del nome principale/nome utente visualizzato sulle schede utente:

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

Nascondere elementi specifici

Per nascondere determinati elementi, come la posizione dell’utente o la data di iscrizione:

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

Personalizzazione dell’aspetto in base al gruppo utente o a un utente specifico

Per personalizzare l’aspetto della scheda utente per un gruppo utente specifico o per un utente specifico:

/* Personalizza per un gruppo utente specifico */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Personalizza per un nome utente specifico */
.user-card.user-card-Username {
    background-color: #FFD700;
}

Solo il gruppo principale dell’utente viene impostato come selettore di classe. Quando l’utente non ha un gruppo principale, il selettore di classe è group-null.

Campi utente personalizzati

Inoltre, è possibile aggiungere campi utente personalizzati alle schede utente seguendo i passaggi indicati di seguito:

1. Naviga alla pagina /admin/config/user-fields.
2. Seleziona la casella di controllo Mostra sulla scheda utente? per i campi che desideri visualizzare sulla scheda utente.

Nascondere tutti i profili utente

Se è necessario nascondere i profili utente al pubblico, è possibile utilizzare la seguente impostazione del sito:

• nascondi i profili utente al pubblico: Disabilita le schede utente, i profili utente e la directory degli utenti per gli utenti anonimi.

Altre personalizzazioni

Altre personalizzazioni possono essere effettuate tramite componenti del tema, come ad esempio:

• Collegamenti cliccabili alle icone social sul profilo
• Directory delle schede utente
• Scheda utente “Visto l’ultima volta”

[Mason_L]

@Discourse

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

Questa parte non funziona.
Non c’è ‘data-user-card’ sotto la classe ‘user-card’.

[Turtle]

Sto cercando di fare in modo che gli amministratori abbiano nomi utente di colore blu ovunque sul sito, non sono sicuro se esista un selettore per i nomi utente ovunque che funzioni, ma ecco quello che ho per CSS e non funziona.

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

Qualche pensiero o idea? Il selettore è semplicemente diverso ora dato che sono passati più di due anni da quando è stato pubblicato? @SaraDev sembri essere la persona che ha scritto questo, sai cosa succede?

[manuel (Manuel Kostka)]

Sì, questo non sembra aggiornato. Credo che le dichiarazioni attuali sarebbero:

@Discourse

/* Personalizza per un gruppo di utenti specifico */
user-card.group-NomeGruppo{
    background-color: #FFF8DC;
}

/* Personalizza per un nome utente specifico */
.user-card.user-card-NomeUtente {
    background-color: #FFD700;
}

Inoltre, solo il gruppo primario dell’utente viene impostato come selettore di classe. Quando l’utente non ha un gruppo primario, il selettore di classe è group-null.

Ciò significa che non è possibile selezionare le schede utente di amministratori o moderatori, poiché questi gruppi non possono essere impostati come gruppi primari. Se ispezioni le schede utente degli amministratori qui su meta, vedrai che il selettore di classe è group-team.

[SaraDev (Sara Devlaeminck)]

@Turtle

Sto cercando di fare in modo che gli amministratori abbiano nomi utente di colore blu ovunque sul sito

@manuel

Credo che le dichiarazioni attuali sarebbero:

@Discourse

/* Personalizza per un gruppo di utenti specifico */
user-card.group-NomeGruppo{
    background-color: #FFF8DC;
}

/* Personalizza per un nome utente specifico */
.user-card.user-card-NomeUtente {
    background-color: #FFD700;
}

Inoltre, solo il gruppo primario dell’utente viene impostato come selettore di classe. Quando l’utente non ha un gruppo primario, il selettore di classe è group-null.

Posso confermare che questo è corretto e attualmente il metodo migliore da utilizzare per personalizzare l’aspetto della scheda utente in base al gruppo di utenti o all’utente specifico.

Grazie @manuel e @Turtle per averlo segnalato.

Ho aggiornato la guida qui anche con queste informazioni.

[Turtle]

Va bene, ma se volessi cambiare il colore del nome utente sulla card? Cosa devo aggiungere? Scusa, non so molto sui selettori CSS.

[SaraDev (Sara Devlaeminck)]

@Turtle

cambia il colore del nome utente sulla card

Per questo tipo di personalizzazione, dovresti usare il seguente CSS:

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

Questo personalizzerebbe il colore dell’elemento username sulle schede utente di tutti gli utenti di un sito.

Es:

Inoltre, per aiutarti a trovare i selettori CSS specifici da utilizzare per personalizzazioni come questa sul tuo sito, puoi seguire: Trovare i selettori CSS corretti

[jrgong]

Suggerimento rapido e piccolo: ogni volta che gli utenti hanno un avatar con lo stesso colore di sfondo della user card, non c’era una separazione adeguata.

Abbiamo semplicemente aggiunto la stessa box-shadow all’immagine dell’avatar della user card, che ha risolto il problema.

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