Can anyone suggest how the Unbounce community is doing this:
You can see the live page here:
4 Likes
It’s a simple but very clever workaround
They have added a link at the end of the About category topic
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;
}
8 Likes
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.
It looks to be a Banner that they’ve used CSS to either offset or otherwise not display the “dismiss x”
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.
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.
So you think maybe they’re iframes containing the first posts?
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
Edit: 
Well I was way off on this one.
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:
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.
4 Likes
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?
The description is the text you write inside the About category topic (the pinned topic automagically created when you create a new category):
With button:
PS the description doesn’t appear immediately inside the banner, you need at least refresh the page, and sometimes wait a minute or two.
4 Likes
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?
3 Likes
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.
2 Likes
A few notes notes for posterity, because I couldn’t find this “category banner” documented anywhere.
- When editing the description you can use the “Rebuild HTML” option to quickly update the category’s banner.
- 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> - The banner ignores emojis
5 Likes
I tried but it doesn’t work : Événements - Koweb Kafé
The content of the about topic is missing. Any idea why ?