Change widget color one one page

Hi,
How do I change for example .h-widget to be red on the homepage and green on the blog page and pink on the about page? I know how to change the color, but not how to differentiate for each page.

TIA,
Rena

Hello @fatcatgraphics,

Thanks for asking. :slight_smile:

You need to use Page id feature to change widget color on specific pages. Please add following CSS to make necessary changes:

.home .x-main .h-widget {
    background-color: #ff0000 !important;
}

.blog .x-sidebar .h-widget {
    background-color: green!important;
}

.page-id-752 .h-widget {
    background-color: #ffc0cb;
}  

To find out post id, please take a look at following article:

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Please note that providing support for custom codes (like CSS changes) falls outside the scope of support we can offer. In case of any issues with the layout because of custom codes we won’t be able to provide support.

Thanks.

Ohh Ok Awesome thanks!

You’re welcome, Rena.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.