Guide

Legacy Theme Development for Drupal 7

Legacy Theme Development

Content in this guide

Legacy Theme Development

Ready to learn modern Drupal theming? Theme Drupal Sites

What will you learn

  • Essential concepts and skills to theme Drupal 7 sites
  • Converting a PSD to a Drupal 7 theme
  • How to change markup in Drupal 7
  • An introduction to responsive web design in Drupal 7
  • Advanced theming concepts for Drupal 7

Overview

This is a guide to our legacy theming tutorials which were produced for Drupal 7.

Drupal 7 for Themers

Essential lessons

Theming

Theming Basics for Drupal 7

Course
Theming
Drupal 7
15 tutorials
Introduction to Theming Basics for Drupal 7 Free
Preparing a Site for Theming
Enabling Themes and Theme Settings
Translating a Design into a Drupal Theme
Helpful Browser Extensions for Drupal Theming
Creating the .info File and Adding CSS
Customizing the Page Template File
Adding Regions to the Page Template
Customizing the Node Template
Creating Dynamic Templates for Specific Node Types
Using the Theme Developer Module
Add JavaScript to a Theme
Tour of Popular Page Template Variables
Add a Screenshot to Your Theme
Conclusion to Theming Basics

Theming

PSD to Drupal 7 Theme

Course
Theming
Drupal 7
21 tutorials
PSD to Theme Introduction Free
Introduction to the Domicile Theme Free
Theming by Component
Create a Theme Style Guide
Extract Design Assets
Create CSS Stub Files
Layout Rules for CSS Stubs
Create a Checklist of Drupal Elements
Prepare Drupal for Theming
Customize Image Styles
Create and Place Custom Blocks
Create the Theme Infrastructure
Prepare the Theme Info File
Incorporate Style Guide Stubs into the Theme
Establish Page Layout Structure with page.tpl.php
Insert Site-Wide Components into page.tpl.php
Install Your Theme
Enable Your Theme
Identify and Theme Components
Review the Completed Theme
Next Steps for Your Theme

Site Building

Markup in Drupal 7

Course
Site Building, Theming
Drupal 7
33 tutorials
Zen: Introduction and Installation Free
Why Use a Base Theme? Free
Zen: Identify HTML5 Markup in Templates
Recap: Markup in Zen
Fences: Semantic Markup for Fields
Introduction to Markup in Views
Views Unformatted List Format
Views HTML List Format
Views Table Format
Views Default Field Wrapper Markup
Views Advanced Field Wrapper Markup
Views Theme Information
Theme Developer Module and Views
Views Template Files
How to Add a Class to a View
Recap and Challenge: Markup in Views
Introduction to Markup in Panels
Overview of Layouts in Panels
Set up Demo Panel Page
Panels: Add or Remove CSS Body Classes
Panels: Add CSS Classes to the "Main" Region
Panels: Add CSS Classes or IDs to Panel Panes
Override Panel Pane Template File
What Is Style in Panels?
Recap: Markup in Panels
Introduction to Markup in Display Suite
Display Suite: Provide a Custom Layout
Display Suite: Create a Custom Layout with Drush
Display Suite: Add CSS Classes to Regions
Display Suite: Add CSS Classes to Fields
Display Suite: Add Custom HTML Wrappers
Display Suite: Utilize Field Templates
Recap: Markup in Display Suite

Theming

Getting Started with Responsive Web Design in Drupal 7

Course
Theming
Drupal 7
14 tutorials
Introduction to Responsive Web Design in Drupal Free
Setting Content Priorities that Stack up
Percentages Not Pixels: Adapting the 960px Grid
Responsive Typography
Calculating Responsive Margins and Padding
Adding the Viewport Meta Tag to html.tpl.php Free
Restoring the Natural Flow of Elements
Adding Media Queries and Breakpoints to 960.css
Configuring the Responsive Menus Module
Flexible Images and Media with CSS's max-width
Create Responsive Slideshows in Drupal: FlexSlider Free
Adapting a Fixed-Width Search Form to Flex with Its Container
Styling a Mobile-Friendly Header and Navigation
Cleaning up Tables, Up-Scaled Images, and More Fun with Media Queries

Advanced concepts

Theming

Advanced Theming for Drupal 7

Course
Theming
Drupal 7
17 tutorials
Introduction Advanced Theming in Drupal 7 Free
PHP for Themers Free
Altering Variables with Preprocess Functions
Adding New Variables with Preprocess Functions
Adding New Variables to a Specific Node Type
Adding Conditional CSS and Javascript
Dynamic Templates with theme_hook_suggestions
Overriding Theme Functions
Creating a Preprocess Function for a Theme Function
Function Name Suggestions
Theme Alter Hooks for CSS and JavaScript
Altering the Page from the Theme Layer
Altering Forms from the Theme Layer
Best Practices for hook_form_alter()
Theming Forms
Theme Settings
Strategies for Keeping Template Files Clean

Other guides

We have guides on many Drupal skills and topics. See all our guides.

Theming
Learn to control the look, feel, and markup of a Drupal site in a theme.

Frontend Theming

Go to Frontend Theming
“Drupalize.Me has trained thousands of Drupalistas. Their video lessons help to address our constant need for more Drupal talent. Drupal needs training like this to support its growth.”
Dries Buytaert
Drupal Founder and Project Lead
Photo of Dries Buytaert
“They’re easy to understand. They’re thorough. They’re funny. They’re always entertaining, and it makes it easy to learn parts of Drupal and how you can integrate it into your workflow and learn more and have a good time doing it.”
Roger Carr
Drupalize.Me Member
Photo of Roger Carr
“The mission of the Drupal Association is to foster and support the Drupal software project, the community, and its growth. Drupal education, like that provided by Drupalize.Me, is important to this mission.”
Megan Sanicki
Former Exec. Director, Drupal Assoc.
Photo of Megan Sanicki

FAQs

Am I required to sign a contract?
No. You can purchase a membership and/or cancel any time. Drupalize.Me is a pay-as-you-go service.

Can I preview tutorials before joining?
Yes! Just navigate to our tutorial library. Our free tutorials are labeled with a green "FREE" tag.

Can I watch videos on my mobile device?
Yes! Drupalize.Me is a responsive site and can be accessed in the browser on any mobile device. More FAQs