How to apply CSS code only in the discourse home page?

dev
1

I put color and background on a banner
the banner on other pages (like topics) does not appear
but the background keeps appearing on all pages
how to apply this coming only in the home of the discourse?

1 Like
2

Here - try this, maybe it will help? Add custom content that only appears on your homepage

1 Like
3

I had tried that, but it didn’t work.

I installed the Versatil banner and made the following changes

.banner-box {
    width: 1070px;
    height: 265px;
    background-color: black;
    border-radius: 30px;
}

The black background changes, but it appears on all pages, when I put

.custom-homepage {
 .banner-box {
    width: 1070px;
    height: 265px;
    background-color: black;
    border-radius: 30px;
}
}

or like this

.custom-homepage  .banner-box {
    width: 1070px;
    height: 265px;
    background-color: black;
    border-radius: 30px;

}

Does not work

1 Like
4

edit: i now see that you are not using the Versatile Banner. that looks like the Welcome link banner.

1 Like
5

I’m sorry, I’m using google translate

I put a background with the help of CSS in Banner Versatil, it works perfectly, but the background appears on all pages, how do I make it stay only on the home page?

This is the css modification I made, it works perfect on home page

image
image1432×436 111 KB

but on the other pages the background appears (I wish it didn’t show this background on the other pages)

image
image1432×425 1.99 KB

6

edit: now looking at your screen photos i can tell you are getting your components mixed up or the translator is messing it up. that looks like the Welcome Link Banner not the Versatile Banner.