# Discourse Offline Indicator Hack

**URL:** https://meta.discourse.org/t/discourse-offline-indicator-hack/297679
**Category:** Development
**Created:** [March 3, 2024, 9:58am UTC](https://meta.discourse.org/t/discourse-offline-indicator-hack/297679 "2024-03-03T09:58:35Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [March 3, 2024, 9:58am UTC](https://meta.discourse.org/t/discourse-offline-indicator-hack/297679/1 "2024-03-03T09:58:35Z")

</div>

Hello 👋

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://global.discourse-cdn.com/meta/original/4X/a/e/7/ae79b5e45c8163ca2f32ccc7c98fffcd0d42584c.png)

Modified  
 ![Screenshot 2024-03-03 at 10.13.56](https://global.discourse-cdn.com/meta/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 · GitHub](https://github.com/VaperinaDEV/discourse-offline-indicator-hack)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 3, 2024, 11:53am UTC](https://meta.discourse.org/t/discourse-offline-indicator-hack/297679/2 "2024-03-03T11:53:42Z")

</div>

Nice! I love how you combined icons - cool trick! 🙂

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 1, 2024, 11:27am UTC](https://meta.discourse.org/t/discourse-offline-indicator-hack/297679/4 "2024-05-01T11:27:00Z")

</div>

Hello 👋

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](https://meta.discourse.org/t/discourse-easy-svg-icon-and-emoji-in-css/300656) helper. I’ve added the Google Material [Wifi Off](https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Awifi_off%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024) icon. So this way we don’t need to merge two separate icons.

![Screenshot 2024-05-01 at 13.21.06](https://global.discourse-cdn.com/meta/original/4X/c/0/9/c0954acb514c8e117751632b3a0be0fcac2d096f.png)

[https://github.com/VaperinaDEV/discourse-offline-indicator-hack/pull/1](https://github.com/VaperinaDEV/discourse-offline-indicator-hack/pull/1)