How to Drupal theme: Tutorial

Drupal is a powerful CMS and has a powerful templating system that keeps the Drupal theming intact and flexible. We can easily design Drupal themes from HTML/CSS that we create. I would try to go step by step on how to create drupal themes from HTML/CSS for Drupal.

Step 1: Learn HTML and CSS.

Step 2: Create a design in HTML/CSS.

I am not a designer and I don’t understand colors well. And this is the reason my best strategy is always to hire a designer and handle me HTML/CSS for the web product I am working upon.

You can also download some interesting HTML/CSS designs from web. Open web design (http://www.openwebdesign.org/) also has interesting designs.

Step 3: Once, you have the basic HTML/CSS, it is time to create a template out of it that can be used with your Drupal content. For this, you need to understand that all you need

For this tutorial, I downloaded a drupal theme ‘plain2’ from:

http://www.sixshootermedia.com/free-templates

I hope you have a working drupal test installation where you can run your template files while you create them. Put this folder in drupal-installed/sites/all/themes/ directory.

Step 4: Now, its time to create first template file. Drupal has a templating engine that understands files with .tpl.php extentions. So, first step is to RENAME your index.html to page.tpl.php. Page.tpl.php is the default file that drupal searches for in a theme when deciding on the layout of the content to be displayed.

Also, move your css file from css folder to the same where your new page.tpl.php file is and rename it to style.css. Style.css is the main css file that Drupal automatically loads when loading the theme.

The downloaded index.html that is now renamed to page.tpl.php has following format:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”imagetoolbar” content=”no” />
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<meta name=”author” content=”James Koster || www.sixshootermedia.com” />
<meta name=”copyright” content=”” />
<meta name=”company” content=”” /><meta name=”revisit-after” content=”7 days” />

<title>Title</title>

<link href=”css/1.css” rel=”stylesheet” type=”text/css” />
</head>

<body>

<div id=”header”>
<div id=”header-container”>
<p>Get in touch: 0800 112233 | <a href=”#”>email@email.com</a><br /><a href=”#container” style=”padding-right:10px; background-image:url(images/backgrounds/downarrow.gif); background-position:right; background-repeat:no-repeat;”>Skip to Content</a></p>
<img src=”images/logo.jpg” alt=”Your Logo” title=”Your Logo” />
<h1><a href=”#”>Plain 2.0</a></h1>
<ul>
<li><a href=”#intro”>Intro</a></li>
<li><a href=”#css”>css &amp; xhtml</a></li>
<li><a href=”#author”>The Author</a></li>
</ul>
<br class=”clear” />
</div>
</div>

<div id=”description”>
<p>This is where the description of your web site will go. This element of the web page is easily removed if you don’t want to have it on any page besides the homepage. Just delete it! Heres an <a href=”#”>Example Link</a>.</p>
</div>

<div id=”container”>
<div id=”sidebar”>
<h1>Example Header</h1>
<p>
Here’s some links, you can use this space for whatever you want, I suppose!
</p>
<ul>
<li><a href=”http://www.openwebdesign.org”>Open Web Design</a></li>
<li><a href=”http://www.sixshootermedia.com”>Six Shooter Media</a></li>
<li><a href=”http://www.jameskoster.co.uk”>JK.co.uk</a></li>
<li><a href=”http://www.buyabutton.net”>Buy a Button</a></li>
</ul>
<p>
Think of anything else useful to put here? GREAT! Then put it here and make it happy!
</p>

<h1>Your Logo</h1>
<img src=”images/logo.jpg” alt=”” />
<p>This is, of course just a sample logo. Use it if you want! That’s no problem. You can change the colour easily if you do want to use it by opening it in a graphics program and adjusting the Hue/Saturation. If you don’t want to use it, just stick your own logo in there!</p>

<h1>Log In</h1>
<input type=”text” value=”User Name” />
<input type=”password” value=”Password” />
<input name=”” type=”submit” />

</div>
<div id=”content”>
<h1><a name=”intro” id=”intro” style=”visibility:hidden”></a>Introduction</h1>
<h3>Just some descriptive text</h3>
<p>
Hello and welcome to Plain 2.0. This template being the follow up to my previous template “Plain 1.0”. It adheres to the same main ideas as the original: Lots of white space while still being visually appealing and readable.<br />
Since so many people seemed to enjoy Plain 1.0 I thought I should provide users with an alternative to that template. Something of the same style that looks a bit different.<br />
The template works fine in all browsers and resolutions although it does look a bit tight in 800×600. For me 800×600 is just too small to fit readable content into that isnt a pain to read in any resolution above that. If the “tightness” bugs you, the layout is easily slimmed by adjusting a few values in the css.
</p>
<div class=”articlemenu”>
<a href=”#”>Read More</a> <a href=”#”>12 Comments</a>
</div>

<h1><a name=”css” id=”css” style=”visibility:hidden”></a>CSS &amp; XHTML</h1>
<h3>Because it’s important!</h3>
<p>
As anyone looking for a web site template to use would expect – this template is of course, both <a href=”http://jigsaw.w3.org/css-validator/check/referer”>CSS</a> and <a href=”http://validator.w3.org/check?uri=referer”>XHTML</a> valid according to the w3c. The benefits of this include;
</p>
<ul>
<li>The web site rendering correctly in a wide range of browser platforms</li>
<li>Since CSS is used to maximise the aesthetics of the web site the load times are extremely low making for an extremely accessible web site.</li>
<li>Low use of images saves bandwidth and improves load times</li>
</ul>
<p>
For more information regarding this, and lots of other useful web design related stuff, follow this <a href=”http://www.w3.org/MarkUp/2004/xhtml-faq” target=”_blank”>link</a>.
</p>
<div class=”articlemenu”>
<a href=”#”>Read More</a> <a href=”#”>12 Comments</a>
</div>

<h1><a name=”author” id=”author” style=”visibility:hidden”></a>About the Author</h1>
<h3>About Me!</h3>
<img src=”http://www.sixshootermedia.com/images/icon.jpg” alt=”” style=”border-color:#fff;” />
<p>
My name’s Jay and I work as a web designer! You can view my work on my web site; <a href=”http://www.sixshootermedia.com”>Six Shooter Media</a>. Like 5.9 billion other people on this planet I also run my own <a href=”http://www.jameskoster.co.uk”>blog</a>. Lovely eh!?
</p>
<div class=”articlemenu”>
<a href=”#”>Read More</a> <a href=”#”>12 Comments</a>
</div>

</div>
</div>

<div id=”footer”>
<div id=”footercontent”>
&copy; You 2005<br />
Web template (Plain 2.0) designed by <a href=”http://www.sixshootermedia.com”>James Koster</a> for <a href=”http://www.openwebdesign.org”>Open Web Design.</a>
</div>
</div>

</body>
</html>

 

Step 5:Make quick following changes:

1. Replace Title in <title>tables in head with <?php print $head_title ?>

2. Add in the <head> tags:

<?php print $head ?>
<?php print $scripts ?>
<?php print $styles ?>

3. Replace Logo with <?php print $logo ?>

4. Replace header content with <?php print $header ?>

5. Side left menu with <?php print $sidebar_left; ?>

6. Main content body with <?php print($content) ?>

7. Footer with <?php if ($footer_message) : ?>

 

Now, page.tpl.php should look something like:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”imagetoolbar” content=”no” />
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<meta name=”author” content=”James Koster || www.sixshootermedia.com” />
<meta name=”copyright” content=”” />
<meta name=”company” content=”” /><meta name=”revisit-after” content=”7 days” />

<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $scripts ?>
<?php print $styles ?>

</head>

<body>

<div id=”header”>
<div id=”header-container”>
<p>Get in touch: 0800 112233 | <a href=”#”>email@email.com</a><br /><a href=”#container” style=”padding-right:10px; background-image:url(./images/backgrounds/downarrow.gif); background-position:right; background-repeat:no-repeat;”>Skip to Content</a></p>

<img src=”<?php print $logo ?>” alt=”<?php print $site_name ?> Logo”/>
<?php print (“<h2>DynamicBrain Social Network</h2> <br>”.$site_slogan) ?>

<a href=”#”><?php print $header ?></a>
<br style=”clear:both;” />
</div>
</div>

<div id=”description”>
Dynamicbrain a social collaborative site where users can interact, learn from one another and post articles, blogs & links focused on personal development, spirituality, religion, yoga, occult, magic, self-help, psychology, enlightenment & anything related to human development.
Please join, share and learn.
<p> <a href=”#”>Example Link</a>.</p>
</div>

<div id=”container”>
<div id=”sidebar”>

<?php print $sidebar_left; ?>

<!–<h1>Example Header</h1>
<p>

Here’s some links, you can use this space for whatever you want, I suppose!
</p>
<ul>
<li><a href=”http://www.openwebdesign.org”>Open Web Design</a></li>
<li><a href=”http://www.sixshootermedia.com”>Six Shooter Media</a></li>
<li><a href=”http://www.jameskoster.co.uk”>JK.co.uk</a></li>
<li><a href=”http://www.buyabutton.net”>Buy a Button</a></li>
</ul>
<p>
Think of anything else useful to put here? GREAT! Then put it here and make it happy!
</p>

<h1>Your Logo</h1>
<img src=”images/logo.jpg” alt=”” />
<p>This is, of course just a sample logo. Use it if you want! That’s no problem. You can change the colour easily if you do want to use it by opening it in a graphics program and adjusting the Hue/Saturation. If you don’t want to use it, just stick your own logo in there!</p>
<h1>Log In</h1>
<input type=”text” value=”User Name” />
<input type=”password” value=”Password” />
<input name=”” type=”submit” />
–>

</div>
<div id=”content”>
<h1><a name=”intro” id=”intro” style=”visibility:hidden”></a>Introduction</h1>
<h3>Just some descriptive text</h3>
<p>
<?php print($content) ?>
</p>
<div class=”articlemenu”>
<a href=”#”>Read More</a> <a href=”#”>12 Comments</a>
</div>

<h1><a name=”css” id=”css” style=”visibility:hidden”></a>CSS &amp; XHTML</h1>
<h3>Because it’s important!</h3>
<p>
</p>
<ul>
<li>The web site rendering correctly in a wide range of browser platforms</li>
<li>Since CSS is used to maximise the aesthetics of the web site the load times are extremely low making for an extremely accessible web site.</li>
<li>Low use of images saves bandwidth and improves load times</li>
</ul>
<p>
For more information regarding this, and lots of other useful web design related stuff, follow this <a href=”http://www.w3.org/MarkUp/2004/xhtml-faq” target=”_blank”>link</a>.
</p>
<div class=”articlemenu”>
<a href=”#”>Read More</a> <a href=”#”>12 Comments</a>
</div>

<h1><a name=”author” id=”author” style=”visibility:hidden”></a>About the Author</h1>
<h3>About Me!</h3>
<img src=”http://www.sixshootermedia.com/images/icon.jpg” alt=”” style=”border-color:#fff;” />
<p>
My name’s Jay and I work as a web designer! You can view my work on my web site; <a href=”http://www.sixshootermedia.com”>Six Shooter Media</a>. Like 5.9 billion other people on this planet I also run my own <a href=”http://www.jameskoster.co.uk”>blog</a>. Lovely eh!?
</p>
<div class=”articlemenu”>
<a href=”#”>Read More</a> <a href=”#”>12 Comments</a>
</div>

</div>
</div>

<div id=”footer”>
<div id=”footercontent”>
<?php if ($footer_message) : ?>

<a href=”http://www.dynamicbrain.net/privacy”> Privacy Policy </a> | <a href=”http://www.dynamicbrain.net/feedback”> Contact Us</a>

<?php print $footer_message;?>
<?php endif; ?>
<?php print $closure;?>

&copy; Institute of Psychology and Health 2007<br />
<br>
Web template (Plain 2.0) designed by <a href=”http://www.sixshootermedia.com”>James Koster</a> for <a href=”http://www.openwebdesign.org”>Open Web Design.</a>
</div>
</div>

</body>
</html>

 

Step 6: Create a file node.tpl.php in the same directory with following content:

 

<div class=”node”>
<h2><a href=”<?php print $node_url ?>” title=”<?php print $title ?>”> <?php print $title ?></a></h2>
<?php print $picture ?>
<div class=”info”> <h3><?php print $submitted .'<div class=”taxonomy”>’. ($submitted ? ‘ :: ‘ : ”) . $terms .'</div>’ ?></h3></div>
<div class=”content” style=”clear:right;”>
<?php print $content ?>
</div>
<?php if ($links): ?>
<div class=”links”><?php print $links ?></div>
<?php endif; ?><?php if ($picture): ?>
<br style=”clear:right;” />
<?php endif; ?>
</div>

 

Step 7: Create another file block.tpl.php:

 

<div class=”block block-<?php print $block->module?>” id=”block-<?php print $block->module . “-” . $block->delta ?>”>

<?php if ($block->module != ‘menu’){?>
<h2 class=”title”><span><?php print $block->subject ?></span></h2>
<?php } ?>
<div class=”content”><?php print $block->content ?></div>
</div>

 

Step 7: Go to Drupal web interface and from menu go to Administrator->Themes load this theme (here, in this case plain2).

And, Viola you would have a working drupal theme! You would want to tweak further to your needs and for that you would need to understand these tpl files. I’ll go deeper into them and what they mean some other time. Drupal theming is simple. Isn’t it?

 

Comments on this entry are closed.

css.php