Introduction to Drupal Theming

stovenumerousInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

53 εμφανίσεις



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
<?php if ($left): ?>
<div id=”sidebar-left” class=”sidebar”>
<?php print $left; ?>
</div>
<?php edif; ?>


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/acquia-
tv/tips-and-tricks-drupal-theming-90-minute-
tutorial

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