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 Zen or 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.
Further Readings
To further see what files can be overridden you can read the core template and suggestion documentation.
To further override Drupal's default code see the Theming Guide
