Create a theme step by step

Submitted by peter on Mon, 02/02/2009 - 00:00

Creating a theme is easy if you can find one you like, copy it, and change just the bits you need changed. Sometimes there are none out there that fit. Here is the creation, step by step, of the theme used on this page.

Test site

Follow this page on a test Web site, not the one that earns you money. The theme will produce boring text for a while and bits will be missing.

Test page

You could create a test page that has a full range of HTML for testing. When you create a page using the default Input Format, headings are converted into paragraphs. Change the Input Type to Full HTML then create multiple levels of headings and everything else you can think off. You will use the page to test your CSS.

Name

The theme used on this page is named create_a_theme_step_by_step_part_1. Yeah, original huh? Doh! If your site is named example.com, you might be creating a theme named Example. cjm.net.au might create a theme named CJM. The rest of this page will refer to the theme named create_a_theme_step_by_step_part_1.

Directory

First you need a directory to contain your theme. Go into your sites directory then the all directory then the themes directory. You are now at /sites/all/themes/ and can create your theme directory. The theme for this site is called D-theme so create /sites/all/themes/create_a_theme_step_by_step_part_1/.

The directory name is all lower case to avoid confusion on those operating systems that do not understand case.

.info file

The theme needs a .info file to tell Drupal 6 the basic information about the theme. Create a file named create_a_theme_step_by_step_part_1.info in the create_a_theme_step_by_step_part_1 directory. We will put a few lines of text in the file so use your favourite text editor. Use a text editor, not a word processor because word processors put all sorts of junk in the file. On Windows, Notepad is fine. If you have an old Apple computer from before the time when Apple threw away their own software and copied Unix, your software might create weird stuff that will not work no matter what you do.

You should now have file /sites/all/themes/create_a_theme_step_by_step_part_1/create_a_theme_step_by_step_part_1.info open in a text editor. Add the following line. The line is a comment to identify your theme. The semi-colon, ;, makes a line into a comment.
; create_a_theme_step_by_step_part_1 is a theme from http://D-theme.com/create_a_theme_step_by_step

Identify who created the theme or where users can go for support. This part of the information can be in a separate readme.txt file.
; Created by Orcs indentured at Columbia Internet.
; For support, move on to the afterlife and scream for help.

* Columbia Internet is the name of the ISP in the User Friendly cartoon.
* Orcs are explained in the book Lord of the Rings.

Your theme needs a name that humans can read when they visit the themes list to select the theme. Add the following line to your theme.
name = Create a theme step by step part 1

Add a description to appear in the theme list. Something quick and descriptive. You can also supply a screen shot so forget about listing colours and stuff that is visible in the screen shot. Add the following line to your theme.
description = create_a_theme_step_by_step_part_1 is a theme from http://D-theme.com/create_a_theme_step_by_step

Define a screen shot with the following line. Screen shots are usually 190 pixels wide by 90 pixels high and can vary, so long as they do not make the themes list page unreadable.
screenshot = screenshot.png

Your theme needs a version so you can keep track of changes. Start your experiment with 6.x for Drupal 6 then 0.1 for beta 1.
version = "6.x-0.1"

Tell Drupal that you want to use Drupal 6 with the following line.
core = "6.x"

Tell Drupal that you want to use the standard Drupal theme engine with the following line.
engine = phptemplate

You can assign a group of themes to a project as shown in the following line.
project = "Create a theme step by step"

You can add a publication date using a Unix timestamp as shown in the following line. Forget this and use a new version number each time you make a change.
datestamp = "1230509227"

Drupal lets you define regions within the Web page. The following are the default regions in Drupal 6. You do not have to define these to use them. If you want more regions then define all the regions including the default regions and your extra regions. We include a description of these regions as comments so we will remember what we have by default.
;regions[left] = Left sidebar
regions[right] = Right sidebar
;regions[content] = Content
;regions[header] = Header
;regions[footer] = Footer

We will create a style sheet using the default Drupal 6 style sheet name. Add the following line to define the style sheet because we will then add some non default style sheets.
stylesheets[all][] = style.css

Add additional style sheets for Superfish. Superfish will be explained later.
stylesheets[all][] = superfish/css/superfish.css
stylesheets[all][] = superfish/css/superfish-vertical.css

Your theme will use Javascript for Superfish> Javascript will be explained when we warp into another space-time continuum. For now just add what is defined here.
scripts[] = script.js
scripts[] = superfish/js/superfish.js

style.css

Create the empty text file style.css in your test editor ready to add things later. You will have several files open in your text editor. All the files are in the theme directory.

script.js

The Superfish Javascript exists but the script.js does not exist. Create a file named script.js and containing the following lines.
// create_a_theme_step_by_step_part_1 is a theme from http://D-theme.com/create_a_theme_step_by_step
$(document).ready(function()
    {
    $('ul.sf-menu').superfish();
    });

Superfish

Download Superfish at users.tpg.com.au/j_birch/plugins/superfish/. Superfish uses jQuery and jQuery is already in Drupal. You download Superfish as a Zip file then extract a directory with a name like superfish-1.4.8 and move the directory into the theme directory. You then rename superfish-1.4.8 to plain superfish. The superfish directory contains an odd file named .DS_Store. You can delete .DS_Store.

page.tpl.php

The next file you want is a PHP file containing a mixture of PHP and HTML. The PHP part is basic and does not require programming knowledge. Just follow the examples. When your theme is working to the point where you can see content on a page, you can decide what other bits of PHP and Drupal you want to learn to make your theme more flexible.

PHP starts with <?php and ends with ?>. Add the following to page.tpl.php.
<?php
?>

You can add comments between the PHP tags. Add the same sort of identification you use in the other files.
<?php
/*
create_a_theme_step_by_step_part_1 is a theme from http://D-theme.com/create_a_theme_step_by_step
*/
?>

All Web pages need a doctype. Add the following doctype to the end PHP tag.
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

All Web pages need a html element to tell the browser when to switch into HTML mode. The html element also specifies the languages and the text direction for that language. Add the following html element after the doctype.
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
</html>

The HTML is divided into two sections, head and body. Add those two sections as shown in the following example. After this, we will talk about adding things to head or to body.
?><!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->language; ?>" xml:lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
</head>
<body>
</body>
</html>

If you were to switch on the theme at this stage and visit a non administrative page, you would see an empty screen. Add the content so that something will be visible. Add the following line in the body.
<?php print $content; ?>

The body should now look like the following lines.
<body>
<?php print $content; ?>
</body>

We will work on head for a while. We will complete the head for a basic theme. Nothing fancy. Then we will add the default headings, menus, and regions to the body. First we will switch on the theme so we can see progress.

Switch the theme on

Before you switch on your theme, you want to protect your site administration from a theme failure. Go to Administer < Site configuration < Administration theme and select Garland as the administration theme. Select Use administration theme for content editing. Apply the changes by selecting Save configuration.

You now use the safe reliable Garland theme when in administration. Keep one browser window open in the administration area and another open on a regular content page to see the changes in the theme.

Go to Administer > Site building > Themes. Find D-theme. There are hundreds in the list at D theme. A core Drupal install has only six themes. Switch the theme one by selecting the box in the Enabled column. You can test the theme on your site by then selecting the Default option. Apply the changes by selecting Save configuration at the bottom of the theme list.

head

Start with the page title supplied by Drupal in a field named $head_title. Add the following line to head.
    <title><?php print $head_title; ?></title>

You could refresh the content window to see the content page change from dull boring text to dull boring text with a title in the browser window heading. Yes, that is where this title goes. It is the value browsers use for bookmarks and tabs when you have multiple tabs open. We will use $head_title again in the body for a fancy title splashed across the screen.

Note the space in front of the title element. That is indenting. You can use the standard tab method or type a few spaces. Browsers ignore both. When you publish a book about your theme, some publishers will demand you use industry standard tabs while other publishers will demand the industry standard spaces. There is no standard. Drupal adopted the PEAR recommendations that specify two spaces.

We need three more fields in the head. Add the following lines after the title. You could add them one at a time and refresh the browser to see what each field adds. There will be nothing visible on the page. You have to look behind the scene using the view page source option in your browser. In Firefox it is View > Page source or Ctrl+U.
    <?php print $head; ?>
    <?php print $styles; ?>
    <?php print $scripts; ?>

The next bit is something you do because everyone else does. This line fixes a problem in one or more versions of Internet Explorer. I have seen the problem but I rarely use IE.
    <script type="text/javascript"><?php /* Needed to avoid Flash of unstyle content in IE */ ?> </script>

This little bit is Javascript for Superfish. Add the following lines to head. You will not see the result until you add menus in body.
    <script type="text/javascript">
    $(document).ready(function()
        {
        $('ul.sf-menu').superfish();
        });
    </script>

The head is finished and should look like the following example.
<head>
    <title><?php print $head_title; ?></title>
    <?php print $head; ?>
    <?php print $styles; ?>
    <?php print $scripts; ?>
    <script type="text/javascript"><?php /* Needed to avoid Flash of unstyle content in IE */ ?> </script>
    <script type="text/javascript">
    $(document).ready(function()
        {
        $('ul.sf-menu').superfish();
        });
    </script>
</head>

style.css

That style.css is sitting there unused. We could style something just to get the hang of it. CSS accepts comments the same as PHP and some other languages. Add the following comment to identify the style.
/*
create_a_theme_step_by_step_part_1 is a theme from http://D-theme.com/create_a_theme_step_by_step
*/

That style.css is sitting there unused. We could style something just to get the hang of it. CSS accepts comments the same as PHP and some other languages. Add the following comment to identify the style.
h1
    {
    color: blue;
    }
h2
    {
    color: teal;
    }
h3
    {
    color: green;
    }
h4
    {
    color: lime;
    }

body

Content

We printed the content in the body. Now we add a division around the content so we can control the placement of the content. Expand the content line with the extra HTML shown in the following lines. $title is the content title from the node title and $content is the node body. $tabs provides the edit and view tabs when you are logged and authorised to edit the content.
<div id="content"><?php
if($title)
    {
    ?><div id="title"><?php print $title; ?><div>
<?php
    }
if(!empty($tabs))
    {
    ?><div class="tabs"><?php print $tabs; ?></div>
<?php
    }
print $content;
?></div>
Add the following style to style.css. When you create your own style, you can add anything you like to this page. For now we will push the content to the left and give it 60 percent of the page width.
#content
    {
    float: left;
    width: 60%;
    }

Site name

Most of us want to display our site name in big letters. Brag. Yeah! It is the right thing to do one the home page so people can recognize the site. On other pages you want a smaller site name to let people go straight into content. You can set up themes to deliver a different page for the home page. For now, we will make just one type of page. Add the following lines to the body.
<php
if($site_name)
    {
    ?><div id="site-name"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a><div>
<?php
    }
?>

Add the following style to style.css then view the test content page.
#site-name
    {
    background-color: navy;
    color: white;
    float: right;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 200%;
    text-align: center;
    width: 3.5em;
    }

You can experiment with the contents of site-name style. You can remove most of the elements without breaking anything. If you remove background-color then remove color to avoid white text on a white background.

The site name is on the right and the background is blue but by default the blue does not go up to the margins and the link is a nearly invisible purple colour. What do we do?

We fix the color first. The site name is inside a link inside the division. Links default to a color that is set in the browser. Links do not inherit the colour of the division. You have to specify the colour of the link direct. We are using white and white will not work in other areas where the background is white. Add the following style to make links white when they are in the site name division. The text-decoration setting will remove the white line from under the link text. Experiment with and without text-decoration.
#site-name a
    {
    color: white;
    text-decoration: none;
    }

The annoying gap around the outside is a margin on the outside of the body element. You remove the gap with the following style.
body
    {
    margin: 0;
    }

You now have text up against the edges of the screen. Add the gap back inside your divisions in the form of padding. Add the following line inside the #content style and again inside the #site-name style.
    padding: 0.5em;

The site title appears as:
D
theme
for da
Web

I prefer it more spaced out:
D
theme
for
da
Web

Find the bit in the body where we print site name. Change the print from print $site_name; to the following.
print str_replace(' ', '>br /<', $site_name);

View and Edit tabs

The Edit and View tabs are supplied in $tabs with the following layout. There is default Drupal CSS to format the tabs based on the classes. You can override the formatting in the CSS.
<div class="tabs"><ul class="tabs primary">
<li class="active" ><a href="/create_theme_step_by_step" class="active">View</a></li>
<li ><a href="/node/202/edit">Edit</a></li>
</ul>
</div>

Content block body. This block shows you what a block looks like in the content region.

D
theme
for
da
Web