from a html5 template kaloyan petrov drupal themer kaloyan@designolog.com telerik web design course
Post on 15-Jan-2016
218 Views
Preview:
TRANSCRIPT
Build aDrupal 7 Theme
From a HTML5 Template
Kaloyan PetrovDrupal 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
4
About Drupal Powerful and modular open-source CMS Powers 2.1% of all web sites – W3Techs3% 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.
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?
.info file (required)
template.php
.tpl.php files
images
CSS
JavaScript
Other files8
A collection of files that allow us to change the look and feelof a website. Other CMS refer to them as skins or templates.
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 programmaticallyor by content creators in administration section.
10
Default Drupal 7 Regions
11
$header
$highlighted
$help
$content_top - hidden
$sidebar_first$sidebar_sec
ond$content
$content_bottom - hidden
$footer
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?
13
html.tpl.php
!Doctype <head> CSS и JavaScript <body>
page.tpl.php
Logo Site Name Regions - Header - Content - Sidebars - Footer
node.tpl.php
Node title Author Date Node Content Terms Links
comment-wrapper.tpl.php
Comment Area Title Comment Templates
comment.tpl.php
comment.tpl.php
region--sidebar.tpl.php
block.tpl.php Block Title Block Contents
block.tpl.php
block.tpl.php
block.tpl.php
Overriding Default Output1. 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 EnvironmentXAMPP, LAMP, WAMP, MAMP…
Any Text editor with code highlighting is fineEclipse, NetBeans, Komodo Edit, Notepad++…
VirtualBox advancedUse virtual web server if you prefer it over AMP
stacks.
For testing different browser and OS versions.
Drush advancedhttp://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.comIf you really, REALLY, dislike Firefox
try Opera with Dragonfly – http://www.opera.com
Devel Modulehttp://drupal.org/project/devel
Theme Developer Modulehttp://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
ShowtimeLet’s Build a Drupal 7 Theme!
22
Prepare EnvironmentCreate Data Base
Check File Permissions
23
Setup DrupalDownload 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 Pathssrc="<?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
33
<?php print render($page['slider']); ?><?php print render($page['content']); ?>
page.tpl.php
regions[slider] = Frontpage Slide
theme.info
Additional Regions
Blocks in Regions
Theme Footer
Theme Sidebar
Theme Node
Navigation Menu
Questionsor
comments?
Build a Drupal 7 Theme From a HTML5 Template
Kaloyan Petrovkaloyan@designolog.com
www.designolog.com+359 887 836094
top related