How do i Style a module to appear in a different color on a particular page

Question

Well I got a module that I'm using with a background-color: "Color1", I'm using it almost on every page on my site, but there is a particular page where I want it to be shown with a background-color: "Color2".

Is there a possible way to do that?

Answer 1

Two ways for this situation -

1. Go to the menu where you have to add "Color2" and go to Page Display tab. There you will see an option for Page Class just add the page class and then add css for the module including this page class.
2. You can replicate the module and only assign it to the menu where you want it. Now go to the module, open Advanced tab and add Module Class Suffix this will add a css class in you module.

Answer 2

1. Add page class suffix in the menu which leads to that particular page.
   You do this in menu's Page Display tab in field Page class, let's call it mypage.
   This way you will get body.mypage CSS selector.
2. Then add module class sufix in your module of choice. Depending of module's type, it is usally in Advanced tab in Module Class Suffix field, let's call it mymodule
   This way you will get .mymodule CSS selector.

3. Then you add following CSS rule in template.css or some other CSS file of your template:

   body.mypage .mymodule {
   background-color: #FF0000;
   }

   And adjust it the way you like.

Answer 3

Thanks a lot guys for your answers, actually since i'm using a WYSIWYG module i just added a section and called the same class that defines the forst color and changed it with a different just in that page.