Mitarbeiter-Benutzer durch angepasste Avatare, Beiträge und Erwähnungen besser erkennbar machen

[Discourse]

Es gibt verschiedene Methoden, um einen Mitarbeiter sofort für andere Nutzer erkennbar zu machen.

Moderatorschild anzeigen

Jeder Mitarbeiter, der Moderator ist oder sowohl Admin als auch Moderator, erhält ein Moderatorschild neben dem Benutzernamen.

Tipps: Das Schild erscheint nicht, wenn der Mitarbeiter zwar die Rolle eines Admins, aber nicht die eines Moderators hat.

CSS zum Ändern der Schildfarbe

Farbe für alle Mitarbeiter ändern

/*Farbe für alle Mitarbeiter ändern*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

Um die Farbe des Schilds überall dort zu ändern, wo es erscheint, nicht nur in einem Thema:

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

Farbe ändern, um ADMIN-Nutzer von MOD-Nutzern zu unterscheiden

/*Farbe ändern, um ADMIN-Nutzer von MOD-Nutzern zu unterscheiden*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
} 

CSS zum Ausblenden des Schilds

Schild nur in Beiträgen ausblenden

.names .svg-icon-title {
    display: none;
}

Schild in Beiträgen und auf der Benutzerkarte ausblenden

.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

Titel hinzufügen

Jeder Mitarbeiter kann auf /admin/users/list/staff zugreifen und einen Titel für sein eigenes Konto erstellen. Der Titel erscheint neben dem Benutzernamen der Mitarbeiter:

Siehe als Beispiel:

CSS zum Anpassen eines bestehenden Titels

Titel für Mitarbeiter anpassen

.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

Titel anpassen, um Admins und Mods zu unterscheiden

.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

Tipps: Die Mitarbeiter Ihrer Organisation müssen keine tatsächlichen Site-Admins oder Mods sein; es können einfach Mitglieder ohne besondere Berechtigungen sein. Um ihren Titel anzupassen, erstellen Sie einfach eine neue benutzerdefinierte Gruppe, konfigurieren Sie sie als primär und fügen Sie die erforderlichen Benutzer hinzu. Es ist möglich, einen automatischen Titel festzulegen, der standardmäßig allen Mitgliedern zugewiesen wird.

Titel von nicht-Admin- und nicht-Mod-Benutzern anpassen, die einer primären benutzerdefinierten Gruppe angehören

Ersetzen Sie YOUR-CUSTOM-GROUP durch den Gruppennamen. Im folgenden Beispiel ist es .group--community ~ .user-title usw.

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

Denken Sie daran, dass ein Benutzer im Benutzerprofil einen anderen Titel als den zugewiesenen wählen kann. In diesem Fall wird der in Beiträgen angezeigte Titel durch den vom Benutzer gewählten Titel ersetzt. Es ist auch möglich, ihn auf “keinen” zu setzen – in diesem Fall wird kein Titel angezeigt.

Um dies zu vermeiden, kann ein benutzerdefinierter Titel von Grund auf neu erstellt werden, sodass er seitens des Benutzers nicht bearbeitet werden kann.

CSS zum Erstellen eines benutzerdefinierten Titels von Grund auf

Beispiel:

Tipps zum Erstellen eines Titels nach dem Benutzernamen

/*Anzeige eines benutzerdefinierten Titels nach dem Benutzernamen für alle MITARBEITER-Nutzer
Er wird nicht angezeigt, wenn die Site-Einstellung "Benutzernamen in der UX priorisieren" deaktiviert ist */
.username.staff::after {
    content: 'Mitarbeiter';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*Optional - Größe in der Benutzerkarte reduzieren*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Optional - Moderatorschild nur in Beiträgen ausblenden*/
.names .svg-icon-title {
    display:none;
}

/*Anzeige eines benutzerdefinierten Titels nach dem Benutzernamen, um ADMIN-Nutzer von MOD-Nutzern zu unterscheiden
Er wird nicht angezeigt, wenn die Site-Einstellung "Benutzernamen in der UX priorisieren" deaktiviert ist */
.username {
  &.admin:after {
    content: 'Admin-Nutzer' !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: 'Moderator-Nutzer';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*Optional - Moderatorschild nur in Beiträgen ausblenden*/
.names .svg-icon-title {
  display: none;
}

Tipps zum Erstellen eines Titels nach dem Namen

/*Anzeige eines benutzerdefinierten Titels nach dem vollständigen Namen für alle MITARBEITER-Mitglieder*/
span.staff :after {
  content: "Mitarbeiter";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

/*Anzeige eines benutzerdefinierten Titels nach dem vollständigen Namen, um ADMIN-Nutzer von MOD-Nutzern zu unterscheiden */
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;
  }
}

Frage: Kann ich beide benutzerdefinierten Titel hinzufügen?

Ja, das ist möglich, obwohl es redundant ist. Siehe das folgende Beispiel:

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

/*Optional - Größe in der Benutzerkarte reduzieren*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*Optional - Moderatorschild ausblenden*/
.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;
  }
}

Avatar-Flair hinzufügen

Sie können ein Flair unten rechts am Avatar eines Mitarbeiters hinzufügen:

Sie müssen eine benutzerdefinierte Gruppe erstellen, Mitarbeiter als Mitglieder hinzufügen und die Gruppe als primär festlegen. Details finden Sie unter Add group flair on member avatars.

Wenn Sie statt eines Symbols ein benutzerdefiniertes Bild hinzufügen möchten, können Sie es auf Ihrer Website hochladen und die URL wie in der Anleitung Assets in Remote-Themen und -Komponenten einbinden verwenden. Nachdem Sie das Bild im Bereich Uploads des Themas hinzugefügt haben, werden die Variable des Bildes und sein direkter Link angezeigt. Klicken Sie mit der rechten Maustaste auf den direkten Link und kopieren Sie den Link in das Feld “Avatar-Flair-Bild”.

Mitarbeiternamen und Benutzernamen anpassen

Mit etwas CSS können Sie die Benutzernamen von Mitarbeitern in Beiträgen anpassen.

Beachten Sie, dass die unten gezeigten Beispiele sind; jeder kann den Stil nach Belieben ändern!

Farbe des Benutzernamens ändern

Standardmäßig erscheint der Benutzername vor dem vollständigen Namen.

Farbe des Benutzernamens für alle Mitarbeiter ändern

span.username.staff a {
      color: #00A9DB;
}

Farbe des Benutzernamens ändern, um Admins und Mods zu unterscheiden

span.username {
  &.moderator {
    a {
      color: green;
    }
  }

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

Diese Variante verwendet (fast) dasselbe CSS wie für den benutzerdefinierten Titel.

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

Farbe des Namens ändern

Wenn Sie möchten, dass der vollständige Name vor dem Benutzernamen erscheint, aktivieren Sie die Site-Einstellung Namen in Beiträgen anzeigen und deaktivieren Sie Benutzernamen in der UX priorisieren.

Farbe des Namens für alle Mitarbeiter ändern

.names span.staff a {
   color: #00A9DB;
} 

Diese Variante verwendet (fast) dasselbe CSS wie für den benutzerdefinierten Titel.

.names span.staff a {
    color: #00A9DB;
    background-color: #D3F5FF; /*eine helle Farbe verwenden*/
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
}

Farbe des Namens ändern, um Admins und Mods zu unterscheiden

.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

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

Diese Variante verwendet (fast) dasselbe CSS wie für den benutzerdefinierten Titel.

.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;
    }
  }
}

Tipps: Aus irgendeinem Grund möchten Sie vielleicht einen einzelnen Mitarbeiter anpassen – vielleicht den Gründer der Site oder ein besonders geschätztes Mitglied. Hier ist ein Beispiel, wie man einen einzelnen Benutzer anspricht – und ja, dieselbe Methode kann für jeden Benutzer verwendet werden, auch für Nicht-Mitarbeiter-

Benutzername

/*Ersetzen Sie BENUTZERNAME durch den Benutzernamen des Benutzers*/
.topic-meta-data .names span.username a[data-user-card=BENUTZERNAME] {
  color: blue;
}

Name

/*Ersetzen Sie BENUTZERNAME durch den Namen des Benutzers*/
.topic-meta-data .full-name a[data-user-card=BENUTZERNAME] {
  color: blue;
}

Sowohl Name als auch Benutzername

.topic-meta-data .names span a[data-user-card=BENUTZERNAME] {
    color: blue;
}

Hintergrund für Mitarbeiterbeiträge anpassen

Mitarbeiter können manuell eine Mitarbeiterfarbe mit der Taste Mitarbeiterfarbe hinzufügen in Beiträgen hinzufügen.

Das Ergebnis sieht dann so aus:

Hintergrundfarbe für den gesamten Beitrag hinzufügen

Durch Hinzufügen einiger CSS-Zeilen kann die Hintergrundfarbe angewendet werden, wenn die Taste Mitarbeiterfarbe hinzufügen geklickt wird.

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*Farbe hier ändern*/
  }
}

Es ist möglich, diese Funktion zu automatisieren und alle von Mitarbeitern verfassten Beiträge auf verschiedene Weise mit CSS anzupassen. Dazu muss eine primäre benutzerdefinierte Gruppe erstellt werden, wie oben beschrieben (siehe Kapitel Flair). Wenn Ihre Mitarbeiter in einer primären Gruppe sind, können Sie ihre Beiträge mit CSS ansprechen.

Tipps: Sie können alle Mitarbeiter in die Gruppe aufnehmen oder sich entscheiden, nur die Admins oder nur die Mods hinzuzufügen. Sie können auch zwei verschiedene primäre Gruppen für Admins und Mods erstellen (beachten Sie, dass Sie zwei verschiedene Namen verwenden müssen, da “admins” und “moderators” bereits Namen für automatische Gruppen sind) und das CSS so einstellen, dass Admin-Beiträge von denen der Mods unterschieden werden.

Hintergrund von Beiträgen automatisch für alle Mitarbeiter ändern

/*Ersetzen Sie GRUPPEN-NAME durch den Namen Ihrer Gruppe*/
.topic-post.group-GRUPPEN-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*Farbe hier ändern*/
}

oder

.topic-post.group-GRUPPEN-NAME .topic-body { 
    background-color: #ffffd0; /*Farbe hier ändern*/
}

oder sogar

/*Ersetzen Sie GRUPPEN-NAME durch den Namen Ihrer Gruppe*/

.topic-post.group-GRUPPEN-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*Farbe hier ändern*/
}

.topic-post.group-GRUPPEN-NAME .names span { 
    background-color: #ffffd0; /*Farbe hier ändern*/
}

Schriftfarbe und Schriftart für alle Mitarbeiter automatisch ändern

/*Ersetzen Sie GRUPPENAME durch den Namen Ihrer Gruppe*/
.topic-post.group-GRUPPENAME .topic-body .cooked { 
    color: #fec601; /*Schriftfarbe hier ändern*/
    font-family: ......; /* Schriftfamilie hier ändern */
}

Nur Hintergrund von Mitarbeiter-Antworten automatisch ändern, nicht den ersten Beitrag

Jeder Beitrag in einem Thema hat eine ID mit diesem Format: post_number. Für den ersten Beitrag in einem Thema ist die ID post_1, die Antworten haben IDs wie post_2, post_3 usw.

Wenn Sie einem Hintergrund für alle Mitarbeiterbeiträge außer dem ersten hinzufügen möchten:

/*Ersetzen Sie GRUPPEN-NAME durch den Namen Ihrer Gruppe*/
.topic-post.group-GRUPPENNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*Farbe hier ändern*/
}

Zusätzlichen Inhalt in Mitarbeiterbeiträgen hinzufügen

Eine einfache Signatur

.topic-post.group-GRUPPEN-NAME .topic-body .cooked::after {
    content: "Von Ihrem freundlichen Team";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

Eine einfache Logo

.topic-post.group-GRUPPEN-NAME .topic-body .cooked::after {
    background-image: url("BILD-URL");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*diese Werte entsprechend der Bildgröße ändern*/
    width: 138px; /*diesen Wert entsprechend der Bildgröße ändern*/
    height: 36px; /*diesen Wert entsprechend der Bildgröße ändern*/
    display: block;
    float: right;
    content: "";
}

Erwähnungsfarben anpassen

Siehe: Customize mention colors

[one1]

@Discourse

Tipps: Ihre Staff-Benutzer müssen nicht zwangsläufig Site-Admins oder Mods sein, sie können einfach Mitglieder ohne spezielle Berechtigungen sein.

Ich bin verwirrt. Wenn es heißt „Ihre Staff-Benutzer“, bezieht sich der erwähnte Staff auf den Staff der Organisation oder des Geschäfts (z. B. Mitarbeiter), der nichts mit der Verwaltung des Forums zu tun hat? Denn im Kontext von Discourse hat „Staff“ eine sehr spezifische Bedeutung, d. h. Moderatoren und Administratoren.

Wenn das der Fall ist, würde ich empfehlen, es wie folgt zu ändern:

Tipps: Die Mitarbeiterbenutzer Ihrer Organisation müssen keine tatsächlichen Site-Admins oder Mods sein, sie können einfach Mitglieder ohne spezielle Berechtigungen sein.