I am using the bootstrap subtheme.

I was wondering if there was a way to style the main-container in relation to a particular node or section of the site, rather than it styling it the same everywhere. The reason I want to do this is because I want to setup multiple small mini-sites with different themes. Sort of like a show-case of what I can do in web-design.

The problem though is I can style the main-container, but it will style it everywhere for every page. Is there a way I can make it target specific only pages?


In this example: I want to style the white space BUT it only be done on my "mech" page. To my current knowledge, if I target .main-container it will style it everywhere on every page, which is what I do not want.

  • What is the structure of your site, is it like main-site then sub-sites? – CodeNext Feb 22 '16 at 5:33

You can do it using the CSS. First on whichever node you want to do, find its specific class given when you create that node (How: right click on the page and Inspect element in the code ........., you will find the several class, one of which is specific for that node). Now take that class. Now suppose if you want to change the main-content with that node only and do not want to change other, use following selector in css,

.specific-page-node-class #main-content {your css code}

This will apply change to main content of that specified node only and do not change to other.

Credit: Link for detail question and answer which I asked on same topic on the Drupal answer, I have summaried above


Based on a specific class or ID you can target the container. Ensure that that class/ID isn't used elsewhere on the site to avoid conflicts.



<div class="main-container" id="mechs">...</div>


#mechs {

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.