Hi all ...
I'm trying to add a second set of 3 column Gpanels.
I have a first set just below the "secondary content", above the columns.
I'm trying to add a second set just above the "tertiary content".
Everything goes good, except "$three_col_third" keeps showing up below $three_col_second instead of beside.
Please have a look at the screenshot attached.

What did i do to make a difference between the 2 3 column regions:

In my template.info i added:

; 3 col Gpanel bottom
  regions[three_col_first_bottom]   = 3col Gpanel col 1 Bottom
  regions[three_col_second_bottom]  = 3col Gpanel col 2 Bottom
  regions[three_col_third_bottom]   = 3col Gpanel col 3 Bottom

In my page.tpl.php i added:

<?php if ($three_col_first_bottom or $three_col_second_bottom or $three_col_third_bottom): ?>
  <div class="three-col-33 gpanel clear-block">
    <div class="section region col-1-bottom first"><div class="inner">
      <?php if ($three_col_first_bottom): print $three_col_first_bottom; endif; ?>
    </div></div>
    <div class="section region col-2-bottom"><div class="inner">
      <?php if ($three_col_second_bottom): print $three_col_second_bottom; endif; ?>
    </div></div>
    <div class="section region col-3-bottom last"><div class="inner">
      <?php if ($three_col_third_bottom): print $three_col_third_bottom; endif; ?>
    </div></div>
  </div>
<?php endif; ?>

In my layout.css i added:

/* Three Col 33  BOTTOM*/
.three-col-33 .region {float: left; width: 32%;}
.three-col-33 .col-2-bottom  {right: -1%; width: 34%;}
.three-col-33 .col-3-bottom  {right: -2%;}

I'm placing a line on the left side of col-1 & col-2, so in my blocks.css i have following code:

.col-1-bottom {
	background:url(../images/divider-bottom.png) no-repeat center right;
	padding: 0 10px 0 10px;
}
.col-2-bottom {
	background:url(../images/divider-bottom.png) no-repeat center right;
	padding: 0 10px 0 10px;
}

No matter what i try, i always get that tirth box below the second.
What is it that I'm overlooking?
thanks in advance for any help on this!

P.S.: the site is currently in offline mode, I'm developing local.

Pat.

CommentFileSizeAuthor
screenshot-DO.png482.2 KBPatsjoelie

Comments

Jeff Burnz’s picture

You cant add any width to the columns - so by adding padding directly to .col-1-bottom and .col-2-bottom adds width and breaks the layout.

What you need to do is add the padding to the .inner divs, e.g.:

.col-1-bottom .inner {
background:url(../images/divider-bottom.png) no-repeat center right;
padding: 0 10px 0 10px;
}

Great looking theme btw, love to see that when its live.

Patsjoelie’s picture

Stupid me.
Overlooking the obvious :(
Thanks Jeff, I'll drop you a line when it goes live :)
The designer has a lot of work to do :)