0

I have set the css of the main content in theme css as,

#main-content { background:#CCC; box-shadow: 0 0 1px #0F4C6A; }

So it gets apply to the every page/node/content whatever I create which is quite common. For some pages I do not want this css to apply to #main-content. Is there any way I can achieve this?

3 Answers 3

2

Option 1 - Pure CSS

For those specific pages you can use the classes found in the body tag to override your generic style like so:

#main-content { ... }

.page-node-123 #main-content {
  your override for this node
}
.node-type-article #main-content {
  your override again
}

Option 2 - CSS with Drupal coding

Use preprocess hooks like hook_node_view or template_preprocess_page or hook_preprocess_html in the template.php file in your theme and add additional classes based on your specific requirements/conditions

Then use CSS to target those classes or IDs.

Drupal helps us already by default on basic IDs and classes that we need to target things globally or specifically we just need to do an inspect element on the page and check for yourself.

1
  • Hi, in CSS option, from where can I get .page-node-123 class. obviously for my page it will be different. I have created a basic page, if I check its css using inspect element, its outer most css showing ID #main-content.
    – CodeNext
    Dec 6, 2015 at 17:38
2

Use can use the body element and this class to apply CSS. Drupal create a unique body class for every page.

5
  • but for any page created if I check the class using the Inspect element its outer most css showing ID #main-content only, so from where shall I get that class for particular page.
    – CodeNext
    Dec 6, 2015 at 17:43
  • But there is a unique class for every page base on node information (like node id or page title and content type.
    – Prem Patel
    Dec 6, 2015 at 17:47
  • If you check for font page there is class with name font.
    – Prem Patel
    Dec 6, 2015 at 17:48
  • I am checking....
    – CodeNext
    Dec 6, 2015 at 17:58
  • Ya i got it, for every page when doing Inspecting css in <body> there are several classes and I choose the specific class and applied the css .that-specific-class #main-content {..... } now it is working, Thanks
    – CodeNext
    Dec 6, 2015 at 18:07
1

If you see body class names then there numbers of class attached with body tag. Out of them one class generated based on node information.

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.