Adolfo G. Nasol The Bethel Educational Support and Technology Inc.

Size: px

Start display at page:

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

Blake Hodges
8 years ago
Views:

1 Adolfo G. Nasol The Bethel Educational Support and Technology Inc.

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

3 What is Drupal theme? A collection of files that define the presentation layer. A set of files that work together to present Drupal site data. 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 Graphics.

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

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

tpl.php block.tpl.php box.tpl.php template.php script.

6 Example Garland Theme

7 themename.info A required file in Drupal theme. Theme declaration file, technically without this file, we don t have a theme. The first file we should create. Defines our theme name, description, version, core, engine, screenshot, regions, scripts, style sheets and features. Documented here Note folder and file name for the.info file are spelled the same.

8 Content of themename.info name = Name of your theme description = Your cool theme description. screenshot = screenshot.png version = 1.0 core = 6.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.css stylesheets[print][] = print.css Note: We can omit some of the entries like regions or features, in this case Drupal will use default values.

9 Example garland.info

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

11 Syntax 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 Machine name key = value Human readable name Use semicolon at the start of any key value pair to comment out a line Note The machine readable name must be in lower case, no special characters and spaces but the human readable name can have spaces and can start with uppercase letter.

= Left Sidebar ;base theme = garland Machine name key = value Human readable name Use semicolon at the start of

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

themename.info file. The core template file can be found in the modules/system folder. Note: We can copy the page.tpl.

13 Template files page.tpl.php Directory

14 Variables page.tpl.php

15 XHTML page.tpl.php

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

Can be found in modules/node folder. comment.tpl.

17 Optional files template.php This file is not required but it is very useful for PHP programmers. 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. Holds custom functions and overriding theme functions, any other customization can be done in this file. This file start with a PHP opening tag <?php but the closing PHP tag is recommended to be omitted. For a reference for Drupal default theme implementations visit

markup inside template files. Holds custom functions and overriding theme functions, any other customization can be done in this file.

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

Answer: Overkill, those themes have been created to address the needs of many people.

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

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

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

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

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

24 Create page.tpl.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, primary links and secondary links, search box and feed icons, etc. Step 5 Style your page whatever looks you want it in your CSS file ( style.css ). test your page, debug and enjoy.

25 Tools and Resources Tutorials Convert any website layout or template into a Drupal theme easily!. Tips and Tricks for Drupal Theming: 90 Minute Tutorial. acquia.com/community/resources/acquia tv/tipsand tricks drupal theming 90 minute tutorial Tools Firebug The most popular and powerful web development tool! YSlow I love All Smush.it for image optimization

26 Tools and Resources Configuring Drupal for Dreamweaver Configuration tips and links to all available Dreamweaver extension for Drupal Themer ( Free and Commercial extension) Drupal 6 Themer Snippets 1.0 For Adobe / Macromedia Dreamweaver users, this will allow you to insert Drupal template variables and regions via snippet panel in Dreamweaver.

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

28 Mobile: Phone: Phone: The Bethel Educational Support and Technology Inc.

Designing for Drupal. John Albin Wilkins

Designing for Drupal. John Albin Wilkins Designing for Drupal John Albin Wilkins Who is this guy anyway? Real Name: John Albin Wilkins Drupal Nick: JohnAlbin I ve been writing HTML since 1994. I ve been developing CSS Layouts since 2001 ALA: