How to play with Yahoo Grids CSS

Yahoo released their Yahoo! User Interface. One part of which is their webpage templates, the Grids CSS. To follow along you will need to download the YUI library, a working test Drupal install and a text editor of some sort.

Keep in mind I am not a php whiz so a lot of this will be copy and paste from one file to another so anyone should be able to do this.

Our goal will be the base framework for a two column template. You'll need to make it pretty yourself later. Read on for more...

Getting started

So, in your themes directory create a new directory called yahoo_t2. From the yui_0.10.0 download, copy the yui\examples\grids\example_t2.html to your new thme directory and rename it to page.tpl.php. Open it with a text editor and look at the top.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype triggers -->
<html>
<head>
	<title>Grids CSS Example - YUI Grids</title>
	<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css" />
	<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
	<link rel="stylesheet" type="text/css" href="../../build/grids/grids.css" />
</head>

So, it looks like we're going to need some additional style sheets. In the yui\build directory locate the reset, fonts and grids.css and copy those to your yahoo_t2 directory as well. We're done with the downloaded files for now. Of course, this will not make a working theme.

So on your test Drupal site go to admin >> themes and enable the theme for use. Then go into admin >> users and edit your test account and enable the theme for just that test account (this will allow you to play with this without disturbing your site). Log out and back on with your test account.

Getting the style sheets in

Well, that doesn't much look like our target layout. Must be that pesky css files not getting called. So, let's look at the top of blue marine's page.tpl.php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">
 
<head>
  <title><?php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>

Wow. That's sort of different. Well we need to do something to get those css files loaded. So from this handbook page, which I got from here, we see that to use the print theme('stylesheet_import', base_path() . path_to_theme() . '/your_extra.css'); method.

So with a little editing you will replace everything between <head> .. </head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype triggers -->
 
<html>
<head>
        <title><?php print $head_title ?></title>
        <?php
        print $head;
        print theme('stylesheet_import', base_path() . path_to_theme() . '/reset.css');
        print theme('stylesheet_import', base_path() . path_to_theme() . '/fonts.css');
        print theme('stylesheet_import', base_path() . path_to_theme() . '/grids.css');
        print $styles 
        ?>
</head>

Save that and refresh. Your layout should now look like our target.

Getting the Drupal content code in the header

Of course we have all the example dummy text. Blue Marine has some tables so we'll be picking elements out of it to replace the dummy text in the yahoo template. In your themes\yahoo_y2\page.tpl.php scroll down to around line 23 where <p>MASTHEAD and replace the entire line with

	<?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
  <?php if ($site_name) { ?><h1><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
  <?php if ($site_slogan) { ?><p><?php print $site_slogan ?></p><?php } ?>
 
  <?php if (isset($secondary_links)) { ?><div id="secondary"><?php print theme('links', $secondary_links) ?></div><?php } ?>
  <?php if (isset($primary_links)) { ?><div id="primary"><?php print theme('links', $primary_links) ?></div><?php } ?>
  <?php print $search_box ?>
 
  <?php print $header ?>

It's right out of Blue Marine with a little clean up. Figuring out what's different is a good excercise for you. Refresh now and you should see your Drupal header infomration. Unstyled buy all the positions should be set correctly.

Getting the Drupal main content in

Now you'll want to scroll down to around line 45 where it says <p>PRIMARY and replace it with

<?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>

It too is rigth out of Blue Marine with one exception, I think there should only be one <h1 tag in your theme, the site name. Save and refresh and you should see content appear in the main content area (Exciting isn't it?). This is nice so far, but we sort of need the sidebar's and footer still.

Getting the sidebars in

Around line 66 you will find <p>SECONDARY. From Blue Marine replace the entire line with <?php print $sidebar_left ?>, save and refresh and you should see the left sidebar. Now we need to add one other bit. This theme is a left column only theme so if you are switching themes and have right column content it will all disappear. It would be sloppy to leave it like that. So from Blue Marine we are going to copy out one other line with a minor edit. It should now look like

<?php print $sidebar_left ?>
<?php if ($sidebar_right) { ?>
  <?php print $sidebar_right ?>
<?php } ?>

It will always print the left blocks and if there are any right blocks, it will print them too.

And the footer

This leaves us just the footer so replace the template footer text with <?php print $footer_message ?> and because Blue Marine has it add <?php print $closure ?> right above the </body> tag. Refresh again. Now we have almost all the basic elements.

Where your style stuff goes

Now create a style.css file and let's add one thing to get you started.

body {
  background-color: #eee;
  }

From your Blue Marine directory copy the block.tpl.php, box.tpl.php, comment.tpl.php and the node.tpl.php files into your directory. You can use these as a starting point to modify later.

Refresh and have fun.

Commenting on this Blog entry is closed.

AttachmentSize
page.tpl.php.txt2.89 KB
Tags:

13 comments

30
May

Very nice!

I am looking forward to a sequel, maybe I'll become a themer after all! ;)

3
Nov

For Drupal 5.x replace the

For Drupal 5.x replace the following in the header

print theme('stylesheet_import', base_path() . path_to_theme() . '/reset.css');
print theme('stylesheet_import', base_path() . path_to_theme() . '/fonts.css');
print theme('stylesheet_import', base_path() . path_to_theme() . '/grids.css');
print $styles

with

$styles = file_scan_directory(path_to_theme() . '/style', '^.*\.css$');
foreach($styles as $style) {
  drupal_add_css($style->filename, 'theme', 'all');
}
print drupal_get_css();

In your custom theme, create a style directory and copy the css files into it. The above will include all of the css files in there in the page (it will also include any other css files in the directory).

5
Nov

Thanks

Thanks for this

your article and info has brought my attention to this

This is something that has interested me for many years

Cheers

A4D

28
Feb

thanks

I can't believe how much you put into this tutorial. Thanks. Do you have a sample you've done this on? I bummed around here and http://developer.yahoo.com/yui/grids/ but didn't see something drupal with yahoo grids.

1
Mar

this site

This site and www.ancientpathways.net. I've upgraded my site and am using a more recent version of the Yahoo GRID css stuff. I have the outlines of an article for use with Drupal 5.0. The improvements with GRIDs are great. They've combined the css into one file for people and added more layout options. Hopefully I will get time to actually finish the post in the next week or two.

Speaking of sites, when my son learns to read properly he'll probably go nuts over yours. I had some thoughts on the island of Sodar myself. :)

10
Sep

Awesome! But a year later, where's the drupal theme?

This is an awesome... but where's the drupal theme?

Does a theme based on YUI prove to not work well in the real world?

I see that this is currently the ALL TIME popular content on blackmountain... and I imagine someone has built a nice site using this,,, no?

but I can't seem to find a theme based upon this... did no one give back a theme based on this write-up to the drupal community?

... so many questions :-P

10
Sep

How to build your own

This was a how to build your own theme article, not a theme in and of itself. Th base page.tpl.php file is also attached as a starting point.

11
Sep

community contributions

yes, i saw the tpl file, but I was hoping a year after you published this someone in the community would have contributed a completed theme based on your work.

by the way, still an awesome writeup and will save me some headaches Im sure

24
Sep

What about licensing

What about licensing issues?
Drupal Themes should be released under GPL, and YUI is released under BSD license.
Are they compatible?

25
Sep

...

Drupal themes released on drupal.org have to be GPL. There is some consensuses that the page.tpl.php, etc that interacts with Drupal also needs to be GPL if released for distribution.

Look at feel, of which CSS is part of, is a separate thing as are graphics. Also, I believe the BSD license is compatible with GPL in that you can relicense what you do with it as GPL with your own stuff.

With the latest version of GRID's, you can actually reference the CSS online at Yahoo's site too so you could write a theme using the reset-etc css and not even include it for download if you want to get creative.

20
Feb

it is very useful for me

after looking at your blog,i resolve some pained questiones
thanks
:)

5
Mar

some of the links

some of the links (e.g.http://developer.yahoo.com/yui/examples/grids/example_t2.html ) don't work anymore. can you repair please?