1

In some cases, when I install new themes, some regions\ blocks\buttons are too near to each other, and I need to start adding margins between them individually with css. This takes much time...

Is there a way to automate this process? Is there some kind of a general\universal ID or class for all regions\blocks\buttons that I might be able to use to space all of regions\blocks\buttons "In one piece" and with much comfortability? It could also help me save time that could go on other things.

enter image description here

closed as too broad by Mołot, Scott Joudry, Yusef Mohamadi, rooby, Krishna Mohan Sep 4 '15 at 7:02

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Which theme are you using? – Screenack Aug 23 '15 at 17:10
3

No. Of course there are default Drupal styles but there are no guarantees that whichever base theme you are working from hasn't overridden them.

The good news is that most popular base themes will implement classes that are universal to a particular type of output, like a row or a block. For instance, Foundation uses its own 'row' and 'column' but retains the core 'block' class.

Since you asked :), here is something you might do to add padding to columns in a Bootstrap subtheme:

.main-container > .row > section {padding: 1em;}

Note the '>' combinator. This refers to immediate descendents.

<div class="main-container">
  <div class="row">
    <section>
      <!-- this element will be our target since it's an immediate descendent of .row -->
      <section>
        <!-- this element is not -->
      </section>
    </section>
  </div>
</div>

Note: If a selector is prefixed with '#' it is an id, and will only apply to one element. A class is prefixed with '.' and can apply to multiple elements. So all rows in bootstrap can be accessed with:

.row {padding: 1em;}
  • Hello Othermachines! I've attached an image of my relevant DOM output... "#Navbar" is one of the regions I want to change but I couldn't find ID or Class which is general enough to affect all horizontal-appearing regions besides it (I tried #row, #banner for example)... My theme is a pure, clean, Bootstrap sub-theme... Please, you might have an idea how could I effect all these horizontal areas? – JohnDoea Aug 23 '15 at 16:41
  • One more thing please Othermachines --- targeting .main-container > .row > section or .row in Style.css didn't bring any change :\ so I went after page.tpl.php and tried to "dig" any universal class for all sections there, but couldn't find any classes... I did find for example class="<?php print $navbar_classes; ?>... In such case it seems problematic for me to even add a customized class... :\ – JohnDoea Aug 23 '15 at 17:30

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