+ All Categories
Home > Technology > Converting Static Html To Drupal Theme

Converting Static Html To Drupal Theme

Date post: 15-Jan-2015
Category:
Upload: ryan-cross
View: 36,639 times
Download: 2 times
Share this document with a friend
Description:
How to convert a static html design to a dynamic Drupal theme
Popular Tags:
20
Static HTML to Drupal Theme By Ivan Zugec
Transcript
Page 1: Converting Static Html To Drupal Theme

Static HTML to Drupal Theme

By Ivan Zugec

Page 2: Converting Static Html To Drupal Theme

Static HTML to Drupal Theme.

• Setting up a theme.

• Overriding tpl files.

• Using the devel module.

• Q and A

Page 3: Converting Static Html To Drupal Theme

Static HTML page

Page 4: Converting Static Html To Drupal Theme

Required theme files and folders

1. Images folder

2. Page.tpl.php

3. .info file

4. Style.css

Page 5: Converting Static Html To Drupal Theme

Where do we save themes?

sites/all/themes

Page 6: Converting Static Html To Drupal Theme

.info file for your theme

; $Id$name = rgdesigncore = 6.xengine = phptemplateregions[left] = Left sidebarregions[right] = Right sidebarregions[content] = Contentregions[footer] = Footer

Page 7: Converting Static Html To Drupal Theme

Regions

Page 8: Converting Static Html To Drupal Theme

page.tpl.php file

Page 9: Converting Static Html To Drupal Theme

Page.tpl.php

Replace this:

Page 10: Converting Static Html To Drupal Theme

Page.tpl.phpWith this:

<title><?php print $head_title ?></title>

<?php print $head ?>

<?php print $styles ?>

<?php print $scripts ?>

Page 11: Converting Static Html To Drupal Theme

Page.tpl.php

Replace this:

Page 12: Converting Static Html To Drupal Theme

Page.tpl.phpWith this:

if ($logo || $site_name) { if ($logo) { print '<a href="'. check_url($front_page) .'" title="'. $site_title .'">'; print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" /></a>'; }print '<h1>'. $site_name .'</h1>';}

Page 13: Converting Static Html To Drupal Theme

Page.tpl.phpif ($logo || $site_name) { if ($logo) { print '<a href="'. check_url($front_page) .'" title="'. $site_title .'">'; print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" /></a>'; }print '<h1>'. $site_name .'</h1>';}

<?php if (isset($primary_links)) : ?> <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?><?php endif; ?>

Page 14: Converting Static Html To Drupal Theme

Next regions

Page 15: Converting Static Html To Drupal Theme

Left Side BarsWith this:Replace this:

<?php if ($left): ?> <?php print $left ?><?php endif; ?>

Page 16: Converting Static Html To Drupal Theme

Right Side Bars

With this:

Replace this:

<?php if ($search_box): ?> <div class="block_menu"> <h3>Search</h3><?php print $search_box ?> </div><?php endif; ?><?php if ($right): ?> <?php print $right ?><?php endif; ?>

Page 17: Converting Static Html To Drupal Theme

FooterWith this:Replace this:

<div class="center" id="f"> <?php print $footer ?></div><?php print $closure ?></body>

Page 18: Converting Static Html To Drupal Theme

Content region

Page 19: Converting Static Html To Drupal Theme

Important Variables<?php print $breadcrumb ?>

<?php print $messages ?>

<?php print $tabs ?>

Page 20: Converting Static Html To Drupal Theme

Important Variables<?php print $title ?>

<?php print $help ?>

<?php print $content ?>

<?php print $feed_icons ?>


Recommended