Benutzerkarten anpassen

Dokumentation Website-Verwaltung
,
1

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

:person_raising_hand: Erforderliche Benutzerstufe: Administrator

Die Anpassung von Benutzerkarten mit CSS ermöglicht es Ihnen, das Aussehen 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 zu legen:

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

Schriftart und Farbe von Benutzernamen ändern

Um die Schriftart und Farbe des angezeigten Hauptnamens/Benutzernamens auf Benutzerkarten zu ändern:

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

Bestimmte Elemente ausblenden

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

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

Das Aussehen basierend auf Benutzergruppe oder spezifischem Benutzer anpassen

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

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

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

:information_source: Nur die primäre Gruppe des Benutzers wird als Klassenselektor festgelegt. Wenn der Benutzer keine primäre Gruppe hat, lautet der Klassenselektor group-null.

Benutzerdefinierte Benutzerfelder

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

  1. Navigieren Sie zur Seite /admin/config/user-fields.
  2. Aktivieren Sie das Kontrollkästchen Auf Benutzerkarte anzeigen? für die Felder, die auf der Benutzerkarte angezeigt werden sollen.

screenshot
screenshot697×512 19.7 KB

Alle Benutzerprofile ausblenden

Wenn Sie Benutzerprofile vor der Öffentlichkeit verbergen müssen, können Sie folgende Site-Einstellung verwenden:

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

Andere Anpassungen

Weitere Anpassungen können über Theme-Komponenten vorgenommen werden, wie zum Beispiel:

7 „Gefällt mir“
Using user cards to quickly view information about others
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);
}