HTML for Drupal: The family of "Tipple-fip"s

Getting Started

Navigate to sites/all/themes/mytheme

1. Store your html file as page.tpl.php
2. Store your css file as style.css

Next we're going to modify the page.tpl.php ("page tipple-fip") with PHP code embedded in amongst the HTML. Each PHP statement is wrapped like this: <?php .... ?> with the ... holding the commands as per the orange code below. All of your static content should be replaced by a php command.

General notes on PHP:

• print as a PHP statement means output to the current device - this will be the screen so it is how you add data to the page.
• $ indicates a variable name. Drupal sets variables and by putting the variable name in there instead of the current value, Drupal can change that value when required without recoding the page.

Page.tpl.php is the master page

• This php file is responsible for all the pages in Drupal. Anything dynamic is added to this page with print variables. The page is styled with the appropriate css file
• In order to display the content for a region, add <?php print $region-name ?> in the appropriate area
• If you're putting an img tag in your code, use print $directory/filename.jpg to get the right path (this takes you to the same folder that page.tpl.php is in. If you have subfolders under the main directory, add those:
  print $directory/images/filename.jpg
• Always include these in your header:
  <title><?php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
• Always put this line just before the </body> tag:
  <?php print $closure ?>
• Always put in your content areas:
  <?php print $content ?>
  $left
  $right
  and any other regions from your .info file
• Other commands:
  primary navigation: <?php print theme('links', $primary_links,
  array('class' => 'links primary-links')); ?> (This looks different because it's an array rather than a single variable)
  $breadcrumbs
  $logo to allow logo to be uploaded from admin page
  $search_box if you have search enabled in theme admin
  $messages for status and error messages that Drupal generates
• Conditional logic
  <?php if (!empty($left)): ?>
  <div id="sidebar-left" class="column sidebar">
  <?php print $left; ?>
  </div> <!-- /sidebar-left -->
  <?php endif; ?> this reads "if the left sidebar is NOT empty, then add a div with a class and put in the content. If it is empty, skip it."
• For complete list see here

Other "tipple-fips"

Particularly useful:

• node.tpl.php - for styling content areas
• block.tpl.php - for styling blocks
• comment.tpl.php - for styling comments

The CSS

Format: Text (CSS)

You can have more than one - make sure the primary is called style.css, then if you have additional make sure they're added to mytheme.info.