Build a Drupal 7 Theme

Report
Build a
Drupal 7 Theme
From a HTML5 Template
Kaloyan Petrov
Drupal Themer
[email protected]
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
[email protected]
www.designolog.com
+359 887 836094

similar documents