Drupal 7 Layout and Theming (Online & In-Person)

×

Status message

Locating you...

About this course

In this two day course you'll learn a variety of approaches to making dynamic layouts in Drupal, and how to choose the right approach for your site. You will learn techniques and best practices for configuring a flexible and extendable layout for your site, then you'll learn how to get more control over the look and feel by creating a custom theme in Drupal.

By the end of the course, you'll know how to save yourself time in making easy to configure, responsive and smart layouts. You will also understand best practices in making your site secure and fast, and easy to maintain.

Event details

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
This class is available to the government on GSA Schedule.

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?

Location: 

Online This is an online event.

Training provided by: