Category Banner Image Missing on Landing Page After Update

Product Support

AI-generated summary

LilTrashPanda reports that their category banner image and global alert notice are missing after updating Discourse. They share CSS used to style the landing page, noting the image is no longer displayed. Falco explains that using ember-view in CSS selectors can break functionality, as it’s an internal Ember class. LilTrashPanda confirms they fixed the issue but used excessive padding, which now causes the banner image to be cut off when scrolling. They ask if setting the background via CSS is better to ensure full coverage. The discussion highlights issues with outdated CSS selectors and layout problems post-update.

1

Hello!

Just recently updated our Discourse to the latest version and it seems like the large banner image I’d inserted into our “Landing Page” no longer exists (and also that our Global Alert Notice box is pushed up underneath the top header bar).

I’ve figured out how to fix the Global Alert Notice, however I’m unable to get my banner image to return. Here’s the CSS we’re using – did something change that would’ve disabled this CSS?:

.category-deformers #main > .ember-view > .ember-view:nth-child(1) {
    height:500px;
    background-image:url(http://www.deformers.com/_images/forums/header-official.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}

.category-deformers #main > .ember-view > .ember-view:nth-child(1):after{
    //content:'';
    display:block;
    height:10px;
    background-image:url(http://www.deformers.com/_images/slides/bgrd-slide-bot.png);
    background-repeat:repeat-x;
    background-position:left top;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.category-deformers #main-outlet{
    padding-top: 200px;
}

.category-deformers .d-header.clearfix{
    padding-left:0px;
    padding-right:0px;
}

Before Image:

2016-11-30 20_34_34-Latest DEFORMERS topics - Ready At Dawn.png1165×987 711 KB

After Image:

2016-12-19 21_22_56-Latest DEFORMERS topics - Ready At Dawn.png1141×475 201 KB

2

Using ember-view (or any ember internal names) in CSS selectors is a guaranteed way to make it break.

Can you share a link to the forum? That way I can try a fix.

3

It’s not a public forum yet, but I can send you an invite via email so you can check it out. Does that work?

4

Edit: I solved it, but in probably the worst way possible (lots of use of padding…).

Actually, that helped me quite a bit, but now I have a bit of another weird problem…

Since updating the CSS (and having my banner image come back as desired), when I scroll down on the main page, the background image I’ve uploaded through the category settings is cut off, and only the default background color shows instead. Is it better to set the background via CSS so I can make sure it covers the entire screen?

Current CSS:

.category-deformers #main > .ember-view:nth-child(1) {
    height:500px;
    background-image:url(http://www.deformers.com/_images/forums/header-official.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}

.category-deformers #main > .ember-view:nth-child(1):after{
    content:'';
    display:block;
    height:10px;
    background-image:url(http://www.deformers.com/_images/slides/bgrd-slide-bot.png);
    background-repeat:repeat-x;
    background-position:left top;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.category-deformers #main-outlet{
    padding-top: 500px;
}

That last bit is what’s causing the issue, I imagine… but it was the only way I knew how to “drop” the page’s content down load enough so it wouldn’t overlap the banner.

Current Image:

2016-12-20 11_41_50-Latest DEFORMERS topics - Ready At Dawn.png1171×807 399 KB