In case you bumped into this post without visiting the first post on this tutorial. This is the link to the first part of the post.Give a quick look at the first part which explains the .info file of a theme. I have observed that most of the visits to this blog land on the part 1 of creating a drupal theme, which I think doesn’t give any useful information in actually building a theme but just a kick start with the basic .info file. I am going to continue from where I left off.
After reading this post I hope you are ready with a folder with the name of your theme and a .info file that you have built describing your theme. This tutorial will help you build a drupal theme from a css template in a quick dirty way, which works!! Once it is built you will have an idea about how to build a drupal theme in a matter of few minutes. First get your css html ready, I am using LazyBreeze free css template from freecsstemplates.org . You can follow along the tutorial by downloading the template or using a different one of your choice.
Here is my .info file
name = Lady Breeze description = Theme by f4k1r for Drupal tutorial. Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License. screenshot = screenshot.png version = 0.1 core = 6.x engine = phptemplate ;Regions regions[header] = Header regions[left-cols] = SideBar Left regions[main_content] = Content regions[footer] = Footer regions[link_navigation] = Primary Links ;Stylesheet stylesheets[all][] = css/style.css
Our .info file tells drupal about the name,description of the theme and then defines the regions that the theme will be having and the location of the stylesheets. Next create a folder called css in our theme folder and put the style.css of the downloaded LadyBreeze into it. Also copy the images folder of the LadyBreeze into the theme folder.
Now our theme folder directory should look like this:
LadyBreeze
-ladybreeze.info
-css
—-style.css
-images
—-all the images from LadyBreeze
Once this is setup we will have to create our template file (page.tpl.php). All the pages on our Drupal website will be rendered based on this file. This file will use the drupal variables to fetch the content and then use our css to wrap the content in it and then displays to the user. If you are building a Drupal theme for the first time then use the already built node.tpl.php from the garland theme. First create a directory named templates and place the copied file into it. So now your directory structure should be like this
LadyBreeze
-ladybreeze.info
-css
—-style.css
-images
—-all the images from LadyBreeze
-templates
—-node.tpl.php
Next we are going to create our page.tpl.php based from the page.tpl.php of the garland theme(Default Drupal theme for 6.x). So copy the page.tpl.php and the index.html from the downloaded template into a temporary directory for editing. Now move into the templates folder and create a new file page.tpl.php ,Next we are going to copy the markup from the index.html into this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License Name : Sparkling Description: A two-column, fixed-width design with dark color scheme. Version : 1.0 Released : 20100704 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lazy Breeze by Free CSS Templates</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo"> <h1><a href="#"><span>lazy</span>breeze </a></h1> <p> design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a></p> </div> <div id="menu"> <ul> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Photos</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <!-- end #header --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <div class="post"> <h2 class="title"><a href="#">Welcome to lazybreeze </a></h2> <p class="meta"><span class="date">May 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>This is <strong>LazyBreeze </strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/"> CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p> <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p> <p class="links"><a href="#">Read More</a> | <a href="#" title="b0x w">Comments</a></p> </div> </div> <div class="post"> <h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2> <p class="meta"><span class="date">May 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p> <p class="links"><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div class="post"> <h2 class="title"><a href="#">Consecteteur hendrerit </a></h2> <p class="meta"><span class="date">May 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p> <div style="clear: both;"> </div> <div class="entry"> <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p> <p class="links"><a href="#">Read More</a> | <a href="#">Comments</a></p> </div> </div> <div style="clear: both;"> </div> </div> <!-- end #content --> <div id="sidebar"> <ul> <li> <div id="search" > <form method="get" action="#"> <div> <input type="text" name="s" id="search-text" value="" /> <input type="submit" id="search-submit" value="GO" /> </div> </form> </div> <div style="clear: both;"> </div> </li> <li> <h2>Aliquam tempus</h2> <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p> </li> <li> <h2>Categories</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> <li> <h2>Blogroll</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> <li> <h2>Archives</h2> <ul> <li><a href="#">Aliquam libero</a></li> <li><a href="#">Consectetuer adipiscing elit</a></li> <li><a href="#">Metus aliquam pellentesque</a></li> <li><a href="#">Suspendisse iaculis mauris</a></li> <li><a href="#">Urnanet non molestie semper</a></li> <li><a href="#">Proin gravida orci porttitor</a></li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end #page --> </div> <div id="footer"> <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p> </div> <!-- end #footer --> </body> </html>
We would want to remove the static html from this template and call the drupal variables to fetch the content from the database.
Here are a few variables and what their functionality is:
$head_title : This variable contains the title that will be displayed in the title bar on top of the browser.
$head : This variable contains the header of the page with the description, tags,etc…
$styles : This variable contains all the markup for linking the style sheets for the page. So if a new style sheet were to be added, then it would have to be defined in the LadyBreeze.info file and then drupal will automatically include it.
$scripts : This has all the javascripts that are to be included(We are not using any js file in this theme)
Open up your freshly created page.tpl.php from the template directory and copy the code head of a page.
<!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" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>"> <head profile="http://gmpg.org/xfn/11"> <title><?php print $head_title; ?></title> <?php print $head; ?> <?php print $styles; ?> <?php print $scripts; ?> <?php print $ie; ?> </head>
Compare the static markup from the index.html of the downloaded theme and the page.tpl.php as go along to understand how a drupal theme works and differs from a static css template. I will continue the remaining part in the next blog post.
More Info
Keep going. These tutorials are awesome.
By: Mike on July 23, 2010
at 9:43 am
this article is really “recipe” for creating drupal themes from some template. Thanks.
By: Drupal Theme Garden on July 29, 2010
at 5:26 pm
Very interresting tutorial , the kind of tutorial needed to get confident with Drupal.
It will be really helpfull to make the same tutorial available for Drupal 7
By: DANALI on August 2, 2010
at 10:08 am
thanks for admin wonderfull information…
By: aşk büyüsü on October 6, 2010
at 6:57 pm
Where’s part 3?
By: Kawika on October 24, 2010
at 3:04 am