Introduction to Drupal 7
Session 7.1
Themes and design
1Course by Init Lab (http://initlab.org)Drupalist: Kalin Chernev
Agenda
• What is a Drupal theme;
• Selecting a theme;
• Downloading and installing a theme;
• Modifying your theme;
2Course by Init Lab (http://initlab.org)Drupalist: Kalin Chernev
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, etc
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 3
A Drupal theme is consisted of
• HTML markup
• CSS styling
• PHP logic
• Javascript interactivity
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 4
Default Drupal Theme
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5
Analyzing the default theme
• Nice blue color
• Changeable colors
• Modern regions
• Not good for production (common sense)
• Not so extensible
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 6
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 scheme
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 7
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 marketplaces
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 8
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 still
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 9
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 theme
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 10
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 change
the administration
theme to any other
theme listed in the drop-down list.
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 11
Configuration Options
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 12
Advanced configurations example
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13
Advanced configurations example
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 14
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
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 the following snipped<?php print render ($page['slideshow']); ?>This create a new region Slideshow and will output the contents which you place there
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 16
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 preset
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 17
Your website’s new look
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 18
Summary
• The theme changes the website look and feel in an instant
• Think regions
• Think colors, fonts and layout
• Become good at using theme frameworks
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 19
Time for questions
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 20
Contacts
Kalin Chernev
– E: [email protected]
– T: twitter.com/kalinchernev
– U: http://shtrak.eu/kalata
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 21