introduction to drupal them ing
TRANSCRIPT
-
8/9/2019 Introduction to Drupal Them Ing
1/31
Introduction to Drupal Theming
Presented by: Anthony Albertyn
-
8/9/2019 Introduction to Drupal Them Ing
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)
-
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
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 -
8/9/2019 Introduction to Drupal Them Ing
5/31
Some Tools of the Trade
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/ -
8/9/2019 Introduction to Drupal Them Ing
6/31
Some Tools of the Trade
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 -
8/9/2019 Introduction to Drupal Them Ing
7/31
Drupal Concepts
Theme
Module
Content types
Node
Region
Block Primary Links, Secondary Links, Navigation
Theme Engine
-
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
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 -
8/9/2019 Introduction to Drupal Them Ing
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
http://drupal.org/node/21947http://drupal.org/node/21947 -
8/9/2019 Introduction to Drupal Them Ing
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 -
8/9/2019 Introduction to Drupal Them Ing
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
http://drupal.org/node/19828http://drupal.org/node/19828 -
8/9/2019 Introduction to Drupal Them Ing
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
http://drupal.org/node/19828http://drupal.org/node/19828 -
8/9/2019 Introduction to Drupal Them Ing
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
http://drupal.org/node/19828http://drupal.org/node/19828http://drupal.org/node/19828http://drupal.org/node/19828 -
8/9/2019 Introduction to Drupal Them Ing
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 -
8/9/2019 Introduction to Drupal Them Ing
16/31
Further info on Drupal Concepts
Drupal Terminology
http://drupal.org/node/937
Acronyms and expressions used by drupal.org
http://drupal.org/node/302232
http://drupal.org/node/937http://drupal.org/node/302232http://drupal.org/node/302232http://drupal.org/node/937 -
8/9/2019 Introduction to Drupal Them Ing
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/ -
8/9/2019 Introduction to Drupal Them Ing
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/
-
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
20/31
Theme Elements
Required
themename.info
page.tpl.php
Optional
style.css block.tpl.php, node.tpl.php
template.php
-
8/9/2019 Introduction to Drupal Them Ing
21/31
Theme Elements
Optional
template.php
logo.png
screenshot.png
Images folder
See 'Anatomy of a Theme'
http://drupal.org/node/171194
http://drupal.org/node/171194http://drupal.org/node/171194 -
8/9/2019 Introduction to Drupal Them Ing
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
http://drupal.org/node/171205
http://drupal.org/node/171205http://drupal.org/node/171205 -
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
26/31
Example PHPTemplate syntax
-
8/9/2019 Introduction to Drupal Them Ing
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)
-
8/9/2019 Introduction to Drupal Them Ing
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
-
8/9/2019 Introduction to Drupal Them Ing
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! ;-)
-
8/9/2019 Introduction to Drupal Them Ing
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 -
8/9/2019 Introduction to Drupal Them Ing
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/