Differentiate Admin and Moderator Shield Icons

[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)]

モデレーターの1人から同じフィードバックがありました。過去2年間で、管理者/モデレーターのアイコンを区別する進捗/アイデアはありますか？

[Lilly]

このトピックではどこにも見かけませんでしたが、フォーラムでCSSを使用して、投稿のモデレーターや管理者に異なる色のバッジを表示しています（管理者がモデレーターグループのメンバーである場合）。私の場合は、モデレーターは金色のバッジ、管理者は灰色のバッジになります。もちろん、これらの color プロパティには任意の СSS カラーを使用できます。

一般的なCSS

// * 投稿内のバッジの色を変更して、管理者とモデレーターのユーザーを区別する* //

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

ユーザーカードやプロフィールにはまだ実装していませんが、おそらく解決できると思います。

さらに区別するために、投稿内のモデレーターや管理者のユーザー名の色を変更することもできます。

// * ユーザー名の色を変更して、管理者とモデレーターを区別する* //

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

[Turtle]

シールドの色変更が機能しませんでした。どちらも同じ灰色に見えました。これが投稿されてからセレクターは変更されましたか？

[NateDhaliwal]

可能性はあります。ページの簡単な検査でクラスを特定できます。

[Canapin (Coin-coin le Canapin)]

アイコンの名前が d-icon-shield-halved になりました。

[Lilly]

はい、アイコン名が変更されたため、このようになります。

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

結果

[Turtle]

リリー、ありがとう！それと…ココ・クォーク、どう綴るんだっけ。

[Heliosurge (Dan DeMontmorency)]

@Lilly

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

Just wondering if we wanted to swap say the admin icin with the Wizard hat would swap color with display none and then add a line with the .d-icon.d-icon-wizard? (Not sure of the wizard hat fa off hand)

[Turtle]

faは次のとおりです。
fa-solid fa-hat-wizard
では、管理者のアイコンをhat-wizardに変更したい場合、CSSはどうなりますか？

[Canapin (Coin-coin le Canapin)]

@Turtle

では、CSSはどうなりますか？管理者のアイコンをhat-wizardに変更したい場合は？

同じCSSです。
この置換方法を使用する場合、どのアイコンに置き換えてもクラスは d-icon-shield-halved のままになります。

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]

\n\nこれを最も簡単に行う方法は、上記と同じコードを使用し、ヘッドタグタブにアイコン置換コードを次のように追加することです。\n\n\n

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

[Turtle]

管理者が帽子をかぶり、モデレーターが盾をかぶるように機能しますか？それとも、写真のようにすべて置き換わってしまいますか？もしそうなら、回避策はありますか？

[Lilly]

条件付きCSSをハックしたり、スクリプトにコードを追加したりできるかもしれませんが、それはすべてのアイコンを置き換えることになります。

[Turtle]

実は、ウィザードのアイコンも現在機能していません。あなたが教えてくれたコードをそのままヘッダーに使用しました。
もう一度試してみます。一時的な不具合だったのかもしれません。

[Canapin (Coin-coin le Canapin)]

SVG アイコンサブセット サイト設定にウィザードハットのアイコンを追加しましたか？

[Jagster (Jakke Lehtonen)]

これはOTの質問ですが、モデレーターにはハーフシールドを維持したいです。しかし、管理者はウィザードハットを表示したいです。^[1]

しかし、モデレーターがいるため、ハーフシールドをハットに置き換えることはできません。

ああ、神様…

@Turtle

管理者がハットを持ち、モデレーターがシールドを持つように機能しますか？それとも、画像のようにすべて置き換わるだけで、もしそうなら、回避策はありますか？

本当にトピックを読み始めるべきでした🤦‍♂️ すみません。

---

1. 私のフォーラムにはポッターファンの中年女性が数人いて、彼女たちはとてもイライラするでしょう ↩︎

[Jagster (Jakke Lehtonen)]

@Lilly

ユーザーカードやプロフィールについては、あえて行っていません。

私のフォーラムでは、トピックではなく、ユーザーカードとプロフィールにのみ表示されます。

また何か間違えたのでしょうか？

[Heliosurge (Dan DeMontmorency)]

修正されたコード用のShield svg。

@Lilly

アイコン名が変更されたため、このようになります。

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

結果