Benutzerkarten anpassen

Dokumentation Website-Verwaltung
,
1

:bookmark: Dieser Leitfaden beschreibt, wie Sie anpassen können, ob und wie Benutzerkarten auf Discourse angezeigt werden, einschließlich des Hinzufügens benutzerdefinierter Felder und des Ausblendens von Benutzerprofilen.

:person_raising_hand: Erforderliche Benutzerebene: Administrator

Das Anpassen von Benutzerkarten mit CSS ermöglicht es Ihnen, das Erscheinungsbild und die angezeigten Informationen zu personalisieren.

Benutzerkarten anpassen

Benutzerkarten können mit CSS angepasst werden. Hier sind einige Beispiele für CSS-Anpassungen, die Sie verwenden können:

Hintergrundfarbe ändern

Um die Hintergrundfarbe von Benutzerkarten zu ändern:

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

Rahmen um Benutzerkarten hinzufügen

Um einen Rahmen um Benutzerkarten hinzuzufügen:

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

Schriftart und Farbe von Benutzernamen ändern

Um die Schriftart und Farbe von Benutzernamen auf Benutzerkarten zu ändern:

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

Bestimmte Elemente ausblenden

Um bestimmte Elemente wie den Standort oder das Beitrittsdatum des Benutzers auszublenden:

.user-card .map-location,
.user-card .user-info .join-date {
    display: none;
}

Erscheinungsbild basierend auf Benutzergruppe oder spezifischem Benutzer anpassen

Um das Erscheinungsbild der Benutzerkarte für eine bestimmte Benutzergruppe oder einen bestimmten Benutzer anzupassen:

/* Für eine bestimmte Benutzergruppe anpassen */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* Für einen bestimmten Benutzernamen anpassen */
.user-card.user-card-Username {
    background-color: #FFD700;
}

:information_source: Nur die primäre Gruppe des Benutzers wird als Klassen-Selektor gesetzt. Wenn der Benutzer keine primäre Gruppe hat, ist der Klassen-Selektor group-null.

Benutzerdefinierte Benutzerfelder

Darüber hinaus können Sie benutzerdefinierte Benutzerfelder zu Benutzerkarten hinzufügen, indem Sie die folgenden Schritte ausführen:

  1. Navigieren Sie zur Seite /admin/customize/user_fields.
  2. Wählen Sie das Kontrollkästchen Auf Benutzerkarte anzeigen? für die Felder aus, die Sie auf der Benutzerkarte anzeigen möchten.

screenshot
screenshot697×512 19.7 KB

Alle Benutzerprofile ausblenden

Wenn Sie Benutzerprofile vor der Öffentlichkeit ausblenden müssen, können Sie die folgende Website-Einstellung verwenden:

  • Benutzerprofile vor der Öffentlichkeit verbergen: Deaktiviert Benutzerkarten, Benutzerprofile und das Benutzerverzeichnis für anonyme Benutzer.

Weitere Anpassungen

Weitere Anpassungen können über Theme-Komponenten vorgenommen werden, wie z. B.:

6 „Gefällt mir“
2

Dieser Teil funktioniert nicht.
Es gibt kein ‘data-user-card’ unter der Klasse ‘user-card’.

3

Ich versuche, dafür zu sorgen, dass Administratoren überall auf der Website blaue Benutzernamen haben – ich bin mir nicht sicher, ob es einen Selektor für Benutzernamen gibt, der überall funktioniert –, aber hier ist mein CSS, und es funktioniert nicht.

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

Irgendwelche Gedanken oder Ideen? Ist der Selektor einfach anders, da diese Veröffentlichung über zwei Jahre her ist? @SaraDev, Sie scheinen die Person zu sein, die das geschrieben hat, wissen Sie, was los ist?

4

Ja, das scheint nicht aktuell zu sein. Ich glaube, die aktuellen Deklarationen wären:

Außerdem wird nur die primäre Gruppe des Benutzers als Klassenselektor gesetzt. Wenn der Benutzer keine primäre Gruppe hat, ist der Klassenselektor group-null.

Das bedeutet, dass Sie keine Benutzerkarten von Administratoren oder Moderatoren ansprechen können, da diese Gruppen nicht als primäre Gruppen festgelegt werden können. Wenn Sie die Benutzerkarten von Administratoren hier auf Meta untersuchen, werden Sie sehen, dass der Klassenselektor group-team lautet.

2 „Gefällt mir“
6

Ich kann bestätigen, dass dies korrekt ist und derzeit die beste Methode zur Anpassung des Erscheinungsbilds der Benutzerkarte basierend auf der Benutzergruppe oder einem bestimmten Benutzer.

Danke @manuel und @Turtle, dass ihr darauf hingewiesen habt. :slightly_smiling_face:

Ich habe den Leitfaden hier ebenfalls mit diesen Informationen aktualisiert.

3 „Gefällt mir“
7

In Ordnung, aber was ist, wenn ich die Farbe des Benutzernamens auf der Karte ändern möchte? Was muss ich hinzufügen? Entschuldigung, ich weiß nicht viel über CSS-Selektoren.

1 „Gefällt mir“
8

Für diese Art von Anpassung möchten Sie das folgende CSS verwenden:

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

Dies würde die Farbe des username-Elements auf den Benutzerkarten aller Benutzer auf einer Website anpassen.

Bsp.:

image
image1071×366 25.4 KB

Um die richtigen CSS-Selektoren für solche Anpassungen auf Ihrer Website zu finden, können Sie auch Folgendes befolgen: Die richtigen CSS-Selektoren finden

2 „Gefällt mir“
9

Schneller und kleiner Vorschlag: Wenn Benutzer einen Avatar mit der gleichen Hintergrundfarbe wie die Benutzerkarte hatten, gab es keine richtige Trennung.

Wir haben einfach den gleichen Schatten zur Avatar-Bilddatei der Benutzerkarte hinzugefügt, das hat den Trick gemacht

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