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
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 לייקים
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
I’ve just had a go with this; the first JS code snippet needed to be updated a wee bit.
This now needs to go in the JS tab of a Theme Component (or Theme) instead:
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");
});
});
I didn’t look at using an image instead sorry.
2 לייקים
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
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 לייקים