theming, understand some Drupal concepts and the elements of a theme. ○ Part
2: Acquire ... Page 7 ... Custom and contributed themes should reside in the ...
Introduction to Drupal Theming Presented by: Anthony Albertyn
Tutorial Outline ●
●
Part 1: Introduction to Drupal 6 theming for beginners (30 minutes) Part 2: Homework – View an online video presentation on theming (90 minutes)
Learning Outcomes ●
●
Part 1: Awareness of tools that can be used for theming, understand some Drupal concepts and the elements of a theme Part 2: Acquire knowledge to be able to build your own custom Drupal 6 theme
Some Tools of the Trade ●
Local environment to run Drupal Example: XAMPP or DAMP http://www.apachefriends.org/en/xampp.html http://acquia.com/downloads
●
Drupal 6 installed on a local machine http://drupal.org
Some Tools of the Trade ●
Web browser http://getfirefox.com
●
Web developer plugins for browser http://getfirebug.com http://getwebdeveloper.com
Some Tools of the Trade ●
Drupal's Devel module http://drupal.org/project/devel
●
Your favourite text editor or IDE I use Netbeans with PHP plugin http://netbeans.org
Drupal Concepts ●
Theme
●
Module
●
Content types
●
Node
●
Region
●
Block
●
Primary Links, Secondary Links, Navigation
●
Theme Engine
Drupal Concepts Drupal Theme ●
●
“a collection of interrelated files that are responsible for the look and feel of the website” - (Shreves, 2008) Custom and contributed themes should reside in the 'sites/all/themes' directory
Drupal Concepts Drupal Module ●
●
“files that contain PHP code and reside in your sites/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
Drupal Concepts Content Types ●
●
“A single web site could contain many types of content, such as informational pages, news items, polls, blog posts” http://drupal.org/node/21947 A content type in Drupal (example: 'page') defines default settings for a specific type of web content
Drupal Concepts Nodes ●
●
●
“A node in Drupal is the generic term for a piece of 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 type” http://drupal.org/node/21947 Comments and blocks are not nodes
Drupal Concepts Regions “Pages on your Drupal site are laid out in regions, which can include the header, footer, sidebars, and main content section; your theme may define additional regions” http://drupal.org/node/19828
Drupal Concepts Blocks ●
●
●
“Blocks are discrete chunks of information that are displayed in the regions of your site's pages” http://drupal.org/node/19828 Blocks can contain menus, output from modules or other information Blocks are administered in the 'admin area' administer → site building → blocks
Types of Drupal menus Primary and Secondary Links ●
“Primary and Secondary links are built by site administrators” http://drupal.org/node/19828 and are displayed in regions by a theme Navigation
●
“Navigation is the catch-all menu that contains your administration menus, as well as links supplied by modules on your site.” http://drupal.org/node/19828
Concepts Theme Engine ●
●
“A theme engine is a set of scripts that interprets code and makes theming a site easier. This takes the dynamically generated content and outputs it to HTML” http://drupal.org/node/937#t PHPTemplate is Drupal's default theme engine Other theme engines are PHPTal and Smarty http://drupal.org/project/Theme%20engines
Further info on Drupal Concepts ●
Drupal Terminology http://drupal.org/node/937
●
Acronyms and expressions used by drupal.org http://drupal.org/node/302232
Theme Options ●
Use one of the existing themes that come with your 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/zen http://drupal.org/project/fusion Create your own custom theme
Where to Save Your Themes ●
Save custom and contributed themes in the following Drupal directory: sites/all/themes/
●
If we created a custom theme named 'Drupalcambs', we would need to add the theme elements to the following directory sites/all/themes/drupalcambs/
Where to Enable Your Theme ●
●
Change the admin theme, for example from 'system' to 'Garland', so that it is different to the front-end theme: site → configuration → admin theme Enable your theme and set it as the default theme administer → site building → themes
Theme Elements Required ●
themename.info
●
page.tpl.php
●
Optional
●
style.css
●
block.tpl.php, node.tpl.php
●
template.php
Theme Elements Optional ●
template.php
●
logo.png
●
screenshot.png
●
Images folder See 'Anatomy of a Theme' http://drupal.org/node/171194
Theme .info file ● ●
●
Describes your theme to Drupal Filename must be lowercase and be the name of your theme, example: drupacambs.info Should contain at least the following 4 x lines: name = Your Human Readable Theme Name description = Description of your theme core = 6.x engine = phptemplate http://drupal.org/node/171205
Theme .info File ●
●
Can point Drupal to your style sheet if it is not named style.css or if it is in a subdirectory stylesheets[all][] = yourstylesheetname.css Can define your own custom regions, example region [banner] = Page Banner region [adsense] = Google Adsense If you define any regions in the .info file then all 5 x default theme regions will be removed
What are the Default Regions ●
●
If you don't specify any regions in the .info file then you will have access to the following default regions for your theme: Header, Left Sidebar, Content, Right Sidebar and Footer These variables will then be available to your template files: $header, $left, $content, $right, $footer
page.tpl.php file Defines the structure of your main web pages and contains ●
Your web page html code
●
Dynamic links to CSS files and JavaScript files
●
Dynamic Drupal variables
●
Can include PHPTemplate syntax
Example PHPTemplate syntax
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 your theme in the admin area (150px by 90px)
Some Tips ●
●
●
Rebuild the Cache to see changes to your theme after editing the .info file and .tpl.php files admin → site configuration → performance then click “clear cashed data” Change your admin theme to a different theme admin → site configuration → admin theme Turn on CSS compression when you have finished creating your theme admin → site configuration → performance
Tutorial Part 2: Homework ●
Please view this excellent introduction video (90 minutes) that demonstrates how to build a custom Drupal 6 Theme http://acquia.com/community/resources/acquiatv/tips-and-tricks-drupal-theming-90-minutetutorial
●
PS. There will be no test or exam, but I will ask you questions the next time I see you! ;-)
About “Drupalcambs” ●
●
●
●
●
We are a Regional Drupal Group and have monthly 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” on http://groups.drupal.org We also have a home on http://drupal.org.uk
References ●
●
Drupal 6 Themes www.packtpub.com Pro Drupal Development www.apress.com
●
http://drupal.org
●
http://acquia.com/community/resources
●
www.lullabot.com/podcast
