Drupal 7 Layout and Theming

Bret Peters's picture
Start: 
2017-11-16 09:00 - 2017-11-17 05:00 UTC
Organizers: 
Event type: 
Training (free or commercial)

During this in-depth introduction to front end development with Drupal 7, you'll learn how to develop custom themes that format content for both desktop and mobile devices (responsive design). You'll learn how to deploy popular modules to configure the output on your site with Context, saving you hours in theming time. You will also learn how to add interactivity to your site by using jQuery widgets.

Duration: 2 days

Price: 995.00
GSA Price: 952.39
Online Price: 995.00

Course Prerequisites
Prior experience in site building with Drupal.
A combination of Acquia's Drupal 7 Site Building two day course and PHP for Drupal would be ideal preparation.
Drupal related site configuration.
Content creation and maintenance.
Site building.
HTML, CSS, and PHP skills are essential.
Familiarity with JavaScript would be helpful but not necessary.

Course Objectives
Articulate theming concepts and terms.
Make a basic custom theme from scratch.
Make a sub-themes of from two popular base theme systems.
Understand inheritance and overriding templates.
Manipulate mark-up at the theme layer.
Employ best practices for creating sustainable and secure themes.
Tune your site for the best front end performance.
The procedures are introduced step-by-step and then reinforced with practice and challenges. You will write a theme from scratch, and customize it throughout the first day. In day 2 you'll practice making two more themes based on two popular base theme systems, one a theme customizable with CSS and another -a responsive theme. Extensive code samples, image and CSS samples are provided; as are examples of the "stages" of the themes so you keep track of your progress.

You will also learn to use popular modules to configure the output on your site. For example to configure "sections" on your site with Context, saving your hours in theming time. You will learn how to implement jQuery in Drupal from scratch, as well as seeing the popular contributed modules which implement jQuery.

Your instructors will help guide your through the process of establishing this new way of working. You'll look at case studies of websites and reflect on your own experience to take the procedures you learn here back into your own work and any new situations you encounter.

Course Outline
Session 1: Drupal theming fundamentals

Unit 1.1 - What is the theme system?
Unit 1.2 - What is theming?
Unit 1.3 - What are themes?
Unit 1.4 - Make a simple theme
Unit 1.5 - Add CSS and JavaScript
Unit 1.6 - Anatomy of a theme
Unit 1.7 - Resetting your site
Session review

Session 2: Customize with templates

Unit 2.1 - Tools for theme developers
Unit 2.2 - Introduction to overriding template files
Unit 2.3 - PHP basics: Conditional statements
Unit 2.4 - Practice extending your theme
Unit 2.5 - Theming contributed modules
Unit 2.6 - Views template suggestions
Session summary

Session 3: Theme development process

Unit 3.1 - Comparison of processes
Unit 3.2 - Identify what we forgot to theme
Unit 3.3 - Case study: Social signal
Session summary

Session 4: Advanced theming introduction

Unit 4.1 - Coding standards in Drupal
Unit 4.2 - Basic structures in PHP
Unit 4.3 - PHP Basics, Functions
Unit 4.4 - Using functions in Drupal
Unit 4.5 - PHP Basics, Variables
Unit 4.6 - Variables in Drupal
Unit 4.7 - PHP Basics, Arrays
Unit 4.8 - Render arrays - How Drupal creates the HTML string
Session Summary

Session 5: Controlling layout through configuration

Unit 5.1 - Site building tips
Unit 5.2 - Contributed modules for theming
Unit 5.3 - Display suite for custom teaser
Unit 5.5 - Panels for custom layouts
Unit 5.4 - Context module for site sections
Session summary

Session 6: Responsive theme systems

Unit 6.1 - What are sub-themes?
Unit 6.2 - What are base themes?
Unit 6.3 - A quick demo of the Adaptive system
Unit 6.4 - Omega: A responsive theme system
Session Summary

Session 7: Front-End Security and Performance

Unit 7.1 - Security vulnerabilities
Unit 7.2 - Tools for checking front end performance
Unit 7.3 - Drupal configuration check for front end performance
Unit 7.4 - Optional - Selectively add CSS or JS
Session summary
Session 8: Review: How would you do that in Drupal?