1 / 41

Build a Drupal 7 Theme

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

sage
Download Presentation

Build a Drupal 7 Theme

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. About me • Drupal activist • Drupal BulgariaFoundation supporter • Bulgarian Drupal Campsorganizer and speaker • Graphic designer

  3. Table of Contents • About Drupal • Importance of Drupal Theme Layer • Anatomy of a Drupal theme • Main Concepts • Building with blocks • Template files and template suggestions • Override and Preprocess output from Core • Let’s build a Drupal 7 Theme!

  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.

  5. 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, BeyonceBritney Spears, Ozzy Osbourne …

  6. Importance of Drupal Themimg • If a product looks unpleasantor 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.

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

  8. Anatomy of a Drupal Theme? • .info file(required) • template.php • .tpl.php files • images • CSS • JavaScript • Other files A collection of files that allow us to change the look and feelof a website. Other CMS refer to them as skins or templates.

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

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

  11. Default Drupal 7 Regions $header $highlighted $help $content_top - hidden $sidebar_first $content $sidebar_second $content_bottom - hidden $footer

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

  13. Which Templates? 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 region--sidebar.tpl.php block.tpl.php Block Title Block Contents comment-wrapper.tpl.php Comment Area Title Comment Templates block.tpl.php comment.tpl.php block.tpl.php comment.tpl.php block.tpl.php

  14. Overriding Default Output • Find the module that generates the code. • 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. • Make changes in copied file or function. • Clear cache!Administer » Site configuration » Performance

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

  16. My Tools • Firefox and Firebug are the best tools!http://getfirefox.com, http://getfirebug.comIf you really, REALLY, dislike Firefoxtry Opera with Dragonfly – http://www.opera.com • Devel Modulehttp://drupal.org/project/devel • Theme Developer Modulehttp://drupal.org/project/devel_themer

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

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

  19. Showtime Let’s Build a Drupal 7 Theme!

  20. Prepare Environment Create Data Base Check File Permissions

  21. Setup Drupal Download and Install Drupal Download and Install Devel and Theme Developer Modules

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

  23. Writing the Theme .info File Define theme name, description, preview image, regions, features, styles and scripts. http://drupal.org/node/171205

  24. Finding Right Template File html.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php …

  25. Fix Image Paths src="<?php print $base_path . $directory; ?>/…"

  26. Output Dynamic Data <?php print$styles; ?> <?php print$scripts; ?> <?php print$page_top; ?> <?php print$page; ?> <?php print$page_bottom; ?>

  27. Drupalize Top Section <?php if ($site_slogan): ?> <div id="site-slogan”><?php print$site_slogan; ?> </div> <?php endif; ?>

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

  29. Main Content Section

  30. Add and Display New Regions Output Regions in Drupal regions[slider] = Frontpage Slide theme.info <?php printrender($page['slider']); ?> <?php printrender($page['content']); ?> page.tpl.php

  31. Additional Regions

  32. Blocks in Regions

  33. ThemeFooter

  34. ThemeSidebar

  35. Theme Node

  36. Navigation Menu

  37. Questionsor comments?

  38. Build a Drupal 7 Theme From a HTML5 Template Kaloyan Petrov kaloyan@designolog.com www.designolog.com +359 887 836094

More Related