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 like
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>
… 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>
With themes and theme components, the sky is the limit. If you want to learn more, we have a resource for that:
12 likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Ik heb dit net geprobeerd; het eerste JS-codegedeelte moest een beetje worden bijgewerkt.
Dit moet nu in het JS-tabblad van een Theme Component (of Theme) worden geplaatst in plaats van:
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");
});
});
Ik heb niet gekeken hoe ik in plaats daarvan een afbeelding kan gebruiken, sorry.
3 likes
After adding it to my theme, I saw a warning because of Upcoming post stream changes - How to prepare themes and plugins. So I’m worried that another update will be needed soon.
I tried this because I was curious whether it only affects staff notes or also new and returning user notes, as those are all post notices.
It affects all post notices, while the CSS above only hides the shield. So you end up with two icons on the new and returning user notices.
1 like
That is all a bit unsatisfactory then!!
In my rush to post that, I missed that I hadn’t removed the api.decorateWidget. I must have dismissed the error on my site without realising it.
I’m sure that CSS could be targeted better, but I’ve just discovered Quote Callouts - this will do my use case better anyway I think.
3 likes