2

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?

enter image description here

  • 3
    It is generally done through CSS by using page class suffix in menu item and module. But different templates treat class suffixes on diferent ways. Without knowing exactelly which template you are using, it is impossible to give a straight answer. – Mikan Mar 17 '16 at 10:30
4

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.
4
  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.

  • 2
    Welcome to JSE and that is all absolutely correct, that is the way I usually do this. But I have found some templates along the way which doesn't respect page class suffix, meaning they do not apply it to the body selector. Most famous of them is Joomla's native template Protostar, but all JA, RT and GK templates do respect page class. That is why I have asked OP in comment which specific template is in use. – Mikan Mar 18 '16 at 8:44
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.