Introduction to Drupal 7 Themes and design

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


Default Drupal Theme


Analyzing the default theme

• Nice blue color

• Changeable colors

• Modern regions

• Not good for production (common sense)

• Not so extensible


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


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


http://www.drupal.org/project/themes

http://themeforest.net/category/cms-themes/drupal



http://fusiondrupalthemes.com/

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


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


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.


Configuration Options


Advanced configurations example


Advanced configurations example


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!


http://drupal.org/project/danland

http://drupal.org/project/danland

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


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


Your website’s new look


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


Time for questions


Contacts

Kalin Chernev

– E: [email protected]

– T: twitter.com/kalinchernev

– U: http://shtrak.eu/kalata


mailto:[email protected]

http://shtrak.eu/kalata

Technology

Introduction to Drupal 7 Themes and design