Turning a static site into a Drupal theme

I did the following presentation at DrupalDaze last weekend. It is for very beginner users to understand how Drupal themes are made! First, make sure your site (or page) is very stripped down. Take out anything that might make it complicated -- like javascript or anything dynamic. You can add functions back in later. We'll start with a page that looks like this as an example: http://www.pinkslipmedia.org/ideacoop It's pretty simple. You have two menus (one won't be dynamic since it is image-based and the other in a sidebar that can readily expand with other blocks) content title, content, images, and a footer. <!--more--> Take out the content (the title text, the body content--including image, and anything in the sidebar and footer). This is what we have left. Picture 22.png Let's switch gears and look at how a Drupal theme is put together. Drupal themes can be created using a variety of theme engines, such as Smarty, XTemplate, PHPTAL, and, the favored Drupal engine, PHPTemplate. They control the PHP syntax used in the template files. We're going to build our's using PHPTemplate. So what does the theme look like? A Drupal theme is made up of a series of files that can be super simple or extend with surprising granularity. Bluemarine's theme might be the simplest you can find: Picture 31.png In there you have: an image file for your logo, a screenshot (which is used by Drupal to identify the theme on your theme selection page), a stylesheet and about five php template files. As you could surmise, block.tpl.php controls how blocks look and comment.tpl.php, comments. Box.tpl.php controls how boxes around element look, the most common example being around comment forms. Node.tpl.php controls the actual content of a page, the node itself. Page.tpl.php is the main one we are concerned about today. This is the skeleton of your site, the bones of it. Let's open one up and see what it looks like. Bluemarine's is simple, but it is made with tables. Let's use a different one. "Clean" theme has a basic page.tpl.php. Screen2 It actually looks quite a bit like our original file, with a few differences. The main one you will see is little snippets of php code. You don't need to know very much php to make this work. Here are some of the basic ones to take note of in here (don't copy these directly because I had to put spaces in the code to make it show!):

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options