Build a Drupal 7 Theme
advertisement
Build a
Drupal 7 Theme
From a HTML5 Template
Kaloyan Petrov
Drupal Themer
kaloyan@designolog.com
Telerik Web Design Course
http://html5course.telerik.com/
About me
Drupal activist
Drupal Bulgaria
Foundation supporter
Bulgarian Drupal Camps
organizer and speaker
Graphic designer
2
Table of Contents
1.
About Drupal
2.
Importance of Drupal Theme Layer
3.
Anatomy of a Drupal theme
4.
Main Concepts
1. Building with blocks
2. Template files and template suggestions
3. Override and Preprocess output from Core
5.
Let’s build a Drupal 7 Theme!
3
About Drupal
Powerful and modular open-source CMS
Powers 2.1% of all web sites – W3Techs
3% of top 10,000 sites– BuiltWith
As of June’s Drupal.org statistics:
850+K users on Drupal.org;
from 228 countries;
speaking 181 languages;
16,725 Modules;
1,413 Themes.
4
Who Uses Drupal?
Whitehouse.gov, Belgian government,
French government, Dutch government
Harvard, Stanford
United Nations, Greenpeace, Amnesty International
Reuters, CNN, Die Zeit, Die Welt
Forbes, Fox, Warner Bros
Ubuntu, Java.net, SourceForge, dev.twitter.com
MTV UK, Sony Music, Universal Music, Grammys, Emmy
Metallica, REM, Pink, Jenniffer Lopez, Beyonce Britney
Spears, Ozzy Osbourne …
5
Importance of Drupal Themimg
If a product looks unpleasant or dysfunctional
people don’t use it!
The theme of every site is responsible
for creating the first impression.
With the key part in forming and presenting
content Drupal themes are arguably the most
important part of each Drupal installation.
6
Required Knowledge
xHTML/HTML5 & CSS
JavaScript, (jQuery & jQuery UI in Drupal core)
Drupal Terminology
PHP
Basic PHP knowledge is enough if no overriding is necessary.
Basic PHP is enough for simple tasks like printing variables.
Advanced PHP is required for tasks like overriding core markup
or preprocessing and processing themable output.
7
Anatomy of a Drupal Theme?
A collection of files that allow us to change the look and feel
of a website. Other CMS refer to them as skins or templates.
.info file (required)
template.php
.tpl.php files
images
CSS
JavaScript
Other files
8
Main Concepts
Building with Blocks
Template Files and Template Suggestions
Override, Preprocess, Process
9
Building with Blocks
Containers called Regions
Those are areas of the web page that have content.
Building
units of the Regions are Blocks
Blocks are created by modules programmatically
or by content creators in administration section.
10
Default Drupal 7 Regions
$header
$highlighted
$help
$content_top - hidden
$sidebar_first
$content
$sidebar_second
$content_bottom - hidden
$footer
11
Template Files and Suggestions
Template files for sections, pages,
content types, regions, blocks, etc.
Template files and template suggestions
for repeatable parts like comments or blocks
in different parts of the website.
12
Which Templates?
html.tpl.php
page.tpl.php
!Doctype
<head>
Logo
node.tpl.php
CSS
и JavaScript
Site Name
<body>
Regions
Node title
- Header
Author
- Content
Date
- Sidebars
Node Content
comment-wrapper.tpl.php
- Footer
Terms
Links
Comment Area Title
comment.tpl.php
Comment Templates
region--sidebar.tpl.php
block.tpl.php
Block Title
Block Contents
block.tpl.php
block.tpl.php
comment.tpl.php
block.tpl.php
13
Overriding Default Output
1.
Find the module that generates the code.
2.
Two possible cases:
If the module provides .tpl.php file – copy it to theme folder.
In the source of the module we search for theme(),
preprocess() or preprocess() function then copy it to your
theme’s template.php and rename it accordingly.
3.
Make changes in copied file or function.
4.
Clear cache!
Administer » Site configuration » Performance
14
My Tools
Local Development Environment
XAMPP, LAMP, WAMP, MAMP…
Any Text editor with code highlighting is fine
Eclipse, NetBeans, Komodo Edit, Notepad++…
VirtualBox
advanced
Use virtual web server if you prefer it over AMP stacks.
For testing different browser and OS versions.
Drush advanced
http://www.drush.org/
Command line shell and scripting interface for Drupal.
15
My Tools
Firefox and Firebug are the best tools!
http://getfirefox.com, http://getfirebug.com
If you really, REALLY, dislike Firefox
try Opera with Dragonfly – http://www.opera.com
Devel Module
http://drupal.org/project/devel
Theme Developer Module
http://drupal.org/project/devel_themer
16
Some Tips Before Starting
Content is king! Design for the content!
Check if HTML is valid and CSS
is documented!
Use what works for you
Start from scratch
Or start from starter theme:
Omega, Zen, Basic, Framework
17
Some Tips Before Starting
Create a data model
Create wireframes that describe
page elements
Identify modules, templates and
configurations responsible for every
element in your wireframes.
18
21
Showtime
Let’s Build a Drupal 7 Theme!
22
Prepare Environment
Create Data Base
Check File Permissions
23
Setup Drupal
Download and Install Drupal
Download and Install
Devel and Theme Developer Modules
Create a Theme
Drupal Can Sees
Create Theme folder /sites/all/themes/telerikdemo
Create required .info file - telerikdemo.info
Copy sliced template files in theme folder
Writing the Theme .info File
Define theme name, description, preview image,
regions, features, styles and scripts.
http://drupal.org/node/171205
Finding Right Template File
html.tpl.php
page.tpl.php
region.tpl.php
node.tpl.php
block.tpl.php
…
Fix Image Paths
src="<?php print $base_path . $directory; ?>/…"
28
Output Dynamic Data
<?php print $styles; ?>
<?php print $scripts; ?>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
Drupalize Top Section
<?php if ($site_slogan): ?>
<div id="site-slogan”><?php print $site_slogan; ?>
</div>
<?php endif; ?>
Primary Menu
Output Primary Menu from Drupal
<?php print theme('links__system_main_menu',array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu',
'class' => array('links', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h3',
'class' => array('element-invisible'),
)
)); ?>
Main Content Section
Add and Display New Regions
Output Regions in Drupal
theme.info
regions[slider] = Frontpage Slide
page.tpl.php
<?php print render($page['slider']); ?>
<?php print render($page['content']); ?>
33
Additional Regions
Blocks in Regions
Theme Footer
Theme Sidebar
Theme Node
Navigation Menu
Questions
or comments?
Build a Drupal 7 Theme
From a HTML5 Template
Kaloyan Petrov
kaloyan@designolog.com
www.designolog.com
+359 887 836094
