スタッフ通知のアイコンを変更することは可能ですか？

開発
1

Is it possible to change the icon used on Staff Notices, either through css or a setting that I just haven’t found? Preferably we’d like to swap it out for a custom picture rather than a FA icon.

「いいね！」 1
2

We do not have a setting for that and I think doing it in CSS only is difficult, but you can create a theme component to replace it.

In CSS, you will hide the old icon:

.post-notice {
  .d-icon-user-shield {
    display: none;
  }
}

In JavaScript (you put this in <head> of the theme component), you will decorate the notice and add the new icon:

<script type="text/discourse-plugin" version="0.8">
  const { iconNode } = require("discourse-common/lib/icon-library");
  api.decorateWidget('post-notice:before', helper => {
    return iconNode('heart');
  });
</script>

image
image920×610 46.5 KB

… or if you want to replace with an image…:

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('post-notice:before', helper => {
    return helper.h('img', {
      src: 'https://www.discourse.org/a/img/home-spot-1.png',
      style: 'margin-right: 0.65em',
      height: 30,
      width: 30
    });
  });
</script>

Screenshot 2021-06-29 at 10.35.10
Screenshot 2021-06-29 at 10.35.101008×606 52.3 KB

With themes and theme components, the sky is the limit. If you want to learn more, we have a resource for that:

「いいね！」 12
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

5

これを試してみたのですが、最初のJSコードスニペットは少し更新する必要がありました。

これは、テーマコンポーネント（またはテーマ）のJSタブに配置する必要があります。

import { apiInitializer } from "discourse/lib/api";
import { iconNode } from "discourse-common/lib/icon-library";

export default apiInitializer("0.11.1", (api) => {
  api.decorateWidget("post-notice:before", () => {
    return iconNode("heart");
  });
});

画像を使用する方法については、すみませんが確認しませんでした。

「いいね！」 3
6

テーマに追加した後、Upcoming post stream changes - How to prepare themes and plugins のせいで警告が表示されたため、すぐに別のアップデートが必要になるのではないかと心配しています。

これがスタッフノートにのみ影響するのか、それとも新しいユーザーや復帰ユーザーのノートにも影響するのか（これらはすべて投稿通知であるため）知りたくて試してみました。
すべての投稿通知に影響しますが、上記の CSS はシールドを非表示にするだけです。そのため、新しいユーザーや復帰ユーザーの通知には 2 つのアイコンが表示されることになります。

Screenshot_20250829_120059_Firefox
Screenshot_20250829_120059_Firefox1254×1124 110 KB

「いいね！」 1
7

それでは、すべてが少し不十分ですね!!

それを投稿するのに急いでいたので、api.decorateWidget を削除し忘れていたことに気づきませんでした。サイトのエラーを気づかずに却下してしまったようです。

CSS はもっとうまくターゲットできると思いますが、Quote Callouts を見つけたばかりです。これは、いずれにしても私のユースケースに適していると思います。

「いいね！」 3