Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Drupal 7 Themes and design

2,307 views

Published on

Presentation on Drupal 7 themes and designs. Templates overview, making choice and installing and configuring your Drupal theme.

Published in: Technology

Introduction to Drupal 7 Themes and design

  1. 1. Introduction to Drupal 7 Session 7.1 Themes and designDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 1
  2. 2. Agenda• What is a Drupal theme;• Selecting a theme;• Downloading and installing a theme;• Modifying your theme;Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 2
  3. 3. Theme• “Кожа” in Bulgarian;• Manage the overall look and feel of your site; – The colors of the page; – Fonts for texts, headings, links, etc; – General images and graphics of pages; – General layout – header, left column, right column, content area, footer, etcDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3
  4. 4. A Drupal theme is consisted of• HTML markup• CSS styling• PHP logic• Javascript interactivityDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4
  5. 5. Default Drupal ThemeDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5
  6. 6. Analyzing the default theme• Nice blue color • Changeable colors• Modern regions• Not good for production (common sense)• Not so extensibleDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6
  7. 7. Questions to ask yourself• Horizontal or vertical navigation /or both• Banner areas• Number and position of columns• Content areas• Footer areas• General color scheme• General fonts schemeDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7
  8. 8. Choosing your theme• Many free themes at www.drupal.org/project/themes• Note that the drupal.org themes are more of a basic frameworks• http://themeforest.net/category/cms- themes/drupal• http://fusiondrupalthemes.com/• Many other marketplacesDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8
  9. 9. Trends• Majority of drupal.org themes are frameworks• Zen is the best, yet quite complex theme• Fusion is trying to meet new trends• Adaptive themes are great and are getting better in the mobile themes sector• Omega is a new paradigm, heavy on 960gs• Framework remains a good framework stillDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9
  10. 10. Installing a new theme• Download the theme locally;• Go to Administration > Appearance;• Click on “Install new theme” OR• Place uncompressed version of the theme at your server site folder ../sites/all/themes• NEVER place anything at root /themes folder• Go to Administer > Appearance to enable the your themeDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10
  11. 11. The Administration Theme• Drupal 7 lets you specify a theme that should be used for administrative functions• By default Drupal 7 enables Seven as the administration theme• You may also changethe administrationtheme to any othertheme listed in the drop-down list.Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 11
  12. 12. Configuration OptionsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 12
  13. 13. Advanced configurations exampleDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13
  14. 14. Advanced configurations exampleDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 14
  15. 15. Our case study• Let’s install http://drupal.org/project/danland• The slideshow is automatic, no configurations• We have an already made slideshow, why not exchange them?• The problem – current theme does not support region in the slideshow• Not a problem – just add your new region!Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 15
  16. 16. Creating a region• Open the .info file and add the followingregions[slideshow] = SlideshowJust after the Preface top region• Open page.tpl.php file and locate the following opening div <div class="slideshow">Clear the hard-coded images and change with thefollowing snipped<?php print render ($page[slideshow]); ?>This create a new region Slideshow and will outputthe contents which you place thereDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 16
  17. 17. Theming tweaks• Clear the cache so that the changes take effect• Go and fix the context for the slideshow (the region is different than highlighted region)• Go and fix the sizes of the image style preset to 955 width and 355 height• The slideshow views block will automatically resize from the image style presetDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 17
  18. 18. Your website’s new lookDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 18
  19. 19. Summary• The theme changes the website look and feel in an instant• Think regions• Think colors, fonts and layout• Become good at using theme frameworksDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 19
  20. 20. Time for questionsDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 20
  21. 21. ContactsKalin Chernev – E: kalata@shtrak.eu – T: twitter.com/kalinchernev – U: http://shtrak.eu/kalataDrupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 21

×