Don
1
Hello ![:wave: :wave:](https://emoji.discourse-cdn.com/twitter/wave.png?v=12)
This is a small hack (redesign) to the official offline indicator.
Site Setting: enable offline indicator
I’ve override the offline indicator template to add icons to it. To add the icon, I put the following two icons (wifi and slash) each other.
Default
![Screenshot 2024-03-03 at 10.14.06](https://d11a6trkgmumsb.cloudfront.net/original/4X/a/e/7/ae79b5e45c8163ca2f32ccc7c98fffcd0d42584c.png)
Modified
![Screenshot 2024-03-03 at 10.13.56](https://d11a6trkgmumsb.cloudfront.net/original/4X/c/0/c/c0caffbd06f417009822145aca3840f261346231.png)
Here is the repo (you can use it or use as template if you have other ideas): GitHub - VaperinaDEV/discourse-offline-indicator-hack
9 Likes
Lilly
2
Nice! I love how you combined icons - cool trick! ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12)
5 Likes
Don
4
Hello ![:wave: :wave:](https://emoji.discourse-cdn.com/twitter/wave.png?v=12)
I’ve updated the theme component because now the offline indicator component is a .gjs
so we can’t override it’s template.
I use the Discourse Easy ‘SVG Icon’ and ‘Emoji’ in CSS helper. I’ve added the Google Material Wifi Off icon. So this way we don’t need to merge two separate icons.
![Screenshot 2024-05-01 at 13.21.06](https://d11a6trkgmumsb.cloudfront.net/original/4X/c/0/9/c0954acb514c8e117751632b3a0be0fcac2d096f.png)
6 Likes