Different css of #main-content at differnt page url?

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.