Drupal Layout and Theming (Online - Instructor Led)

×

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

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?

Location: 

Online This is an online event.

Training provided by: