Personalizza le schede utente

[Discourse]

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

Livello utente richiesto: Amministratore

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

Personalizzazione delle schede utente

Le schede utente possono essere personalizzate con CSS. Ecco 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 carattere e del colore dei nomi utente

Per modificare il carattere e il colore dei nomi utente sulle schede utente:

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

Occultamento di elementi specifici

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

.user-card .map-location,
.user-card .user-info .join-date {
    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 un utente:

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

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

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.

Campi utente personalizzati

Inoltre, puoi aggiungere campi utente personalizzati alle schede utente seguendo questi passaggi:

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

Occultamento di tutti i profili utente

Se devi occultare i profili utente al pubblico, puoi utilizzare la seguente impostazione del sito:

• Nascondi i profili utente dal pubblico: Disabilita le schede utente, i profili utente e la directory utente per gli utenti anonimi.

Altre personalizzazioni

Altre personalizzazioni possono essere apportate tramite componenti del tema, come:

• Link icona social cliccabili sul profilo
• Directory schede utente
• Scheda utente “Ultimo visto”

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