Introduction to Drupal Them Ing

8/9/2019 Introduction to Drupal Them Ing

1/31

Introduction to Drupal Theming

Presented by: Anthony Albertyn


2/31

Tutorial Outline

Part 1: Introduction to Drupal 6theming for beginners (30 minutes)

Part 2: Homework View an online videopresentation on theming (90 minutes)


3/31

Learning Outcomes

Part 1: Awareness of tools that can be used fortheming, understand some Drupal conceptsand the elements of a theme

Part 2: Acquire knowledge to be able to buildyour own custom Drupal 6 theme


4/31

Some Tools of the Trade

Local environment to run DrupalExample: XAMPP or DAMP

http://www.apachefriends.org/en/xampp.htmlhttp://acquia.com/downloads

Drupal 6 installed on a local machine

http://drupal.org
http://www.apachefriends.org/en/xampp.htmlhttp://acquia.com/downloadshttp://drupal.org/http://drupal.org/http://acquia.com/downloadshttp://www.apachefriends.org/en/xampp.html


5/31


Web browser

http://getfirefox.com

Web developer plugins for browser

http://getfirebug.com

http://getwebdeveloper.com
http://getfirefox.com/http://getfirebug.com/http://getwebdeveloper.com/http://getwebdeveloper.com/http://getfirebug.com/http://getfirefox.com/


6/31


Drupal's Devel module

http://drupal.org/project/devel

Your favourite text editor or IDEI use Netbeans with PHP plugin

http://netbeans.org
http://drupal.org/project/develhttp://netbeans.org/http://netbeans.org/http://drupal.org/project/devel


7/31

Drupal Concepts

Theme

Module

Content types

Node

Region

Block Primary Links, Secondary Links, Navigation

Theme Engine


8/31

Drupal Concepts

Drupal Theme

a collection of interrelated files that areresponsible for the look and feel of

the website - (Shreves, 2008) Custom and contributed themes should

reside in the 'sites/all/themes' directory


9/31

Drupal Concepts

Drupal Module

files that contain PHP code and reside in yoursites/all/modules subdirectory of your Drupal

Installation - (VanDyk and Westgate, 2007) A module is software (code) that extends

Drupal features and/or functionality.

http://drupal.org/node/19828
http://drupal.org/node/19828http://drupal.org/node/19828


10/31

Drupal Concepts

Content Types

A single web site could contain many types ofcontent, such as informational pages, news

items, polls, blog postshttp://drupal.org/node/21947

A content type in Drupal (example: 'page')defines default settings for a specific type ofweb content


11/31

Drupal Concepts

Nodes

A node in Drupal is the generic term for a pieceof content on your web site

http://drupal.org/node/19828 each item of content is called a node, and each

node belongs to a single content typehttp://drupal.org/node/21947

Comments and blocks are not nodes
http://drupal.org/node/19828http://drupal.org/node/21947http://drupal.org/node/21947http://drupal.org/node/19828


12/31

Drupal Concepts

Regions

Pages on your Drupal site are laid out inregions, which can include the header, footer,

sidebars, and main content section; your thememay define additional regionshttp://drupal.org/node/19828


13/31

Drupal Concepts

Blocks

Blocks are discrete chunks of informationthat are displayed in the regions of

your site's pageshttp://drupal.org/node/19828

Blocks can contain menus, output frommodules or other information

Blocks are administered in the 'admin area'administer site building blocks


14/31

Types of Drupal menus

Primary and Secondary Links

Primary and Secondary links are built by siteadministrators http://drupal.org/node/19828

and are displayed in regions by a themeNavigation

Navigation is the catch-all menu that contains

your administration menus, as well as linkssupplied by modules on your site.http://drupal.org/node/19828


15/31

Concepts

Theme Engine

A theme engine is a set of scripts thatinterprets code and makes theming a site

easier. This takes the dynamically generatedcontent and outputs it to HTMLhttp://drupal.org/node/937#t

PHPTemplate is Drupal's default theme engineOther theme engines are PHPTal and Smartyhttp://drupal.org/project/Theme%20engines
http://drupal.org/node/937#thttp://drupal.org/project/Theme%20engineshttp://drupal.org/project/Theme%20engineshttp://drupal.org/node/937#t


16/31

Further info on Drupal Concepts

Drupal Terminology


Acronyms and expressions used by drupal.org



17/31

Theme Options

Use one of the existing themes that come withyour Drupal installation

Install a contributed theme http://drupal.org

Adapt an instance of an existing theme Build your own theme using a starter theme

like Zen or Fusion

http://drupal.org/project/zenhttp://drupal.org/project/fusion

Create your own custom theme
http://drupal.org/http://drupal.org/project/zenhttp://drupal.org/project/fusionhttp://drupal.org/project/fusionhttp://drupal.org/project/zenhttp://drupal.org/


18/31

Where to Save Your Themes

Save custom and contributed themes in thefollowing Drupal directory:

sites/all/themes/

If we created a custom theme named'Drupalcambs', we would need to add the

theme elements to the following directorysites/all/themes/drupalcambs/


19/31

Where to Enable Your Theme

Change the admin theme, for example from'system' to 'Garland', so that it is different to thefront-end theme:site configuration admin theme

Enable your theme and set it as thedefault themeadminister site building themes


20/31

Theme Elements

Required

themename.info

page.tpl.php

Optional

style.css block.tpl.php, node.tpl.php

template.php


21/31

Theme Elements

Optional

template.php

logo.png

screenshot.png

Images folder

See 'Anatomy of a Theme'



22/31

Theme .info file

Describes your theme to Drupal

Filename must be lowercase and be the nameof your theme, example: drupacambs.info

Should contain at least the following 4 x lines:name = Your Human Readable Theme Namedescription = Description of your themecore = 6.xengine = phptemplate



23/31

Theme .info File

Can point Drupal to your style sheet if it is notnamed style.css or if it is in a subdirectorystylesheets[all][] = yourstylesheetname.css

Can define your own custom regions, exampleregion [banner] = Page Bannerregion [adsense] = Google Adsense

If you define any regions in the .info file then all5 x default theme regions will be removed


24/31

What are the Default Regions

If you don't specify any regions in the .info filethen you will have access to the followingdefault regions for your theme:Header, Left Sidebar, Content, Right Sidebarand Footer

These variables will then be available to your

template files: $header, $left, $content,$right, $footer


25/31

page.tpl.php file

Defines the structure of your main webpages and contains

Your web page html code

Dynamic links to CSS files and JavaScript files Dynamic Drupal variables

Can include PHPTemplate syntax


26/31

Example PHPTemplate syntax


27/31

Theme Elements (continued)

style.css contains your theme's CSS template.php may contain function overrides

logo.png is your site's logo

screenshot.png will display a thumbnail of yourtheme in the admin area (150px by 90px)


28/31

Some Tips

Rebuild the Cache to see changes to yourtheme after editing the .info file and .tpl.php filesadmin site configuration performancethen click clear cashed data

Change your admin theme to a different themeadmin site configuration admin theme

Turn on CSS compression when you have

finished creating your themeadmin site configuration performance


29/31

Tutorial Part 2: Homework

Please view this excellent introduction video(90 minutes) that demonstrates how to build acustom Drupal 6 Theme

http://acquia.com/community/resources/acquia-tv/tips-and-tricks-drupal-theming-90-minute-tutorial

PS. There will be no test or exam, but I will askyou questions the next time I see you! ;-)


30/31

About Drupalcambs

We are a Regional Drupal Group and havemonthly meetings in Cambridge, UK

RSVP for meetups at

http://meetup.com/drupalcambs We have groups on LinkedIn and Facebook,

search for drupalcambs

We have an official group East Anglia UK onhttp://groups.drupal.org

We also have a home on http://drupal.org.uk
http://meetup.com/drupalcambshttp://groups.drupal.org/http://drupal.org.uk/http://drupal.org.uk/http://groups.drupal.org/http://meetup.com/drupalcambs


31/31

References

Drupal 6 Themeswww.packtpub.com

Pro Drupal Developmentwww.apress.com

http://drupal.org

http://acquia.com/community/resources

www.lullabot.com/podcast
http://www.packtpub.com/http://www.apress.com/http://drupal.org/http://acquia.com/community/resourceshttp://www.lullabot.com/podcasthttp://www.lullabot.com/podcasthttp://acquia.com/community/resourceshttp://drupal.org/http://www.apress.com/http://www.packtpub.com/

Documents

Introduction to Drupal Them Ing