P. 1
Building Drupal Theme

Building Drupal Theme

|Views: 27|Likes:
Published by Wisaitat Rakwhan

More info:

Published by: Wisaitat Rakwhan on Oct 09, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

10/09/2011

pdf

text

original

Adolfo G.

 Nasol 
<adolfo@danreb.com>  WWW.DANREB.COM  The Bethel Educational Support and Technology Inc. The Bethel Educational Support and Technology Inc. 

Introduction 
•  What is Drupal theme?  •  What are the required knowledge  •  Drupal theme components  •  Template Variables  •  Creating your own theme  •  Tools and Resources  Tools and Resources •  CSS tips 

What is Drupal theme?  •  A collection of files that define the  presentation layer.  •  Controls the look of your Drupal site.  •  A standard website layout. with a few bits  of PHP code added in certain places.  .  •  Consist of a mix of PHP and web  standards (XHTML and CSS) and standards (XHTML and CSS) and  Graphics.  •  A set of files that work together to present  Drupal site data.

  •  Knowledge of how Drupal works. CSS and some PHP  scripting. .Required Knowledge  •  Designing and creating Drupal  theme requires good knowledge of  HTML.  Knowledge of how Drupal works.  •  Knowledge with image editing  programs for creating theme  graphics or skin.

php  comment.tpl.css  •  logo.png  •  •  •  •  •  •  node.php  script.tpl.js  And of course all your graphics or image files And of course all your graphics or image files  inside your images folder  .php  box.php  block.tpl.tpl.png  •  screenshot.Essential Files of a Drupal Theme  •  themename.info  •  page.tpl.php  template.php  •  style.

Example – Garland Theme  Garland Theme .

 technically without this file. core. description.info  •  A required file in Drupal theme.  •  Documented here ­ http://drupal.info file are  folder and file name for the . style sheets  and features. regions.  •  Defines our theme name.  •  The first file we should create. version. scripts.org/node/171205  Note ­ folder and file name for the .  we don’t have a theme.  •  Theme declaration file.themename.  engine. screenshot.  .info file are spelled the same.

x  engine = phptemplate  regions[left] = Left sidebar  regions[right] = Right sidebar  regions[content] = Content  regions[header] = Header  regions[footer] = Footer  features[] = logo  features[] = search  features[] = favicon  features[] = primary_links  features[] = secondary_links  stylesheets[all][] = styles.0  core = 6.  screenshot = screenshot. in this Note: We can omit some of the entries like regions or features. in this  case Drupal will use default values.  .css  stylesheets[print][] = print.png  version = 1.Content of themename.info  name = Name of your theme  description =  Your cool theme description.css  Note: We can omit some of the entries like regions or features.

info  garland.info .Example ­ garland.

info  themename.info  name = Garland  key  =  value  Machine name  Human  readable name readable name  .Syntax ­ themename.

 no special  characters and spaces but the human readable name can have  spaces and can start with uppercase letter.  .info  themename.info  Some keys use a special syntax with square brackets for building a list of  associated values  regions[left] = Left Sidebar  ;base theme = garland key  =  value  Use semicolon at the start of  any key­value pair to comment  out a line  Machine name  Human  readable name  Note – The machine readable name must be in lower case.Syntax ­ themename.

tpl.tpl. edit  and modify the mark up as we wish but DON’T MODIFY THE  CORE page.Template files – page.php inside the modules/system folder.php into our theme folder .php  Template files  v  A main template file that contains the display  structure of almost all the pages.info file.  v  The core template file can be found in the  modules/system folder.  Note: We can copy the page.  v  The page shell template contains XHTML tags  such as <html>. <head> and <body> plus all  <div> regions listed in the themename.tpl. modules/system .

php  Template files  Directory .tpl.Template files – page.

tpl.Variables – page.php .php  page.tpl.

tpl.php .tpl.php  page.XHTML – page.

Other template or TPL Files  v  node. Can be found in modules/node folder. blog posts. Can be found in  modules/system folder.tpl. which mostly  appear in sidebar regions.php – Template for blocks.  modules/node v comment.  ­ For a complete reference for core templates and suggestions  For a complete reference for core templates and suggestions  visit http://drupal.org/node/190815 . and so  on.tpl.  modules/comment v block. news articles.  can be found in modules/comment folder.php – Templates for comment content.org/node/190815  http://drupal.php – Defines rendering of node content  which in Drupal are pages.tpl.

  v This file start with a PHP opening tag  This file start with a PHP opening tag <?php but the closing PHP  tag is recommended to be omitted.drupal.drupal.Optional files ­  ­ template.  v Holds custom functions and overriding theme functions.php  v This file is not required but it is very useful for PHP programmers.org/api/group/themeable/6 . any other  customization can be done in this file.org/api/group/themeable/6  http://api.  ­ For a reference for Drupal default theme implementations  visit  ­ http://api.  v Contains conditional logic and data processing for the output and  used to hold preprocessors for generating variables before merging  with the markup inside template files.

 The themes can handle all kinds of scenarios. AdaptiveTheme. AdaptiveTheme.  ­ Your theme don’t need to work for everyone and don’t actually  Your theme don’t need to work for everyone and don’t actually need all those cool features. Framework.Creating your own Drupal theme  Question:  ­ Why not use a base starter theme? There are so many  Why not use a base starter theme? There are so many powerful. Looking at the code of those  base starter theme and other various pre­made themes will  base starter theme and other various pre  frustrate and confuse you especially if you are not a PHP programmer. Blueprint.  ­  If you are new to Drupal creating your own theme can save you from  frustration and from getting confuse.  .  flexible and feature rich base starter theme like  base starter theme like Genesis. Fusion  Answer:  ­ Overkill. Zen. Blueprint. it have been designed  to allow you to dynamically add various columns and layout elements. Fusion and etc. Why create our own?  Basic.  Basic. and to  support custom theming for features and modules which you might  for features and modules which you might  not even need. those themes have been created to address the needs of  many people.

Identifying template variables  $logo  $site_slogan  $primary_links  $secondary_links  $site_name  $breadcrumb  $tabs  $search_box  $feed_icons  $footer_message $footer_message  .

Identifying theme regions  theme regions  $header $header  $content  $left  $right  $footer  .

php . if you don’t already have just create a new file and name it  page.ph inside the modules/system folder of Drupal core.php  Ø If you have an existing static layout/design. if you don’t already have just create a new file and name it  . you can copy this from core page. you can copy this from  Starting your page : insert the following bits of code.tpl.Create ­  page. rename your html files to  page. you can simply copy and paste bit’s of code from default  page.tpl.tpl.php and insert the page template variables and regions you want  and insert the page template variables and regions you want  to use in your theme.  modules/system Step 1 ­ Starting your page : insert the following bits of code.php  .tpl.tpl.

 make sure to include $closure  Insert the opening and closing <body> tag.php  Step 2 –  Insert the opening and closing <body> tag. make sure to include before the closing </body> tag.tpl.Create ­  page.  Insert this  $closure – used by some modules that insert Javascript before the closing </body> tag used by some modules that insert .

tpl.  Insert your regions .Create ­  page.info file.php  Step 3 –  Insert all your regions define in your themename.

css ) .tpl.Create ­  page.css ) .  Style your page whatever looks you want it in your CSS file ( style.php  Step 4 –  Insert all template variables you wish to use in your theme in the proper  spots or places where you want it to appear such as the breadcrumb.  Step 5 –  Style your page whatever looks you want it in your CSS file ( style. primary links  pots or places where you want it to appear such as the and secondary links. test your page. etc. search box and feed icons  feed icons.  . debug and enjoy.

com/yslow/  .org/node/313510  drupal.  and Tricks for Drupal Theming: 90 Minute http://acquia.com/community/resources/acquia­tv/tips­  and­tricks­drupal­theming­  ­90­minute­tutorial  Tools  Ø Firebug ­ The most popular and powerful web development tool!  most popular and powerful web development http://getfirebug.Tools and Resources  Tutorials  Ø Convert any website layout or template into a Drupal theme ­ easily!.  template into http://drupal.com/yslow/  ://developer.it for image optimization  for image optimization http://developer.com/community/resources/acquia  acquia.com/  Ø YSlow – I love All Smush.org/node/313510  Ø Tips and Tricks for Drupal Theming: 90 Minute Tutorial .yahoo.yahoo.

org/node/18151  ://drupal.com/drupal6_themer_snippets. this will allow you to insert Drupal template  variables and regions via snippet panel in Dreamweaver.html  ://drupal.Tools and Resources  Ø Configuring Drupal for Dreamweaver – Configuration tips and links  Configuring Drupal for Dreamweaver to all available Dreamweaver extension for Drupal Themer ( Free and  Commercial  extension)  http://drupal. http://drupal.danreb.0 – For Adobe / Macromedia  For Adobe / Macromedia  Dreamweaver users.danreb.com/drupal6_themer_snippets.  ariables and regions via snippet panel in Dreamweaver.html  .org/node/18151  Ø Drupal 6 Themer Snippets 1.

CSS Tips  Technical Demonstration  Ø How Drupal collapse a particular regions if there are no content  inside it?  v  The magic was achieve by combining the following code:  ü Classes inside the body tag <body class="<?php print $body_classes; ?>">  class="<?php print $body_classes; ü Conditional logic of PHP inserted in regions  <?php if (!empty($right)): ?>  <div id="sidebar­right" class="column sidebar">  right" class="column sidebar"> <?php print $right; ?>  </div><!­­ /sidebar­right ­­>  <?php endif; ?>  ü Power of Cascading Style Sheets or CSS definition.  .

  .DANREB.<adolfo@danreb.COM  Mobile: 09195951276  Phone: 046 8530347  Phone: 046 8505195  The Bethel Educational Support and Technology Inc. The Bethel Educational Support and Technology Inc.com>  adolfo@danreb.com>  WWW.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->