Change widget color one one page

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.


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:

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

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.


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.