Converting a static HTML page to a Drupal 5 theme

McJim's picture

These are my notes from the Drupal NW UK User Group meeting in December 2007.

First and foremost, this talk was heavily influenced by the theming chapter in Pro Drupal Development: see http://www.apress.com/book/view/1590597559
There's a free download of the theming chapter in the links on the left.
Also, Christmas happened between the talk and the writing of these notes, so please excuse any memory errors...

The aim was to convert a simple HTML page into a Drupal theme.

Moved files to correct directory, sites/default/themes/yourtheme for a single site.

I then renamed the files:
index.html became page.tpl.php and main.css became style.css

I set the admin theme to Garland (Administer -> Site configuration -> Administration theme) so we didn't have to worry about losing access to the admin screens, or, in fact, styling them.

Went to admin area to set theme (Administer -> Site building -> Themes).

Woo-hoo! It worked! But there was no Drupal content, it was just the static HTML...

Began removing content in page.tpl.php and replacing it with variables.

For our main content:
<?php print $content; ?>

For the sidebar:
<?php print $sidebar_left; ?>

For the primary links menu:
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')); ?>
<?php endif; ?>

For the CSS:
<?php print $styles; ?>
in the head of the document.

This led to a mini-rant by myself about omitting all the unnecessary styles that Drupal adds by doing this:

/style.css" type="text/css" media="screen" charset="utf-8" />

Chris sensibly suggested using drupal_add_css() (http://api.drupal.org/api/function/drupal_add...), which seems a more Drupal way of doing things:

<?php
/**
* adding and removing style sheets
* this code goes in your template.php file
*/
function _phptemplate_variables($hook, $vars) {
switch ($hook) {
// we want this code to run when this hook is called by a page
case 'page':
/**
* drupal builds an array of style sheet info during a callback
* this array is later turned into style sheet imports with the
* drupal_get_css() function -> http://api.drupal.org/api/function/drupal_get...
* and finally it all get's printed in page.tpl.php with '<?php print $styles; ?>'.
*/

/**
* We can add style sheets here using the function
* drupal_add_css() -> http://api.drupal.org/api/function/drupal_add...
* and remove styles by unset(ting) the appropriate array elements.
*/

/**
* example #1 - add a css file called layout.css that's located
* in our template folder - path_to_theme() does exactly what
* you'd expect -> http://api.drupal.org/api/function/path_to_th...
*/
drupal_add_css(path_to_theme() .'/layout.css', 'theme', 'all', TRUE);

/**
* example #2 - remove a single style sheet - in this case system.css
* calling drupal_add_css without any parameters will
* return the style sheet array
*/
$css = drupal_add_css();

// print the array - make a note of what you want to remove
//print_r($css);

// use the php function unset -> http://uk.php.net/manual/en/function.unset.ph...
unset($css['all']['module']['modules/system/system.css']);

/**
* example #3 - remove all style sheets added by modules
* un-comment below
*/
//unset($css['all']['module']);

/**
* finally over-ride our $vars['styles'] variable (which will become $styles in
* page.tpl.php) by passing our amended style sheet array through drupal_get_css()
* and we're good!
*/
$vars['styles'] = drupal_get_css($css);
break;
}
// don't forget to return the $vars array :)
return $vars;
}

More variables here: http://drupal.org/node/11812

Things change a bit in Drupal 6: I'll give a talk on this in a month or two.