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

Development

AI-generated summary

Applying CSS Code Only to the Discourse Home Page

The discussion revolves around applying CSS code to customize the appearance of the Discourse home page, specifically with the Versatil Banner plugin. danielabc is facing an issue where the background color applied to the banner appears on all pages, not just the home page.

danielabc has tried applying CSS code using .custom-homepage and .custom-homepage .banner-box selectors, but it doesn’t work. twofoursixeight suggests a resource from meta.discourse.org that might help.

Lilly points out that danielabc might be using the Welcome Link Banner instead of the Versatil Banner, which is confirmed by danielabc. Lilly suggests that the issue might be due to mixed-up components or translation errors.

The problem remains unsolved, and further clarification on the correct usage of the Versatil Banner plugin and CSS selectors is needed to resolve the issue.

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?

2

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

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

4

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

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.