two or three column option with Yahoo GRID CSS
Submitted by sepeck on Sat, 2006-07-29 23:30
My previous article on converting the Yahoo GRID CSS for use in a Drupal theme covered the 2 column basic framework. Of course the trick with a CMS is what happens when you don't want to use three columns on every page but still want the option? Well I shall introduce my method which is probably not the best method but does seem to work.
My first article left you with a two column layout like this...
First read my original article and download the page.tpl.php file. On line 64-65 take out <?php if ($sidebar_right) { ?> because we're checking for the presence of a right sidebar earlier in the template.
So the trick is to check if there is content in $sidebar_right. If there isn't then print out the 2 column stuff. If there is then print out the necessary code/div statements to add the right column. Yahoo GRID CSS stuff will take care of the positioning/width for you.
First let's figure out what GRID insert we want to use. The left column we already have so on the GRIDS page scroll down and look at the examples. For our purposes we'll go with the 3/4 center content and 1/4 right content. That would be the yiu-ge and if we had a right sidebar we would end with a layout like this...
In the previous page.tpl.php note line 39 <!-- start: stack grids here -->. This is where the the GRID logic for the Yahoo GRID stuff starts. For a simple two column theme we have merely the stuff necessary to generate content.
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<div id="main">
<?php print $breadcrumb ?>
<h2 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>Looking at the section that supplies the GRID we have this
<div class="yui-ge">
<div class="yui-u first">
<!-- start: your content here -->
<div class="mod">
<div class="hd">
<h2>Unit ABC</h2>
</div>
<div class="hd">
<p>GRID UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
</div>
<!-- end: your content here -->
</div>
<div class="yui-u">
<!-- start: your content here -->
<div class="mod">
<div class="hd">
<h2>Unit D</h2>
</div>
<div class="hd">
<p>GRID UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
</div>
<!-- end: your content here -->
</div>
</div>The DIV withthe Unit ABC is the center content area. The DIV with the Unit D is what will be the right column content. There are some duplicated DIV statements in there. So let's strip them out to simplify it and add some of the php tags from the phptemplate pages. Taking them from blue marine as we did before.
<div class="yui-ge">
<div class="yui-u first">
<!-- start: your content here -->
<div class="mod">
<div class="hd">
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<div id="main">
<?php print $breadcrumb ?>
<h2 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
</div>
<!-- end: your content here -->
</div>
<div class="yui-u">
<!-- start: your content here -->
<div class="mod">
<div class="hd">
<?php print $sidebar_right ?>
</div>
</div>
<!-- end: your content here -->
</div>
</div>This leads us with less code and all the makings of a center column and right sidebar. So, what do we do if we only want a left sidebar and center content? Well, I was forced to learn how to use a php if ... else statement. (yes, it was tramatic, I think it took 30 minutes of experimenting)
So, in our two column template, we add an if
<!-- start: stack grids here -->
<?php if ($sidebar_right) { ?>
Essentiall if there is something in the right sidebar, then do the following. A little later there is an else where if there isn't a right sidebar, then just print out the center content area.
<?php if ($sidebar_right) { ?>
<div class="yui-gc">
<div class="yui-u first">
<!-- main content -->
<!-- start: your content here -->
<div class="mod">
<div class="hd">
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<div id="main">
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
</div>
</div>
<!-- end: your content here -->
</div>
<div class="yui-u"> <!-- right column -->
<!-- start: your content here -->
<div class="mod">
<div class="hd">
<div class='sidebar-right'>
<?php print $sidebar_right ?>
</div>
</div>
</div>
<!-- end: your content here -->
</div>
</div>
<?php } else { ?>
<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<div id="main">
<?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
<?php } ?>
So, maybe not the most efficient use of php around, but it does work and give you a pure css theme that handles positioning with css for those of us not quite spending enough time learning it's little quirks. So, you're still left with creating and populating a style.css file. Don't forget the spacing on the <p> tags. I was so confused the first time when the paragraphs had no space between them.
| Attachment | Size |
|---|---|
| page.tpl.php.txt | 3.87 KB |
Theme by
If you like grids, you MUST check out Panels
Stephen, Earl Miles' panels module is the perfect tool for for playing around with the possibilities of yahoo grids. If you haven't checked it out yet, you must. It would seem yahoo grids, and panels were made to marry one another.
erm....
You know, I hadn't consdiered that. I've been thinking of making up an excuse to use the Panel's module as it just seemed neat. I'll have to set it up on my test site and see what I can do.
Post new comment