introduction to drupal 7 themes and design
DESCRIPTION
Presentation on Drupal 7 themes and designs. Templates overview, making choice and installing and configuring your Drupal theme.TRANSCRIPT
![Page 1: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/1.jpg)
Introduction to Drupal 7
Session 7.1
Themes and design
1Course by Init Lab (http://initlab.org)Drupalist: Kalin Chernev
![Page 2: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/5.jpg)
Default Drupal Theme
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 5
![Page 6: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/12.jpg)
Configuration Options
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 12
![Page 13: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/13.jpg)
Advanced configurations example
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 13
![Page 14: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/14.jpg)
Advanced configurations example
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 14
![Page 15: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/18.jpg)
Your website’s new look
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 18
![Page 19: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/20.jpg)
Time for questions
Drupalist: Kalin Chernev Course by Init Lab (http://initlab.org) 20
![Page 21: Introduction to Drupal 7 Themes and design](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54b5f5d24a7959bb7e8b45d3/html5/thumbnails/21.jpg)
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