[Resolved] change background color and position content area on home page

[Yola]

Hi,

I searched the forum but couldn’t find a suggestion that worked, so I hope you can help.

On the site https://kunstmarktwijchen.nl I would like to be able to choose to change the color of the blue area/background only on the home page. The color for this area I can change in the customizer, obviously, but I’d like to change it for one page only.

I tried to figure out with the Inspector but I don’t see any colors assigned to specific elements so I couldn’t retrieve which element exactly is targeted – so many boxes within boxes. I guess it has to do with the way Global Colors work? (very handy by the way)

I also wanted this block to overlap a bit with the header above, which I managed to do by adding this:

.separate-containers.no-sidebar .site-main {
margin-top: -8em;
}

It works (though I suspect this weird selector is not entirely correct) but this too I’d like to limit to the home page only, and I can’t get it to do that.

Thank you for pointing me in the right direction.

[Fernando]

Hi Yola,

To replace the color of that div solely on the home page, you’ll need custom CSS.

Your code for the margin is correct, it just simply needs another selector to target the home page. To target the home page, just add .home or add the page ID of the home page .page-id-22. Either should work.

Try replacing your code with this:

.home .content-area .inside-article {
    background-color: #660000;
    margin-top: -8em;
}

This should address the color and the margin at the same time.

[Yola]

This did the trick Fernando. Thank you for your lightning fast response, much appreciated.

[Fernando]

You’re welcome Yola!

[Author]

Posts