1. From a HTML5 Template Kaloyan Petrov Drupal Themer kaloyan@designolog.com Telerik Web Design Course http://html5course.telerik.com/

2.  Drupal activist  Drupal Bulgaria Foundation supporter  Bulgarian Drupal Camps organizer and speaker  Graphic designer 2

3. 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.  Powerful and modular open-source CMS  Powers 2.1% of all web sites – W3Techs 3% of top 10,000 sites– BuiltWith W3TechsBuiltWithW3TechsBuiltWith  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

5.   Whitehouse.gov, Belgian government, French government, Dutch government Whitehouse.govBelgian government French governmentDutch government   Harvard, Stanford HarvardStanford   United Nations, Greenpeace, Amnesty International United NationsGreenpeaceAmnesty International   Reuters, CNN, Die Zeit, Die Welt ReutersCNNDie ZeitDie Welt   Forbes, Fox, Warner Bros ForbesFoxWarner Bros   Ubuntu, Java.net, SourceForge, dev.twitter.com UbuntuJava.netSourceForgedev.twitter.com   MTV UK, Sony Music, Universal Music, Grammys, Emmy MTV UKSony MusicUniversal MusicGrammysEmmy   Metallica, REM, Pink, Jenniffer Lopez, Beyonce Britney Spears, Ozzy Osbourne … MetallicaREMPinkJenniffer LopezBeyonceBritney SpearsOzzy Osbourne 5

6.  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

7.  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

8. .info file (required)  template.php .tpl.php files  images  CSS  JavaScript  Other files 8 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.

9. Building with Blocks Template Files and Template Suggestions Override, Preprocess, Process 9

10.  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

11. 11 $header $highlighted $help $content_top - hidden $sidebar_first $sidebar_second $content $content_bottom - hidden $footer

12.  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

13. 13 html.tpl.php !Doctype CSS и JavaScript html.tpl.php !Doctype CSS и JavaScript page.tpl.php Logo Site Name Regions - Header - Content - Sidebars - Footer page.tpl.php Logo Site Name Regions - Header - Content - Sidebars - Footer node.tpl.php Node title Author Date Node Content Terms Links node.tpl.php Node title Author Date Node Content Terms Links comment-wrapper.tpl.php Comment Area Title Comment Templates comment-wrapper.tpl.php Comment Area Title Comment Templates comment.tpl.php region--sidebar.tpl.php region--sidebar.tpl.php block.tpl.php Block Title Block Contents block.tpl.php Block Title Block Contents block.tpl.php

14. 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

15.  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. http://www.drush.org/ 15

16.  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 http://getfirefox.com http://getfirebug.comhttp://www.opera.com http://getfirefox.com http://getfirebug.comhttp://www.opera.com  Devel Module http://drupal.org/project/devel http://drupal.org/project/devel  Theme Developer Module http://drupal.org/project/devel_themer http://drupal.org/project/devel_themer 16

17.  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

18.  Create a data model  Create wireframes that describe page elements  Identify modules, templates and configurations responsible for every element in your wireframes. 18

21. 21

22. Showtime 22

23. Create Data Base Check File Permissions 23

24. Download and Install Drupal Download and Install Devel and Theme Developer Modules

25. Create Theme folder /sites/all/themes/telerikdemo Create required.info file - telerikdemo.info Copy sliced template files in theme folder

26. Define theme name, description, preview image, regions, features, styles and scripts. http://drupal.org/node/171205

27. html.tpl.phppage.tpl.phpregion.tpl.phpnode.tpl.phpblock.tpl.php…

28. src=" /…" 28

31. 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'), ) )); ?>

33. Output Regions in Drupal 33 page.tpl.php regions[slider] = Frontpage Slide theme.info

41. From a HTML5 Template Kaloyan Petrov kaloyan@designolog.com www.designolog.com +359 887 836094