Category Banners

[Heliosurge (Dan DeMontmorency)]

@thaidb

I use plugin Who Online and Two display components are stuck together, how to keep them a reasonable distance apart

Can fix with some CSS

Create a new #theme-component add this to common css

// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      padding-top: 0.5em
      padding-bottom: 0.5em;
}

You can also add custom background color, borders etc..

[thaidb]

Thank you so much!

[Heliosurge (Dan DeMontmorency)]

Optionally if you want to highlight this like so

Use this code instead

// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      padding-top: 0.45em;
      padding-bottom: 0.05em;
      background-color: var(--secondary);
      border: 2.0px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      margin-top: 0.75em
      margin-bottom: 0.75em;
}

• Margin adjusts space above & below “who’s online”
• padding increases space with in the border box. Border adjusts the thickness of the border outline.

[ludwikc (Ludwik C. Siadlak)]

Slightly off-topic, but what pair of fonts is this @bekircem ? I love how they work together!

[davidkingham]

I have a small feature request that I feel would make a big improvement to this component. I would love to have a “Read more…” link which is linked to the category description. A very elegant solution to have a lengthy description without cluttering up the category’s page. I can add this link manually, but then it shows on the Categories page which isn’t very clean.

[haydenjames]

@Heliosurge

// Who's Online Customization
.discovery-list-container-top-outlet.online_users_widget {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      padding-top: 0.5em
      padding-bottom: 0.5em;
}

This code is missing an ; on line 5 and also the follow-up example.

What worked for me is this:

.discovery-list-container-top-outlet.online_users_widget {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
  display: block !important;
}

Result:

[Heliosurge (Dan DeMontmorency)]

Awesome. Unfortunately my post is too old for me to correct the code. Thanks for letting me know I missed “;”

[pHneutre]

There is the same problem for the tags and category links. Could you please include the .hashtag-cooked class in this fix?

[alltiagocom (Tiago)]

For some reason, this is not working properly for me.
Some categories and sub categories show the banner, some don’t.
It’s not the description (or lack thereof), because some have description and it’s not showing.

I don’t know if the new Discourse update broke something?

[Arkshine]

@alltiagocom

Some categories and sub categories show the banner, some don’t.

Have you defined categories ID in categories setting?

[alltiagocom (Tiago)]

Yes I added them to the Objects Setting Editor.
I think there’s some kind of bug related to the option to hide it when there’s no description.

I will perform a few more tests and see how it goes.

[alltiagocom (Tiago)]

I just noticed a bug.
I’m in the parent category Tiago | Music and I click the Sir Giant sub category. It shows the banner. Then I click one of the sidebar “documentation” links to go to a tags page Announcements. When I click the General Discussion link that takes me back to the root of the sub category Sir Giant, the banner is now gone.

The first time I went to Announcements, no banner. When I go to the tags page Music and then back to Announcements, the banner is now visible.

I also just noticed something: if I’m in the Announcements page and I see no banner, if I click the same link again (Announcements) the banner shows up, which is clearly a bug.

[alltiagocom (Tiago)]

2 more issues:

1 - I’m on a category with a description. I can see the description in the banner. That description has an external link to my online store. When I click it, even though I have the setting to open all external links in a new tab, that link opens in the same tab. And I can confirm that the setting is working, because the topic itself that defines the banner’s description, opens the link in a new tab.

2 - Now when I’m on that external link’s website (which opened in the same tab), I have to hit Back in the browser, to go back to the sub category. This time, the description is completely gone. The banner and its title are there, but no description. Even if I refresh and force refresh the browser, it doesn’t come back. The only way to see it again is to go back to the main category and then to the sub category again.

---

EDIT: Ok I figured something out. I don’t know what’s happening behind the scenes, of course, but the red option is causing the issue. The green option works as expected (always on screen, regardless of where I click, no need to double click a sidebar menu to make the banner come back):

[Arkshine]

I can reproduce your issue, but I can’t explain it.

Technically (ignore me), this is what I observe with this outlet header-list-container-bottom:

• If you select a subcategory → a tag, the component is inserted, and immediately right after teardownComponent is called (?). But the component is not destroyed. With the category-header class removed from <body> from the cleanup function, some CSS hides the banner. You can select another tag to re-insert the component.

  • From the same page, if you click on a documentation link in the sidebar, you get the same behavior.
  • It doesn’t happen if you select a category from the dropdown list for example.

It’s confusing why after being inserted, will-destroy is called right away.

[alltiagocom (Tiago)]

@Arkshine

I can reproduce your issue

Well, at least I know it’s not just me… that’s good.

@Arkshine

(ignore me)

Even if I didn’t want to, I have no idea what you are talking about in your explanation haha But it’s good that you know that something that should be working a certain way, isn’t. That’s probably a step in the right direction to fix it.

So the issue seems to be with the location of the banner, because as I said, one of the options (at least, because I actually didn’t try the other two), works.

[bdfl (Bryan)]

When I select ‘Show category logo’, the logo appears twice - once from the category setting and once from this theme component. Am I making a mistake?

Also, is it possible to make the ‘about’ title and/or description appear below the logo?

[Moin]

@bdfl

the logo appears twice - once from the category setting and once from this theme component. Am I making a mistake?

No, it’s a known bug. There is also css you can add to hide one logo in that topic

Default category heading not hidden when category banner is used

Great theme component for categories! I’m running into an issue when I add a category logo that the category description displays in the default position on the category page as per the screenshot below. Is there a way to turn off the default placeholder of the category description from displaying when the “discourse-category-banners” is enabled? I would like the category description to display in the banner just as it is now. If I turn off the category logo then it displays correctly, seems…

[bdfl (Bryan)]

Thanks, Moin! The CSS fixed the image for me.

[bdfl (Bryan)]

To put the category name below the image, this worked for me:

.category-title-contents,
.category-title-header.category-banner-1slug .category-title-contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;}
.category-logo,
.category-title-header.category-banner-1slug .category-logo {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;}
.category-title,
.category-title-header.category-banner-1slug .category-title {
    width: 100%;
    margin-top: 20px;
    text-align: left;}

[Helga_Razinkova (Helga)]

Hi there! Maybe someone can help me fix quite a weird issue that came up all of a sudden.

All titles in the banners used to be white, but now they changes into black and only in some categories… Is it a known bug, or should I maybe check something on my end?

For ex:

The link to our community, just in case: https://community.elfsight.com/