Given the surprising level of difficulty, maybe we should just leave this be… not like it is broken the way it is.
「いいね！」 1
遅い時間ですが、管理者の王冠アイコン（現時点ではトピックページのみ）を CSS と JS を使って表示する私の解決策を共有したいと思い、投稿しました。何かしらの理由で私の JS コードが動作していないため、お手伝いいただければ幸いです。インラインのテーマ用 JS ファイルにはコードが表示されているのに動作しません（JSFiddle では正常に動作します）。
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（ホバー時にタイトルを表示するためのものですが、先述の通り 内に含めると動作しません）
動作する Jsfiddle デモ
var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");
「いいね！」 2
モデレーターの1人から同じフィードバックがありました。過去2年間で、管理者/モデレーターのアイコンを区別する進捗/アイデアはありますか？
「いいね！」 1
このトピックではどこにも見かけませんでしたが、フォーラムで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;
}
}
「いいね！」 6
シールドの色変更が機能しませんでした。どちらも同じ灰色に見えました。これが投稿されてからセレクターは変更されましたか？
可能性はあります。ページの簡単な検査でクラスを特定できます。
「いいね！」 2
アイコンの名前が d-icon-shield-halved になりました。
「いいね！」 5
はい、アイコン名が変更されたため、このようになります。
span.username {
&.moderator .d-icon.d-icon-shield-halved {
color: #d5b907;
}
&.admin .d-icon.d-icon-shield-halved {
color: #969696;
}
}
結果
「いいね！」 4
リリー、ありがとう！それと…ココ・クォーク、どう綴るんだっけ。
「いいね！」 1
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)
faは次のとおりです。
fa-solid fa-hat-wizard
では、管理者のアイコンをhat-wizardに変更したい場合、CSSはどうなりますか？
「いいね！」 1
同じCSSです。
この置換方法を使用する場合、どのアイコンに置き換えてもクラスは d-icon-shield-halved のままになります。
「いいね！」 2
\n\nこれを最も簡単に行う方法は、上記と同じコードを使用し、ヘッドタグタブにアイコン置換コードを次のように追加することです。\n\n\n
\n\n\n
js\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
「いいね！」 5
管理者が帽子をかぶり、モデレーターが盾をかぶるように機能しますか？それとも、写真のようにすべて置き換わってしまいますか？もしそうなら、回避策はありますか？
「いいね！」 2
条件付きCSSをハックしたり、スクリプトにコードを追加したりできるかもしれませんが、それはすべてのアイコンを置き換えることになります。
「いいね！」 1
実は、ウィザードのアイコンも現在機能していません。あなたが教えてくれたコードをそのままヘッダーに使用しました。
もう一度試してみます。一時的な不具合だったのかもしれません。
これはOTの質問ですが、モデレーターにはハーフシールドを維持したいです。しかし、管理者はウィザードハットを表示したいです。[1]
しかし、モデレーターがいるため、ハーフシールドをハットに置き換えることはできません。
ああ、神様…
本当にトピックを読み始めるべきでした🤦♂️ すみません。
私のフォーラムにはポッターファンの中年女性が数人いて、彼女たちはとてもイライラするでしょう
↩︎
「いいね！」 2
私のフォーラムでは、トピックではなく、ユーザーカードとプロフィールにのみ表示されます。
また何か間違えたのでしょうか？
「いいね！」 1
修正されたコード用のShield svg。