# Announcement Bar

**URL:** https://meta.discourse.org/t/announcement-bar/286352
**Category:** Theme component
**Created:** [November 22, 2023, 5:50pm UTC](https://meta.discourse.org/t/announcement-bar/286352 "2023-11-22T17:50:08Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [November 22, 2023, 5:50pm UTC](https://meta.discourse.org/t/announcement-bar/286352/1 "2023-11-22T17:50:09Z")

</div>

![Screenshot from 2023-11-22 15-00-50](https://global.discourse-cdn.com/meta/original/4X/f/6/d/f6d4c64d1887c0f212246005dfdc4345a4e668c1.png)

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Display a dismissable announcement bar |
| 👓 | **Preview** | [https://discourse.theme-creator.io](https://discourse.theme-creator.io/theme/nolo/announcement-bar) |
| 🛠 | **Repository** | [https://github.com/nolosb/discourse-announcement-bar](https://github.com/nolosb/discourse-announcement-bar) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

## Settings

There’s a few settings for adjusting link behavior and component placement.

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/5/e/95ef6ce09d7f8255826379c83e33ed7ea9ee860e.png)

* * *

## Locales

Text and button label are localized strings. If you update the announcement text, the bar will show again for users that have previously dismissed it.

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/b/4/8b42b6b945f0ed132d8580c914de1976dcd5d0bc.png)

If you have AI translations enabled, you can let it translate the strings to more languages.

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/1/d71d0e6532ea6bfc5cc72ddb5f928f0aba9686ca.png)

* * *

## Styles

For CSS styling the component structure is:

```plaintext
.announcement-bar {
  &__wrapper { }

  &__container { }

  &__content { }

  &__text { }

  &__button { }

  &__close { }
}

```

---

<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: [November 22, 2023, 5:52pm UTC](https://meta.discourse.org/t/announcement-bar/286352/2 "2023-11-22T17:52:07Z")

</div>

Nice work as always @manuel 👏 🙂

---

<div class="post-metadata">

### Author: ![kinetiksoft](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kinetiksoft/32/229578_2.png) [@kinetiksoft](https://meta.discourse.org/u/kinetiksoft)
#### Post date: [November 22, 2023, 7:27pm UTC](https://meta.discourse.org/t/announcement-bar/286352/3 "2023-11-22T19:27:55Z")

</div>

Awesome component idea!

Would it be possible to add settings which would limit groups of users to which the announcement should be visible?

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [November 27, 2023, 11:36am UTC](https://meta.discourse.org/t/announcement-bar/286352/4 "2023-11-27T11:36:27Z")

</div>

Thanks for the suggestion @kinetiksoft! I like to keep shared components _without_ group features though 😄 . The reason is that in my experience the actual use cases are often more specific than just selecting a group. You might need to distinguish anonymous visitors as well. Or display different content to different groups. And then it adds complexity already.

I usually fork components or just implement different layout options with CSS. So I’m afraid this would be my recommendation as well.

With respect to targeting groups with CSS, the [Discourse groups css classes in body](https://meta.discourse.org/t/discourse-groups-css-classes-in-body/180194) is a great helper component.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 6, 2023, 11:26am UTC](https://meta.discourse.org/t/announcement-bar/286352/5 "2023-12-06T11:26:29Z")

</div>

2 posts were split to a new topic: [Install theme button not working under Ember 5](https://meta.discourse.org/t/install-theme-button-not-working-under-ember-5/287711)

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [December 8, 2023, 12:54am UTC](https://meta.discourse.org/t/announcement-bar/286352/6 "2023-12-08T00:54:40Z")

</div>

Hi  
After installing and enabling i get the following error:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/3/1/0316f243b7f288cd1f5f5c99ceb6e0cd7e0e54b0.png)

I think the this console error is relevant:

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/0/a/80a16ada970e463fe1f6239fa78c20a79c3084fb.jpeg)

Am i missing something? Thanks

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 8, 2023, 1:29am UTC](https://meta.discourse.org/t/announcement-bar/286352/7 "2023-12-08T01:29:27Z")

</div>

It looks like you are using a Discourse version that doesn’t support `.gjs` format file.

I believe this was introduced in v3.2.0.beta3 (2023, July – specifically a this [commit](https://github.com/discourse/discourse/commit/eb94ec16da7c03d1e9c9421c7ec670ca4b92821c))

Unfortunately, unless someone would make a version without using `.gjs` file, you can either upgrade Discourse or uninstall the component.

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [December 8, 2023, 1:32am UTC](https://meta.discourse.org/t/announcement-bar/286352/8 "2023-12-08T01:32:52Z")

</div>

We’re on 3.1 - so that will make sense.

Hopefully Events will upgrade soon to support 3.2 and we’ll jump ship.

Thanks

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [December 8, 2023, 7:11am UTC](https://meta.discourse.org/t/announcement-bar/286352/9 "2023-12-08T07:11:44Z")

</div>

Sorry for the confusion @martyn_thomas and thanks for explaining the reason @Arkshine! I’ve updated the about file to state ` "minimum_discourse_version": "3.2.0.beta3"`.

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [June 18, 2024, 8:24pm UTC](https://meta.discourse.org/t/announcement-bar/286352/12 "2024-06-18T20:24:35Z")

</div>

Hi,

I could be mistaken, but I believe when someone dismisses the announcement (which should be an option for the admin to remove), it removes it for everyone else separately in desktop view or mobile view.

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [June 18, 2024, 8:25pm UTC](https://meta.discourse.org/t/announcement-bar/286352/13 "2024-06-18T20:25:39Z")

</div>

I only know this because I turned it off and on to test it, and left it running. I haven’t crossed it off, and now it’s disappeared?

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 19, 2024, 12:42am UTC](https://meta.discourse.org/t/announcement-bar/286352/15 "2024-06-19T00:42:18Z")

</div>

I don’t exactly understand what you’re referring to. Could you state again what you did on the admin backend and then what you saw as outcome for users? And for which users?

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [June 19, 2024, 1:58pm UTC](https://meta.discourse.org/t/announcement-bar/286352/17 "2024-06-19T13:58:29Z")

</div>

> [@manuel](#):
>
> I don’t exactly understand what you’re referring to.

I’m referring to this theme component.

I have this on my forum, but it disappears when I haven’t crossed it off as you have an option to show it or not, as an end user.

I’ve disabled and enabled it again to see if it was an issue, but I believe when someone dismisses the theme components it removes it for everyone else. First, I noticed it on my desktop view, then next on mobile view.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [June 19, 2024, 4:00pm UTC](https://meta.discourse.org/t/announcement-bar/286352/18 "2024-06-19T16:00:55Z")

</div>

> [@Aaron\_Walsh](#):
>
> I could be mistaken, but I believe when someone dismisses the announcement

It shouldn’t. Dismissing a global banner or pinned topic should only dismiss it for that logged in user. Not all users.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [June 19, 2024, 4:03pm UTC](https://meta.discourse.org/t/announcement-bar/286352/19 "2024-06-19T16:03:57Z")

</div>

> [@Aaron\_Walsh](#):
>
> I have this on my forum, but it disappears when I haven’t crossed it off as you have an option to show it or not, as an end user.
> 
> I’ve disabled and enabled it again to see if it was an issue

Disabling the component does remove it for all.

Now if you dismissed the current banner and disable and re enabled the component. It will not reappear unless either changed or iirc you might need to clear cookies.

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [June 19, 2024, 4:43pm UTC](https://meta.discourse.org/t/announcement-bar/286352/20 "2024-06-19T16:43:46Z")

</div>

> [@Heliosurge](#):
>
> clear cookies

Hmm… I’ve done this. I’ve also impersonated someone who hasn’t logged in for a while and cannot see the announcement bar.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 19, 2024, 5:28pm UTC](https://meta.discourse.org/t/announcement-bar/286352/21 "2024-06-19T17:28:34Z")

</div>

@Aaron_Walsh what I can reproduce:

- dismiss the announcement bar, either as a user or anonymous visitor
- log out or switch to a different user account on the same browser
- the bar will not show on the same browser

So I assume this is a cache issue. Apparently the way the cookie is implemented is not sensitive to the user account but to the browser history. I copied the cookie code from another component and I’m not very knowledgeable about how cookies work in detail. Happy to change the code if it’s actually possible and someone has the code. Else I’m not that concerned about it. What I see is that it only affects the same browser, and the bar is not dismissed for other users on their respective session.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [June 19, 2024, 5:33pm UTC](https://meta.discourse.org/t/announcement-bar/286352/22 "2024-06-19T17:33:54Z")

</div>

I can confirm. Loaded bar. Dismissed with my admin account.

Logged in an anon browser with different user.

Not logged in Bar shows. Logged in test user bar shows. Disniss bar and log out and back in no bar. Close incognito chrome browser and open new one. Announce bar is back.

So definitely a cookie/browser cache related issue.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [June 19, 2024, 5:34pm UTC](https://meta.discourse.org/t/announcement-bar/286352/23 "2024-06-19T17:34:25Z")

</div>

Impersonate does not clear your browser cookies.

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [June 19, 2024, 5:49pm UTC](https://meta.discourse.org/t/announcement-bar/286352/24 "2024-06-19T17:49:49Z")

</div>

Yes, I know this. I mean, I’ve done a clear cookies matter of fact data with Chrome just to be sure.

Impersonate was just a test to see if they have this showing on their account.

[Next page](https://meta.discourse.org/t/announcement-bar/286352.md?page=2)
