Date post: | 28-Jan-2015 |
Category: |
Investor Relations |
Upload: | erik-baldwin |
View: | 111 times |
Download: | 0 times |
Theming Drupal
An Introduction to the Basics
6+ some advanced stuff too, but that’s at the end
04/10/2023Presented By: Erik Baldwin 2
Before we begin …
What you need to know:- HTML/XHTML
- It helps to know what content is printed where- CSS
- Enough to edit rules, changes backgrounds, add images, etc.- Box Model
- Margin, border & padding and how they work together- Basic PHP
- An understanding of syntax and how PHP functions operate in general
What you might want to know:- jQuery
- For that little extra; Flash® is overkill for an image slideshow- How to setup a Local Development Environment (LAMP)- Version Control
- Subversion or GIT are commonly used with Drupal - More PHP?
04/10/2023Presented By: Erik Baldwin 3
Drupal theme design principles
- Grid System- 960px or 1024px wide
- 5 core regions- Header- Left- Right- Content- Footer
- Text & Image Alignment- A content layout built for the
web- Design your theme for the site’s content, not vice-versa!
04/10/2023Presented By: Erik Baldwin 4
Theming Caveats… ‘cause it can’t always be easy.
Don’t hack core!
Don’t hack modules!
Don’t hack contrib themes!
The output from all of these is
THEMABLE!
Intercept , Override [template.php] & Sub-Theme [foo.tpl.php]
04/10/2023Presented By: Erik Baldwin 5
Where to start…?“To be Jedi is to face the truth, and choose.”
Mockups
Static HTML/CSS
Write *.info file
Create Custom Templates (foo.tpl.php)
Create Styles (*.css)
Write Custom Scripts (*.js)
Copy *.info file, Add “Base Theme”
Override Existing Templates
Override Styles
Extend Scripts
Cust
om T
hem
e Sub-Theme
04/10/2023Presented By: Erik Baldwin 6
Intro to Theming Drupal 6
Part I: The anatomy of a theme
Part II: Basic build from Static HTML & CSS
Part III: Create a Fusion Sub-Theme (demo)
Part IV: Tools & Tricks (demo)
04/10/2023Presented By: Erik Baldwin 7
Part I: Drupal Theme Anatomy
AT-AT Anatomy
sites/all/themes/foo
.info File
Theming Engine
Template Language
PHP Templates
Styles & Images
Scripts
04/10/2023Presented By: Erik Baldwin 8
How does Drupal Do It?“No! Try not. Do, or do not. There is no try.”
Browser gets info from database
Browser checks data against
Drupal’s Output filters
Server inserts info into core
templates
Theme Engine merges
template files with
template.php
Browser displays
formated HTML
04/10/2023Presented By: Erik Baldwin 9
Drupal 6 Theme Stack
PHP Theme PHP Template Theme
Don’t Hack These!
04/10/2023Presented By: Erik Baldwin 10
Separating Design & Logic
• .info file defines your theme• More templates = more control over theme components• phptemplate_variables() are your friends• Theme inheritance makes sub theming and overriding possible• Pure CSS themes are absolutely possible.
04/10/2023Presented By: Erik Baldwin 11
Drupal’s Theme EnginePHPTemplate ships with core … no need to install it
PHPTemplate allows themers to insert PHP into their xHTML markup so that predefined variables can be rendered in the browser.
Some info about PHPTemplate• Written for Drupal by Adrian Rossouw• Uses foo.tpl.php files to theme Drupal’s theme_foo() functions• Themable functions can be found on api.drupal.org• You could write an entire theme in PHP, but why?• PHPTemplate is the most commonly used theming engine for CMS’s
<?php print $primary_links; ?>
04/10/2023Presented By: Erik Baldwin 12
How PHP Generates Dynamic Content
Dru
pal C
ore
PHPTemplate
Drupal MySQL Database(views is essentially a query builder)
Web
Bro
wse
r
HTMLPage
HTMLPage
HTMLPage
<?php ?>
<?php ?>
<?php ?>
<?php ?>
04/10/2023Presented By: Erik Baldwin 13
Template.phpWhat am I supposed to do with this?!
• Template.php holds the conditional logic and data processing required for output
• It is where you create your preprocessors for generating variables before they merge with *.tpl.php file – each individual template file (.tpl.php) gets assigned to regions
• This is also where you override existing theme functions and create other raw output customization (example below)
function theme_name_preprocess_page(&$vars) {//override for mission statement to appear on every page, not just <front>$vars['mission'] = filter_xss_admin (theme_get_setting('mission'));//creates raw output for $foo that can be printed in any *.tpl.php$vars[‘foo’] = t(‘FooBar’);}
04/10/2023Presented By: Erik Baldwin 14
What is a Preprocessor Function for?
• Setup variables to be placed within the template (.tpl.php) files. Plain theme functions do not interact with preprocessors
• Use them whenever overriding CSS and editing xHTML markup in Template files just isn’t enough!
04/10/2023Presented By: Erik Baldwin 15
Processing Order of Preprocessor Functions
Theme
ThemeEngine
Modules
Core$template_preprocess()
$template_preprocess_$hook
$modulename_preprocess()
$modulename_preprocess_$hook()
phptemplate_preprocess()
phptemplate_preprocess_$hook()
$theme_preprocess()
$theme_preprocess_$hook
04/10/2023Presented By: Erik Baldwin 16
So, what do I do to control dynamic content display?
Template Files
Output is printed with<?php print $primary_links; ?>
Easiest to use if you plan on using a lot of xHTML markup.
Theme Functions
Build a single output $var and return it$output = ‘output’;
Easiest to use if you need to build control structures and loops.
04/10/2023Presented By: Erik Baldwin 17
Common Template Files
04/10/2023Presented By: Erik Baldwin 18
Each Template Handles a Region
… quicker, easier, more seductive
• page.tpl.php – Entire Page
• front-page.tpl.php – Front Page Only
• block.tpl.php – Blocks
• comment.tpl.php – Comments
• forum.tpl.php – Forums
04/10/2023Presented By: Erik Baldwin 19
Template HierarchySpecific before general
Home Pagepage-front.tpl.phppage.tpl.php
Pagespage-node-edit.tpl.phppage-node-1.tpl.phppage-node.tpl.phppage.tpl.php
Nodesnode-type.tpl.phpnode.tpl.php
Commentscomment.tpl.php
Blocksblock-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.phpblock.tpl.php
04/10/2023Presented By: Erik Baldwin 20
Typical .info file
Metadata
name = internal theme name
Description = try to make this short; no more than 400 characters
Engine = phptemplate
Drupal version = 6.x
Screenshot = theme screenshot
CSS stylesheets
Scripts
Regions
Features
04/10/2023Presented By: Erik Baldwin 21
The Screenshot!
Every theme should have a screenshot! Even if it isn’t actually a screenshot of the theme.
• Gives your users/admins a preview of your theme
• See drupal.org screenshot guidelines if you want to contribute your theme.
04/10/2023Presented By: Erik Baldwin 22
But what about …
Do I really need all of these files to create a theme?• No – all you need is .info, the rest overrides
Drupal’s default ($left, $right, $header, $content, $footer)
Should I hack a contributed theme?• No – find a suitable theme to inherit from (sub-
theming)
04/10/2023Presented By: Erik Baldwin 23
Part II: Building a Theme from Static xHTML/CSS
Looking at the Mockup to the right, lets define our regions.
Core Regions Available
Mockup Regions Present
$header$left$content$right$footer
$header$content$right$footer
Most contributed Drupal themes will utilize the core regions, if not more. Custom regions are created in the themes .info file and printed in the page template.
04/10/2023Presented By: Erik Baldwin 24
Head of page.tpl.phpHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta name="Description" content="Information architecture, Web Design, Web Standards." /><meta name="Keywords" content="your, keywords" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="Distribution" content="Global" /><meta name="Author" content="Erwin Aligam - [email protected]" /><meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="images/NewHorizon.css" type="text/css" />
<title>New Horizon</title></head>
page.tpl.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title><?php print $head_title; ?></title> <?php print $head; ?> <?php print $styles; ?> <?php print $scripts; ?></head>
04/10/2023Presented By: Erik Baldwin 25
Head $variables
• $head_title – a modified version of the head title for use in the TITLE tag.
• $head – Markup for the head section.– Meta tags– Keyword tags– etc …
• $styles – loads all required CSS stylesheets specified by module and theme .info files.
• $scripts – Script tags are necessary to load JavaScript files and settings for the page.
04/10/2023Presented By: Erik Baldwin 26
Header RegionHTML
<!-- navigation starts here --><div id="nav“> <ul> <li id="current"><a href="index.html">Home</a></li> <li><a href="index.html">News</a></li> <li><a href="index.html">Downloads</a></li> <li><a href="index.html">Support</a></li> <li><a href="index.html">About</a></li> </ul></div><!-- header starts here <div id="header“> <div id="clouds"></div> <h1 id="logo-text"><a href="index.html" title="">new horizon</a></h1><p id="slogan">Put your site slogan here...</p></div>
Page.tpl.php <div id="header-region" class="clear-block"><?php print $header; ?> <div id="wrapper"> <div id="container" class="clear-block"> <div id="header"> <div id="logo-floater"><?php if ($logo || $site_title) { print '<h1><a href="'. check_url($front_page) .'" title="'. $site_title .'">'; if ($logo) { print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />'; } print $site_name .'</a></h1>'; }?></div> <?php if (isset($primary_links)) : ?> <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?> <?php endif; ?> </div> <!-- /header -->
04/10/2023Presented By: Erik Baldwin 27
Header $Variables$logo: The path to the linked logo image that is defined in the theme’s configuration.$site_name: The name of the site. This value will be empty when display has been disabled in theme settings(features[] = name).$front_page: The URL of the front page. Use this instead of $base_path to link to the front page. This variable includes the language domain or prefix.$primary_links (array): An Array containing the primary navigation links for the site, if they have been configured.$secondary_links (array): An array containing secondary navigation links for the site, if they have been configured.
04/10/2023Presented By: Erik Baldwin 28
Sidebar RegionHTML
<div id="sidebar" > <h3>Search Box</h3> <form action="#" class="searchform“> <p><input name="search_query" class="textbox" type="text" /><input name="search" class="button" value="Search" type="submit" /></p></form> <h3>Sidebar Menu</h3> <ul class="sidemenu“> <li><a href="index.html">Home</a></li> <li><a href="#TemplateInfo">TemplateInfo</a></li> <li><a href="#SampleTags">Sample Tags</a></li> <li><a href=“<?php print $base_path ?>">More Templates...</a> </li> <li><a href=“?aff=ealigam">Premium Templates</a></li> </ul> <h3>Sponsors</h3> <ul class="sidemenu“> <li><a href=“r.cgi?287326">Dreamhost</a></li> <li><a href=“?aff=ealigam">4templates</a></li> <li><a href=“?aff=ealigam">TemplateMonster</a></li> <li><a href=“partner/114283">Fotolia.com</a></li> <li><a href=“res338619">Dreamstime.com</a></li> <li><a href=“3cgv2m">Text-Link-Ads</a></li> </ul></div>
Page.tpl.php <div id=“right" class=“right sidebar"> <?php if ($search_box): ?> <div class=“block_menu”> <h3> Search</h3> <?php print $search_box ?> </div> <?php if ($right): ?> <?php print $right ?> <?php endif; ?></div> <!-- /sidebar-right -->
$search_box: HTML that displays the search box, empty if search has been disabled.$right: contains the HTML for the left sidebar.
You can also use $left to print the HTML for the left sidebar.
$Variables
04/10/2023Presented By: Erik Baldwin 29
Footer RegionHTML
<div id=“footer" ></div></body>
Page.tpl.php <div id=“footer" class=“footer"> <?php print $footer ?></div> <!-- /footer --><?php print $closure ?></body>
$footer: The footer region$closure: This variable should ALWAYS be output last, after all other dynamic content. This ensures that all modules that have altered the page have their closing markup. !important
$Variables
04/10/2023Presented By: Erik Baldwin 30
Time to make it look good!Put your best @font-face forward
• Choose a width; fixed = 960px or 1024px or fluid = 100%• Create container div’s to hold all of your regions. Use floats and margins to clear them.• Look at existing CSS templates, there are many that are freely available online.
The details for this are a bit out of this presentations scope.
04/10/2023Presented By: Erik Baldwin 31
Building a custom theme - Recap• We created the page.tpl.php file• We converted our Mockup’s HTML div structure to Drupal regions: Header, Sidebar’s & Footer• Next: Create style.css to style the HTML output of the page template that was created• To add more dynamic content we can:• Add its <?php ?> directly to page.tpl.php• Create more *.tpl.php files: node.tpl.php,
block.tpl.php, comments.tpl.php, etc…
Now go “roll-your-own” theme!
04/10/2023Presented By: Erik Baldwin 32
Isn’t there an Easier method?
Yes, there is; Create a Sub-theme!• Sub-themes allow you to build on existing template files, CSS and Scripts• You can remove what you don’t need without hacking the base theme• Create a design from a mockup, just like custom theming• You can even convert a ::cough:: WordPress theme
04/10/2023Presented By: Erik Baldwin 33
Part III: Creating a Sub-themeparent
child
Basetheme
Sub-theme
child
04/10/2023Presented By: Erik Baldwin 34
CSS Only Themes
• Core page.tpl.php theme based on your choice of contrib/base theme
• The use of well named classes and id’s is required to identify areas/regions
• A theme that is built with just an .info file will create an ugly site, but with clean xHTML that can be manipulated to suit any needs
04/10/2023Presented By: Erik Baldwin 35
Sub-Theming in 7 Steps“Who's your Jedi master? WHO'S your Jedi Master?”
• Wireframes/Mockups in Photoshop, Illustrator or Fireworks• Create static CSS files• Download base theme to sites/all/themes/*base theme name*• Create sub theme in sites/all/themes/*sub-theme name*• Override templates in *foo*.tpl.php• Add JavaScript and jQuery, if necessary• Override themable functions in template.php (sub_theme_name_preprocess_foo{} in template.php)
04/10/2023Presented By: Erik Baldwin 36
Theme Override Layout & Process
A
B
C
D
Core
Modules
Theme Engine
Theme
Sub-theme
04/10/2023Presented By: Erik Baldwin 37
Theme InheritanceBecause everything is passed down thru generations
• Unless you already have a great understanding of Drupal Theming, you should start with an existing theme and modify it
• Sub-themes set their “base theme” in the .info file; the theme which it will directly inherit it’s templates, styles and scripts from
• All styles, scrips and template.php overrides that are specified in the base theme’s template.php will be inherited by the sub-theme
• A Sub-theme should NEVER use phptemplate_ functions; instead use sub_theme_name_
• Building a sub-theme is the safest way to modify an existing theme and still be able to easily update the base theme that is being modified.
04/10/2023Presented By: Erik Baldwin 38
Theme vs. Sub-theme
04/10/2023Presented By: Erik Baldwin 39
Sub-theme basicsNeed-to-know stuff that you NEED to know!
• Inherits resources from the parent theme
• Name the “base theme” in the .info file
• Sub-themes are not required to be in a sub directory of the parent them (This was a requirement for Drupal 5)
• Place your sub-theme in sites/all/themes
Sub-themes are granular, just like a family tree. It just depends on how far you want/need the legacy to go. As of Drupal 6.17, you can have grandchild themes and so forth