Unterscheiden Sie Admin- und Moderator-Schildsymbole

[codinghorror (Jeff Atwood)]

Given the surprising level of difficulty, maybe we should just leave this be… not like it is broken the way it is.

[cosdesign (Cos)]

I know it’s late but I just want to share my solution to display that admin crown ( so far only on topic’s page ) by using CSS and JS. I could also use some help cause for some reason my js code is not working…I can see it in that inline theme js file but still not working ( works well on jsfiddle though )

CSS

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

}

JS ( to display the title on hover - but as I said is not working when I include it inside )
Working Jsfiddle demo

var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");

[dandv (Dan Dascalescu)]

Got the same feedback from one of our moderators. Any progress/ideas on differentiating the admin/moderator icons in the past 2 years?

[Lilly]

habe es nirgends in diesem Thema gesehen, aber ich benutze CSS in meinem Forum, um verschiedene farbige Schilde für Mods und Admins für Beiträge zu erstellen (wenn Admins Mitglieder von Moderatorengruppen sind). In meinem Fall erhalten Mods goldene Schilde und Admins graue. Aber man kann natürlich jede Farbe in diesen Farbeigenschaften verwenden.

gemeinsames CSS

// * Schildfarbe in Beiträgen ändern, die Admin- und Mod-Benutzer unterscheiden* //

span.username {
  &.moderator .d-icon.d-icon-shield-alt {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-alt {
    color: #969696;
  }
}

Ich habe mich nicht darum gekümmert, es für Benutzerkarten oder Profile zu tun, aber ich schätze, ich könnte es herausfinden.

Sie können auch die Farbe der Benutzernamen von Moderatoren und Administratoren in Beiträgen ändern, um sie weiter zu unterscheiden:

// * Farbe der Benutzernamen ändern, die Admins und Mods unterscheiden* //

span.username {
  &.moderator a {
    color: #d5b907;
  }
  &.admin a {
    color: #969696;
  }
}

[Turtle]

Die Farbänderung des Schilds hat nicht funktioniert – es sah für beides immer noch gleich grau aus. Hat sich der Selektor seit der Veröffentlichung geändert?

[NateDhaliwal]

Möglicherweise. Eine schnelle Inspektion der Seite kann Ihnen helfen, die Klasse zu bestimmen.

[Canapin (Coin-coin le Canapin)]

Das Icon heißt jetzt d-icon-shield-halved.

[Lilly]

Ja, der Icon-Name hat sich geändert, daher sollte es so sein

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

Ergebnis

[Turtle]

Danke Lilly! Und… CocoQuark, wie auch immer man das schreibt.

[Heliosurge (Dan DeMontmorency)]

[Zitat=“Lilly, Beitrag:35, Thema:106114, vollständig:true”]
yea Icon-Name geändert, also sollte es so aussehen

span.username {

[Turtle]

Der fa ist:
fa-solid fa-hat-wizard
Wie würde dann die CSS lauten, wenn ich das Admin-Symbol in hat-wizard ändern wollte?

[Canapin (Coin-coin le Canapin)]

@Turtle

Was wäre dann die CSS? Wenn ich das Admin-Symbol in „hat-wizard“ ändern wollte?

Die gleiche CSS.
Die Klasse wird immer noch d-icon-shield-halved sein, unabhängig davon, welches Symbol Sie ersetzt haben, wenn Sie diese Ersatzmethode verwenden:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Lilly]

Der einfachste Weg, dies zu tun, ist wie mit dem gleichen Code wie oben, aber auch Code zum Ersetzen von Symbolen im Kopfzeilen-Tab wie folgt:

in

<script type="text/discourse-plugin" version="0.8"> 
  
  api.replaceIcon('shield-halved', 'hat-wizard')

</script>

Ergebnis:

[Turtle]

Funktioniert es so, dass Administratoren den Hut und Moderatoren das Schild haben können? Oder ersetzt es einfach alle wie auf dem Bild, und wenn ja, gibt es eine Möglichkeit, dies zu umgehen?

[Lilly]

Sie könnten möglicherweise bedingtes CSS hacken oder etwas Code in das Skript dort einfügen. Aber das ist ein Ersatz für alle Symbole.

[Turtle]

Tatsächlich funktioniert nicht einmal das Zauberer-Symbol im Moment. Ich habe den exakten Code in den Kopf verwendet, den Sie mir gegeben haben.
Ich kann es noch einmal versuchen, vielleicht war es ein Glitch oder so etwas.

[Canapin (Coin-coin le Canapin)]

Haben Sie das Zaubererhut-Symbol in der Website-Einstellung SVG icon subset hinzugefügt?

[Jagster (Jakke Lehtonen)]

Dies ist eine OT-Frage, aber ich möchte das Halfshield für Mods beibehalten. Aber ich würde sehr gerne den Zaubererhut für Admins anzeigen ^[1]

Aber ich kann das Halfshield wegen der Moderatoren nicht durch den Hut ersetzen.

Oh Gott…

@Turtle

Wird es funktionieren, damit Admins den Hut und Moderatoren das Schild haben können? Oder ersetzt es einfach alle wie auf dem Bild, und wenn ja, gibt es eine Möglichkeit, dies zu umgehen?

Ich sollte wirklich anfangen, Themen zu lesen Entschuldigung.

---

1. Ich habe ein paar mittelalte Frauen in meinem Forum, und sie sind Potter-Fans; das würde sie so sehr ärgern ↩︎

[Jagster (Jakke Lehtonen)]

[Zitat=“Lilly, Beitrag:31, Thema:106114”]
ich habe mich nicht darum gekümmert, es für Benutzerkarten oder Profile zu machen
[/Zitat]

In meinem Forum wird es nur auf der Benutzerkarte und in Profilen angezeigt, aber nicht in Themen.

Haben Sie eine Idee, was ich schon wieder falsch gemacht habe?

[Heliosurge (Dan DeMontmorency)]

Shield svgfür überarbeiteten Code.

@Lilly

nyea icon name changed so it should be like this

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

result