Working with Stark in Drupal 7

How to create an 'unmolested' Drupal starter theme using Stark in Drupal 7.

How to create an 'unmolested' Drupal starter theme using Stark in Drupal 7.

Before we begin I will assume that you will following the the links provided for further reading. This guide is to give you a starting point on designing Drupal from scratch utilizing Stark.

The files referenced in this guide are based on a Linux, Debian Squeeze, server. A development server is recommended when testing or creating any theme/module.

The Stark theme provided with Drupal is generally used as a troubleshooting tool for CSS or Javascript. From a designing perspective the usefulness of the Stark theme is based on Drupal's default HTML markup and CSS styles.

If starting a theme from scratch is not your cup of tea, you can always check out starter themes such as Zenor Fusion. You can also view our article on HTML5 Drupal starter themes We will by pass the Drupal installation process and assume that you have a Drupal 7 version already set up.

Preparing your custom theme registry

If you haven't done so already create a custom theme directory
sudo mkdir /var/www/(your drupal 7 site)/sites/all/themes

Now the first thing we want to do is copy stark from the themes folder found in /var/www/(your drupal 7 sit)/themes/stark to your theme directory /var/www/(your drupal 7 site)/sites/all/themes
sudo cp -r /var/www/(your drupal 7 site)/themes/stark /var/www/(your drupal 7 site)/sites/all/themes The stark theme contains the following files:

• layout.css - Your css file
• logo.png - Default drupal logo
• README.txt - A Read me file that further explains Stark
• screenshot.png - A screenshot of your theme. Visable from the admin panel.
• stark.info - A required file which provides theme information

From this point you may want to rename Stark. When renaming a theme make sure the directory and the .info all contain the theme name. For example if I want to name my theme "example"

The the theme directory folder will be: /var/www/(your drupal 7 site)/sites/all/themes/example

Your .info file will be: /var/www/(your drupal 7 site)/sites/all/themes/example/example.info

You may also want to edit the .info name to avoid confusion when enabling the theme. sudo gedit /var/www/(your drupal 7 site)/sites/all/themes/example/example.info

And change name = Stark
To
name = Example

Once we have our Stark folder in our theme directory we can begin to add a few core templates.

Core templates

Drupal 7 has default templates (.tpl.php) files that are provided by core. A few templates files worth including into your new custom theme are:

• block.tpl.php "/var/www/(your drupal 7 site)/modules/block/block.tpl.php"
• comment.tpl.php "/var/www/(your drupal 7 site)/modules/comment/comment.tpl.php"
• node.tpl.php "/var/www/(your drupal 7 site)/modules/node/node.tpl.php"
• taxonomy-term.tpl.php* "/var/www/(your drupal 7 site)/modules/taxonomy/taxonomy-term.tpl.php"
• page.tpl.php "/var/www/(your drupal 7 site)/modules/system/page.tpl.php"
• maintenance-page.tpl.php "/var/www/(your drupal 7 site)/modules/system/maintenance-page.tpl.php"
• region.tpl.php "/var/www/(your drupal 7 site)/modules/system/region.tpl.php"
• html.tpl.php "/var/www/(your drupal 7 site)/modules/system/html.tpl.php"

You will also need to create the necessary "template.php" file and have it reside in your custom theme folder.