# New "Banner Topic" pin type

**URL:** https://meta.discourse.org/t/new-banner-topic-pin-type/16458
**Category:** Feature
**Tags:** rfc, spec
**Created:** [June 11, 2014, 10:33pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458 "2014-06-11T22:33:43Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 11, 2014, 10:33pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/1 "2014-06-11T22:33:44Z")

</div>

One thing we’ve noticed is Discourse sites putting welcome banners up, like this:

 ![](https://global.discourse-cdn.com/meta/original/3X/1/7/1761a0b3443a2592ea05c8cf86cb07b85f10b7d9.png) 

Technically this site welcome function is covered by the pinned welcome topic

![](https://global.discourse-cdn.com/meta/original/3X/b/f/bf9b6a5070e470e1b5d66aa4ec84e00642890aa4.png)

But clearly we need something a bit more.. obvious.. for new users, as this is a recurring user-created design element on multiple Discourse sites. We also noted [in a random usability test](http://peek.usertesting.com/result/613760977075?autoplay=true) that a new arriving user indeed never found or read the pinned topic, at all. ⚠

We proposing adding a new type of topic “pin” called **banner** , like so:

 ![](https://global.discourse-cdn.com/meta/original/3X/9/7/97c3fd6b3a6f78e193811d3de5270cd5cd287361.png)

 ![](https://global.discourse-cdn.com/meta/original/3X/c/9/c9e8656434186338cb1785ff3100c562cdbaae85.png)

This does the following

- in general this is similar to “pinned topic” but even more prominent. There can only ever be one banner topic at any given time. If you make one topic a banner, the previous banner is un-bannered automatically.

- when a topic is bannered, we insert the standard “this topic is now a banner..” staff message in the stream. (and when removed) very similar to the way pinned topics behave.

- the current banner topic inserts the latest revision of the first post content into a dismissable banner at the top of _all_ pages, with some exceptions (user pages? 404 page? but definitely topics and topic lists)

- anonymous users can dismiss the banner by clicking the traditional big ❎ in the right hand corner. This will be saved in local storage.

- logged in users can dismiss the banner in the same way, except their preference is stored permanently in their user profile.

- the banner key should be unique so dismissing the _current_ banner does not necessarily dismiss a _future_ banner. This should be held by topic id – edits to the topic first post will not make the banner re-appear.

- we provide a “read more” link at the bottom of the banner topic that drives users to the banner topic if they want to discuss it further.

You can see the key elements here in an example from [superuser.com](http://superuser.com) as an anonymous user:

 ![](https://global.discourse-cdn.com/meta/original/3X/8/6/8630ce2f504150840265b786144b56a39a4b82d1.png) 

- banner content (from first post)
- dismiss button at upper right
- “read more” button at bottom left

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [June 11, 2014, 10:41pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/2 "2014-06-11T22:41:58Z")

</div>

Should styling be a part of the spec?

Will the sexy banner styling come out of the box? Where would that be overridden?

Do images get automatically sucked out of the topic?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 11, 2014, 10:44pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/3 "2014-06-11T22:44:18Z")

</div>

Styling beyond what we support in a post will have to be supported later.

Ideally an admin could edit the raw HTML of a post if needed, though that should be a rare need.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [June 11, 2014, 11:02pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/4 "2014-06-11T23:02:15Z")

</div>

Just a thought for v2 then:

Taking direct inspiration from what you’ve shown from SmartThings: Have out-of-the-box styling along those lines, with these site settings:

- banner\_background\_image  
(big banner image)
- banner\_background\_color  
(gradient over image to make text readable)
- banner\_foreground\_color

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 11, 2014, 11:11pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/5 "2014-06-11T23:11:30Z")

</div>

If the structure is good we can just use standard CSS to style it.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 11, 2014, 11:16pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/6 "2014-06-11T23:16:49Z")

</div>

We could take any image in the post and justify it right, that seems to be a common pattern and simple enough.

---

<div class="post-metadata">

### Author: ![lightyear](https://avatars.discourse-cdn.com/v4/letter/l/848f3c/32.png) [@lightyear](https://meta.discourse.org/u/lightyear)
#### Post date: [June 12, 2014, 6:34am UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/7 "2014-06-12T06:34:14Z")

</div>

Interesting. We were thinking of building such a thing on a category basis (because it would be different per category) using the new custom\_fields as a plugin. But I’d also love to see a general banner-topic in core. I might get around working on it over the weekend. Unless anyone else picks it up before.

How do we want to deal with responsiveness of the banner-topic though? Should it always be 100% width and do we want to add support for responsive images or something?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 12, 2014, 7:31am UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/8 "2014-06-12T07:31:08Z")

</div>

If you are still interested in the IP information lookup panel, I’d prefer that working first – @zogstrip has this feature on his plate since it is on our list for V1.0.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [June 18, 2014, 6:13pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/9 "2014-06-18T18:13:32Z")

</div>

It’s now in 🎉

[https://github.com/discourse/discourse/commit/00117c18c3c7838d89be8e0cf18da1bb2f01bd17](https://github.com/discourse/discourse/commit/00117c18c3c7838d89be8e0cf18da1bb2f01bd17)

---

<div class="post-metadata">

### Author: ![lightyear](https://avatars.discourse-cdn.com/v4/letter/l/848f3c/32.png) [@lightyear](https://meta.discourse.org/u/lightyear)
#### Post date: [June 18, 2014, 6:51pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/10 "2014-06-18T18:51:04Z")

</div>

Oh, you are using a new archetype for this. Interesting approach! Which also means … I can hack this to support category-based-banners 😃 .

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [June 18, 2014, 7:18pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/11 "2014-06-18T19:18:49Z")

</div>

> [@lightyear](#):
>
> Oh, you are using a new archetype for this.

Figured we might need a different UI to handle these topics.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 18, 2014, 11:31pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/12 "2014-06-18T23:31:45Z")

</div>

OK this is now deployed!

 ![](https://global.discourse-cdn.com/meta/original/3X/5/b/5bae91339395ac005041816b2782bc3e27b6acaf.png) 

Use the admin wrench on a topic to make a topic a banner topic.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [June 19, 2014, 12:04am UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/13 "2014-06-19T00:04:03Z")

</div>

We put this up on [https://talk.openmrs.org/](https://talk.openmrs.org/) earlier when it came out, but what’s the best way to do that colored background and rounded corners? CSS customization in the admin settings?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 19, 2014, 12:23am UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/14 "2014-06-19T00:23:02Z")

</div>

Get latest code is the easiest way.. it has default styling now.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [June 19, 2014, 12:44am UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/15 "2014-06-19T00:44:24Z")

</div>

Cool, much nicer now.

---

<div class="post-metadata">

### Author: ![ampburner](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ampburner/32/5103_2.png) [@ampburner](https://meta.discourse.org/u/ampburner)
#### Post date: [June 19, 2014, 8:26am UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/16 "2014-06-19T08:26:27Z")

</div>

@codinghorror does this also include images in the topic? Do they automatically get added to the banner?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [June 19, 2014, 6:34pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/17 "2014-06-19T18:34:22Z")

</div>

@ampburner yes you can use images, they will appear.

One thing I missed @zogstrip, right now the banner _only_ shows up at the top of the page. We also need to overlay the banner in the case that users deep link to a post inside a topic, like so:

 ![](https://global.discourse-cdn.com/meta/original/3X/4/5/4520c42a8b3d51df2772c6d9b4899c31d53b832a.png)

Because when you arrive through a deep link URL, that’s when you need a “what the hell is this place” introduction the most!

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [June 20, 2014, 5:09pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/18 "2014-06-20T17:09:40Z")

</div>

This is now implemented 🐬

[https://github.com/discourse/discourse/commit/4878d88cbd9f31d059242028a583e44aa1075534](https://github.com/discourse/discourse/commit/4878d88cbd9f31d059242028a583e44aa1075534)

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [June 20, 2014, 6:19pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/19 "2014-06-20T18:19:51Z")

</div>

This looks pretty good, but was the intention to have a margin above [like this](https://talk.openmrs.org/t/welcome-please-introduce-yourself/32/6)? 🎣🐬

![](https://global.discourse-cdn.com/meta/original/3X/1/6/16fc4d48c806325f684ff4d84fe1d94a53952b6a.png)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [June 20, 2014, 8:52pm UTC](https://meta.discourse.org/t/new-banner-topic-pin-type/16458/20 "2014-06-20T20:52:29Z")

</div>

Nope. That’s due to your custom header.

[Next page](https://meta.discourse.org/t/new-banner-topic-pin-type/16458.md?page=2)
