There are a few posts in the queue about adding padding and borders to a region, but they are not quite clear for 7.x-3.0. Say your content zone is 24-grid, sidebar first is 4-grid, content is 16-grid, and sidebar second is 4-grid. Then you add a div into region--content.tpl.php and add your padding and border to that. Then inside of a node, you need to have 2 columns, so you use grid-8 alpha and grid-8 omega. Well now your content region is not 16-grid anymore because you added padding, so your grid-8 omega block shifts down. How do you accomplish this with still being about to use grid-8 alpha and grid-8 omega?

Comments

JSCSJSCS’s picture

I think I know what you are asking. I saw something similar a few months ago at http://vimeo.com/26110332. It is a great video. At one point, about minute 36, the grids break, but he explains the fix. In the notes, you will see the fix at http://snipt.org/xkmx.

Hope that helps.

iamfratty’s picture

That is a very great video resource, thanks for sharing. But, alpha and omega take off the margins, but I still can't get it to work. I have tried a lot of combinations, and even making the padding I add plus the borders equal to 1-grid width, but I am still missing something.

iamfratty’s picture

This was the only way I was able to get it to work:

24 Cols
First Sidebar / grid-3
Content / grid-16
Second Sidebar / grid-4

In region--content.tpl.php, added the box div

<div<?php print $attributes; ?>>
<div class="box">
  <div<?php print $content_attributes; ?>>
    <a id="main-content"></a>
........more php code..........
  </div>
  </div>
</div>

CSS for the box div:
(Since my 3/16/4 grids equal to 23 grids and not 24, I have 40 pixels to play with. So 19 pixels padding on each side, plus 2 pixels for the borders = 40 pixels.)

.box {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
  padding: 0 19px;
}

Is there a better way to do this without using up 1 grid in your content?

benlawraus’s picture

I did it this way:
From safari/firefox I found there was
div.block-imageblock-1
(I used the imageblock module) within the region.
I then placed
div.block-imageblock-1 {
border-style:solid;
border-width:2px;
}
in my custom them css file subtheme.css

eogiles’s picture

Check out http://stackoverflow.com/a/16363465/1877147
It has a few different approaches. The one I link to worked well for me. Basically you can draw a border on the inside of the region.

asanchez75’s picture

there is an interactive example here
http://jsfiddle.net/asanchez75/E76kL/