This action might not be possible to undo. Are you sure you want to continue?
<email@example.com> WWW.DANREB.COM The Bethel Educational Support and Technology Inc. The Bethel Educational Support and Technology Inc.
• 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 keyvalue 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 premade 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.
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/acquiatv/tips andtricksdrupaltheming 90minutetutorial 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="sidebarright" class="column sidebar"> right" class="column sidebar"> <?php print $right; ?> </div><! /sidebarright > <?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> firstname.lastname@example.org> WWW.
This action might not be possible to undo. Are you sure you want to continue?