Discourse Category Banners


(Martincz Gao) #28

Thank u very much. :yum:

  1. Digging up those 2 quotes since I am interested in such feature myself:

Any way to display links in the description?

  1. Is there any way to enable the banner on the home page of the forum as well?


You need a different theme component for that. See Banner themes (and instructions for customizing them)


Pushing this one again :slight_smile:

(Cees) #32

Hey there I installed this component yesterday and I’m playing with it. I absolutely love it, however I ran into an issue. This issue occurs with a customised banner image (through css as suggested)

When navigating from a page with a banner (https://flyingdojo.com/c/accelerator/l/top) to a page with no banner (https://flyingdojo.com/) a small line pops up under the header with the colour from the category and the text really small. This dissapears after one second. It’s as if the component is loading something double.

Hope you can help me out,
Kind regards

Banner themes (and instructions for customizing them)
(Daniela) #33

Wrong theme. You are referring to this one :arrow_right: Discourse Category Banners

EDIT: post moved in the appropriate topic

(Cees) #34

Thank you, looking forward to your answer on my question/issue.

(Daniela) #35

Try to add

.category-title-header {
    background-color: transparent !important;

(Cees) #36

Didn’t help, want to take this to DM?

(Stephen) #37

Better you resolve here so that others who experience the same issue can also find a solution.

(Daniela) #38

The wrong position is something that you change in your CSS, the right code should be

body.category-example {
    .category-title-header {
        background-image: url(your-url);
        background-size: cover;
        background-color:transparent !important;

but the background-color seems to be hardcoded and I can not overwrite it with CSS.
You have to wait for @Johani 's help, because Kris is out this week.

(Cees) #39

If I uncheck the option of adding the description in the component setting the bug dissapears. Anyway to add the description to the banner manually (through css)?

(Kris) #40

No, I don’t think there’s a good way to do this with only CSS. I’ll take a look a closer look at the root issue and see if I can figure out what’s going on.

(Kris) #42

I looked into this a little bit more, and it seems like the class on the body tag was being removed before the banner was, which was causing some brief styling issues. I made an update to avoid that.

You’ll need to update your component and also modify your background image CSS a little bit, but I think this should fix that problem:

Instead of

body.category-example {
    .category-title-header {
        background: url(example.jpg);

You should now use

.category-title-header {
  &.category-example {
        background: url(example.jpg);

(Cees) #43

You made my day! Thank you for looking into this, I’m very grateful.

(Mindaugas Bartusevičius) #44

not working with lastes discourse wersion …

(Mindaugas Bartusevičius) #45

worked … just needed reedit categories description … :dumpling:

(Kameron Bourgeois) #46

@awesomerobot Is there a way to make the category banner also display in posts? Thanks!

(jrgong) #47

I checked out the other banner theme components, but those seem way to overloaded just to make links and basic formatting like bold, italic etc work in the category banner description.

Is there any way we can see a feature where a user can whitelist certain formatting types so that they will appear in the description?

(Jimmy) #48

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.