#main-outlet bg hides custom category background when making a topic a banner


(James Cook) #1

Steps to reproduce:

  1. Set a custom background on a category
  2. Enter a topic in this category and from the topic settings menu make it a banner topic

If you perform the two steps above, the #main-outlet div background goes from being transparent to a block colour which hides the custom category background. Now, this may be a feature, but it looks nasty in my browser.


(Michele) #2

this seems to happen to me too, if I understood the issue correctly.

When I set a custom background images, posts within topics have no table white background, rather it’s just the custom background being displayed, and it’s not the best for clarity purposes.

Other things such as “suggested topics” properly display the background color.

I can provide examples if needed.


(Jens Maier) #3

Yeah, category background images aren’t well supported by the default styles. You’ll probably want to customize them quite a bit.

Here’s my solution:


(Michele) #4

I see.

This means I cannot just use the category background image to upload a category image, and I have to edit custom CSS to only apply the background within a certain category.

Actually – what I did was to just apply the white from the topic you linked, so if a topic has its own background, cool, otherwise it’s standard Discourse.

That’s perfect, thanks again :smiley:

Though I believe it’s something to be fixed eventually?


(Jens Maier) #5

No, that works fine. It’s just that the default styles aren’t prepared for a colorful background so things look off.

But yes, my snippet is taken from my own forum and part of a larger customization. It’s a demo on what can be done, not what must be done. :wink: If you simply remove the html and .d-header blocks as well as the borders, bottom margin and padding on #main-outlet and set a white background, you basically get the same result without the weird body:before thing. :smiley: