Drupal: Create your own template - how it works

As beautiful as Drupal's themes and templates may be, they are often not enough. We show you how to create your own. To do this, however, you need knowledge of HTML and CSS - a basic knowledge of PHP is helpful, but not a requirement.

Create a new Drupal theme using CSS only

Even if you don't understand PHP, you can easily create a new Drupal theme if you are familiar with CSS.

• First of all, you should take a look at Drupal's Stark theme.
• It belongs to the core of Drupal 7 and was specially created so that designers can directly access Drupal's XHTML code and need nothing but some CSS for their own theme.

Step 1: the basis for your Drupal theme

First of all, you have to lay the foundation for your theme and ensure that it is recognized by Drupal at all.

• Go to the directory / sites / all / themes in your Drupal installation and create a new folder here.
• Now give this folder a meaningful name, for example praxistipp_theme. Make sure that you write the name in lower case.
• First create the .INFO file, which provides Drupal with basic information about your theme.
• To do this, open a new file in a text editor such as Notepad and copy the following lines.
• name = The name of your theme description = Brief description of the theme. core = 6.x engine = phptemplate stylesheets [all] [] = style.css stylesheets [all] [] = layout.css regions [left] = Left sidebar regions [right] = Right sidebar regions [content] = Content regions [ header] = Header regions [footer] = Footer
• Change the name and the description according to your ideas.
• CSS themes work with Drupal 6 and 7. If you write this theme for Drupal 7, you have to change core = 6.x to 7.x so that Drupal sorts the theme correctly.
• With this info file you define two stylesheets and five regions for your templates. However, you can easily add more style sheets as well as regions.
• Save this document as .INFO and save it in the folder you created earlier.

Step 2: edit the CSS files of your Drupal theme

The Stark template uses only one CSS file: layout.css. This contains only the most necessary information.

• The code is only there to sort the basic contents of a Drupal installation. You don't need much more in your own layout.css file for your theme and templates to work.
• First of all, define the layout of your theme by creating your own layout.css file.
• Either copy the content from the layout-css. File of the Stark theme or fill your file with your own code.
• When copying, note that the CSS file is designed for Drupal 6. Classes and IDs can differ in Drupal 7.
• You should then create other standard CSS files, such as print.css. However, these are optional.
• Every CSS file you create must also be referenced in the .INFO file. For example, for print.css add the line stylesheets [all] [] = print.css.
• Then put all the CSS files in the folder you created for your theme.

Deeper template changes to the Drupal core files

Basically, you can use stylesheets to build versatile and unique Drupal themes. If the basic functions of the templates are not enough for you, you should take a look at the central PHP templates from Drupal. Four are essential:

• page.tpl.php affects the general page layout.
• node.tpl.php manages the content sections of your site, i.e. the nodes or nodes.
• block.tpl.php is responsible for content blocks regardless of the region in which they are placed.
• comment.tpl.php affects the comments on your site.
• Copy these files into your theme folder and change them here. Refrain from editing the originals directly, as this will affect all themes that do not have their own PHP files.
• By editing these files, you can now also change the basic HTML structure of the templates and have complete control over your theme and the associated templates.

The instructions refer to Drupal 6 - in the newer version there may be slight deviations. If you'd rather switch to WordPress now, we'll show you how to create a WordPress theme here.