# 每个类别的横幅类型内容

**URL:** <https://meta.discourse.org/t/banner-type-content-for-each-category/75524>\
**Category:** Support\
**Created:** [2017年十二月6日 13:58 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524 "2017-12-06T13:58:53Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)\
**Post date:** [2017年十二月6日 13:58 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/1 "2017-12-06T13:58:53Z")

</div>

Can anyone suggest how the Unbounce community is doing this:

 ![Capto_Capture 2017-11-30_11-22-49_](https://global.discourse-cdn.com/meta/original/3X/1/a/1aaef5ce7370316d1ca86d9a8591bb5e4b9b9812.png)

You can see the live page here:

> **[Documentation](https://documentation.unbounce.com/hc/en-us)**

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2017年十二月6日 17:57 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/2 "2017-12-06T17:57:35Z")

</div>

It’s a simple but very clever workaround

They have added a link at the end of the [About category topic](https://community.unbounce.com/t/about-the-landing-page-feedback-category/3305)

Then they simply customized that link with CSS:

```
.category-heading a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 1px;
    border: solid 3px #F6921E;
    font-family: Whitney SSm A,Whitney SSm B,Helvetica Neue,Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 20px;
    margin-right: 10px;
    font-size: 12px;
    color: #fff;
    background-color: #F6921E;
    z-index: -1;
    box-shadow: 0px 3px 0px #d87809;
}

```

---

<div class="post-metadata">

**Author:** ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)\
**Post date:** [2017年十二月6日 18:32 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/3 "2017-12-06T18:32:27Z")

</div>

That’s the CSS to make the link look like a button. I get that. But I still don’t understand how they got that whole section to appear above the navigation. Is there a built-in option for that? It also doesn’t account for the presence of the image.

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2017年十二月6日 18:37 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/4 "2017-12-06T18:37:40Z")

</div>

It looks to be a Banner that they’ve used CSS to either offset or otherwise not display the “dismiss x”

---

<div class="post-metadata">

**Author:** ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)\
**Post date:** [2017年十二月6日 18:38 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/5 "2017-12-06T18:38:38Z")

</div>

It’s different in every category, though. Is that a thing?

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2017年十二月6日 18:45 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/7 "2017-12-06T18:45:44Z")

</div>

> [@alehandrof](#):
>
> It’s different in every category, though. Is that a thing?

That is a mystery. AFAIK, there can be only one Banner.

Because they’re different. I think they’ve found a way to display Pinned topics as though they were Banners. Or wrote some code to allow more than one Banner.

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2017年十二月6日 18:47 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/8 "2017-12-06T18:47:24Z")

</div>

You can use jQuery (or Handlebars for the brave) to create, position and style elements, on the fly, in specific pages.

Discourse adds classes to the `<body>` tag that match the category you’re on.

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2017年十二月6日 18:53 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/9 "2017-12-06T18:53:08Z")

</div>

So you think maybe they’re iframes containing the first posts?

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2017年十二月6日 19:14 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/10 "2017-12-06T19:14:52Z")

</div>

The example website does not seem to be using iframes,

I’m not extremely knowledgeable with the native Discourse element tree, but it looks like they have added a `<section>` that contains an `<img>` a `<p>` and an `<a>` with composer parameters to that match. In other words, plain html added to the native `.list-controls` div

@dax shared the CSS they use for the `<section>` tag above

 ![Image showing element tree for example website](https://global.discourse-cdn.com/meta/original/3X/6/4/64f8e82b987cb76ced6ae8868124529106cc9f96.PNG)

Edit: 😁 Well I was way off on this one.

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2017年十二月6日 19:47 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/11 "2017-12-06T19:47:47Z")

</div>

> [@alehandrof](#):
>
> That’s the CSS to make the link look like a button. I get that. But I still don’t understand how they got that whole section to appear above the navigation. Is there a built-in option for that? It also doesn’t account for the presence of the image.

Sorry @alehandrof , I’m a bit confused now… I was sure you were referring to the button inside the banner, not the banner itself…

This is a category on my forum:

 ![Schermata del 2017-12-06 20-42-10](https://global.discourse-cdn.com/meta/original/3X/1/a/1a82c9f77e7e513d7163de55f53d0d8745117030.jpg)

As you can see I have the category description above the navigation. I do not remember having customized anything here, so the “banner” is created (or created) directly from Discourse.  
I’ll take a look at my settings in the meantime.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)\
**Post date:** [2017年十二月6日 20:23 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/12 "2017-12-06T20:23:12Z")

</div>

Right, @dax. The example of the category description from your forum is what I’d like to achieve.

There are three pieces and I’m only missing one:

- ✅ Use CSS to style the link to look like a button

- ✅ Use the category logo setting to display an image to the left of the description

- ❓ Add a description… how?

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2017年十二月6日 20:39 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/13 "2017-12-06T20:39:50Z")

</div>

> [@alehandrof](#):
>
> Add a description… how?

The description is the text you write inside the About category topic (the pinned topic automagically created when you create a new category):

 ![categ-descr](https://global.discourse-cdn.com/meta/original/3X/d/c/dcca72d0dbefbac3a8267db16ba62f9a404261ad.png)

With button:

 ![Schermata da 2017-12-06 21-50-41](https://global.discourse-cdn.com/meta/original/3X/a/f/afbcd882c3d73ec6791704256d923ba276311602.png)

PS the description doesn’t appear immediately inside the banner, you need at least refresh the page, and sometimes wait a minute or two.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)\
**Post date:** [2017年十二月6日 21:01 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/14 "2017-12-06T21:01:46Z")

</div>

![excited-baby](https://global.discourse-cdn.com/meta/original/3X/c/c/cc54fd922e7fbb2d7488fa3d79d33196bb997633.gif)

> [@dax](#):
>
> PS the description doesn’t appear immediately inside the banner, you need at least refresh the page, and sometimes wait a minute or two.

D’oh! This is the bit that had me confused. Thank you for sticking with me and explaining it.

This is _awesome_. You can’t believe how happy this feature has made me!

Edit: what’s a way to select your reply as the correct response here? Is that a category setting?

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2017年十二月6日 21:16 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/15 "2017-12-06T21:16:24Z")

</div>

> [@alehandrof](#):
>
> Edit: what’s a way to select your reply as the correct response here? Is that a category setting?

Yes is a category setting, you as owner of this topic, can select a reply as solution clicking on the solution icon ✅ ,near the Reply button.

---

<div class="post-metadata">

**Author:** ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)\
**Post date:** [2017年十二月6日 21:31 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/16 "2017-12-06T21:31:15Z")

</div>

A few notes notes for posterity, because I couldn’t find this “category banner” documented anywhere.

1. When editing the description you can use the “Rebuild HTML” option to quickly update the category’s banner.
2. The banner only uses the first paragraph of the description, ignoring headings, etc. You can use inline formatting (such as bold, italic) and even `<small>`
3. The banner ignores emojis 😱 😞

---

<div class="post-metadata">

**Author:** ![laurent.c](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/laurent.c/32/199059_2.png) [@laurent.c](https://meta.discourse.org/u/laurent.c)\
**Post date:** [2020年十一月16日 09:52 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/17 "2020-11-16T09:52:54Z")

</div>

我试过了，但无法正常工作：[Ateliers - Koweb Kafé](https://kafe.koweb.fr/c/evenements/16)  
“关于”主题的内容缺失了。知道是什么原因吗？

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2024年六月8日 12:36 UTC](https://meta.discourse.org/t/banner-type-content-for-each-category/75524/18 "2024-06-08T12:36:58Z")

</div>

此主题在 2375 天后自动关闭。不再允许回复。