P. 1
Introduction to Drupal Them Ing

Introduction to Drupal Them Ing

|Views: 4|Likes:
Published by miller_ryan

More info:

Published by: miller_ryan on Nov 28, 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

12/20/2014

pdf

text

original

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

org .org/en/xampp.apachefriends.Some Tools of the Trade ● Local environment to run Drupal Example: XAMPP or DAMP http://www.html http://acquia.com/downloads ● Drupal 6 installed on a local machine http://drupal.

com ● Web developer plugins for browser http://getfirebug.Some Tools of the Trade ● Web browser http://getfirefox.com .com http://getwebdeveloper.

org .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.

Navigation Theme Engine .Drupal Concepts ● ● ● ● ● ● ● ● Theme Module Content types Node Region Block Primary Links. Secondary Links.

2008) Custom and contributed themes should reside in the 'sites/all/themes' directory ● .(Shreves.Drupal Concepts Drupal Theme ● “a collection of interrelated files that are responsible for the look and feel of the website” .

” http://drupal.(VanDyk and Westgate. 2007) “A module is software (code) that extends Drupal features and/or functionality.org/node/19828 ● .Drupal Concepts Drupal Module ● “files that contain PHP code and reside in your sites/all/modules subdirectory of your Drupal Installation” .

polls. blog posts” http://drupal. news items.org/node/21947 A content type in Drupal (example: 'page') defines default settings for a specific type of web content ● .Drupal Concepts Content Types ● “A single web site could contain many types of content. such as informational pages.

and each node belongs to a single content type” http://drupal.Drupal Concepts Nodes ● “A node in Drupal is the generic term for a piece of content on your web site” http://drupal.org/node/21947 Comments and blocks are not nodes ● ● .org/node/19828 “each item of content is called a node.

and main content section. sidebars. which can include the header.Drupal Concepts Regions “Pages on your Drupal site are laid out in regions. your theme may define additional regions” http://drupal. footer.org/node/19828 .

output from modules or other information Blocks are administered in the 'admin area' administer → site building → blocks ● ● .org/node/19828 Blocks can contain menus.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 and are displayed in regions by a theme Navigation “Navigation is the catch-all menu that contains your administration menus.org/node/19828 ● .Types of Drupal menus Primary and Secondary Links ● “Primary and Secondary links are built by site administrators” http://drupal.” http://drupal. as well as links supplied by modules on your site.

Concepts Theme Engine ● “A theme engine is a set of scripts that interprets code and makes theming a site easier.org/project/Theme%20engines ● . 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 http://drupal.org/node/302232 .Further info on Drupal Concepts ● Drupal Terminology http://drupal.org/node/937 ● Acronyms and expressions used by drupal.

org/project/fusion Create your own custom theme ● ● ● ● .Theme Options ● Use one of the existing themes that come with your Drupal installation Install a contributed theme http://drupal.org/project/zen http://drupal.org Adapt an instance of an existing theme Build your own theme using a starter theme like Zen or Fusion http://drupal.

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/ .

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 ● .Where to Enable Your Theme ● Change the admin theme.

info page.css block.php Optional style.php.tpl.tpl.tpl.Theme Elements Required ● ● themename.php template. node.php ● ● ● ● .

org/node/171194 .png screenshot.png Images folder See 'Anatomy of a Theme' http://drupal.php logo.Theme Elements Optional ● ● ● ● template.

x engine = phptemplate http://drupal.Theme .info Should contain at least the following 4 x lines: name = Your Human Readable Theme Name description = Description of your theme core = 6.org/node/171205 ● . example: drupacambs.info file ● ● Describes your theme to Drupal Filename must be lowercase and be the name of your theme.

info file then all 5 x default theme regions will be removed ● .css Can define your own custom regions.css or if it is in a subdirectory stylesheets[all][] = yourstylesheetname.info File ● Can point Drupal to your style sheet if it is not named style. example region [banner] = Page Banner region [adsense] = Google Adsense If you define any regions in the .Theme .

$left. Content. Right Sidebar and Footer These variables will then be available to your template files: $header. $footer ● . Left Sidebar. $content. $right.info file then you will have access to the following default regions for your theme: Header.What are the Default Regions ● If you don't specify any regions in the .

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 .page.tpl.

?> </div> <?php edif.Example PHPTemplate syntax <?php if ($left): ?> <div id=”sidebar-left” class=”sidebar”> <?php print $left. ?> .

php may contain function overrides logo.png will display a thumbnail of your theme in the admin area (150px by 90px) .png is your site's logo screenshot.css contains your theme's CSS template.Theme Elements (continued) ● ● ● ● style.

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 ● ● .Some Tips ● Rebuild the Cache to see changes to your theme after editing the .info file and .tpl.

but I will ask you questions the next time I see you! .-) . There will be no test or exam.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.

com/drupalcambs We have groups on LinkedIn and Facebook.org.uk ● ● ● ● . search for “drupalcambs” We have an official group “East Anglia UK” on http://groups. UK RSVP for meetups at http://meetup.About “Drupalcambs” ● We are a Regional Drupal Group and have monthly meetings in Cambridge.drupal.org We also have a home on http://drupal.

lullabot.org http://acquia.References ● Drupal 6 Themes www.com Pro Drupal Development www.packtpub.apress.com/community/resources www.com http://drupal.com/podcast ● ● ● ● .

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)//-->