This guide focuses on theming in Drupal 7, with Drupal 8 lessons highlighted with version information. This covers the skills you need to become a Drupal themer, working on the front-end of Drupal sites.
Want to jump ahead? Here’s a list of the sections in this document:
- About themers
- Meet some Drupal front-end developers
- Learn to be a Drupal themer
- Background and prerequisites
- Core lessons
- Advanced concepts
- Broaden your skills
Meet some Drupal front-end developers
Get to know some people who work with Drupal front-end and themes every day:
Learn to be a Drupal themer
There’s a lot to learn, and a lot of the best information is spread out across Drupal.org and various other websites, books, and podcasts. As you’re climbing the ladder, and become more proficient with Drupal, here are some things to keep in mind:
Background and prerequisites
- Our Favorite HTML and CSS Resources — Do you need to brush up on HTML or CSS? You’ll get the most out of our Drupal theming tutorials if you already have a good foundation with these basic web technologies. This list contains some of our favorite resources and references around the Internet related to HTML and CSS.
- Coding Standards in Drupal — If you’re coding in Drupal, you will need to know and use Drupal’s coding standards and best practices. This video will get you up-to-speed on Drupal’s coding standards, and how to use them.
Themers are expected to know how to convert static design files into working Drupal themes. The core tasks you’ll work on as a novice themer are:
- Add regions to a theme
- Apply CSS to a theme
- Override, edit, or create template files in a theme
- Create, install, and enable a theme
Tutorials in these series cover the main concepts you will use as a Drupal themer:
- Theming Basics (Drupal 7) — Start here. Learn what a theme is, what role they fill, and all the essential skills for overriding Drupal’s default output. The information in these series will be assumed knowledge for almost everything else we talk about.
- PSD to Theme (Drupal 7) — The strategies theme developers use to efficiently translate from design comps to Drupal theme. Learn to think like a themer.
In Drupal, the layout of a site is a shared responsibility between a site builder and a themer. The following tutorials, while created for site builders, will also be useful to you as a themer. These lessons cover the layout of content (using Display Suite or Panels), and also site-wide layout (Panels). Themers are often forced to decide between hard-coding a layout into a template file, or using configuration to achieve the results instead. Understanding what modules are available and what they are capable of helps when it comes time to make these decisions.
- Overview of the Popular Tools — This blog post, “Code-Free Layout Tools for Theming Drupal” gives a quick overview of the big players in this space. Start here if you’re unfamiliar with this group of modules and unsure of where to start.
- Panels — One of the most popular, and most fully featured Drupal layout building tools allows you to take over individual regions or entire pages, and place anything from blocks, to individual fields attached to a content type into a layout. This is a must for anyone doing regular work with Drupal.
- Display Suite — Display Suite is primarily focused on providing tools to work with reusable view modes for content types. If you’re doing anything with card based design or components, you’ll want to look at Display Suite.
- Context, Features, and Beans — Learn to use Context for advanced placement of blocks into regions, and then export those placements into configuration using Features. A common pattern for creating re-usable or deployable layout based on Drupal’s block system.
- Introduction to Omega 3.x — Omega is a base theme that provides a nice framework for creating a responsive theme, and extensive configuration options. If you’re just getting started with responsive design in Drupal, this may be a good starting point. Note: This series covers a previous version of Omega, but many of the same concepts will apply.
Navigation and lists
Drupal allows us to create static menus, and dynamic lists of content. The creation of menus is often completed by the site builder, but there are implications for you as a themer. Understanding where the items in a list come from, how to add new ones, and how to accommodate the fact that the number of items may vary over time.
- Creating Menus — Menus are Drupal’s primary system for dealing with navigation.
- Working with Secondary Menus — Understand how secondary menus work in Drupal, for example make them appear in the right column when someone navigates to a menu item in the main navigation.
- Creating Listing Pages with Views — The Views module is the tool of choice for creating pages that list dynamic content, as a themer knowing how to use Views to modify the output of a list is important.
- Introduction to Views — A complete overview of the Views module, how it works, and how to create various different types of lists of your Drupal site’s content, users, and other dynamic entities.
Images and media
Drupal generates images at different sizes for us. (These are called “image styles" in Drupal’s Configuration section.) As a themer, you may need to customize how these images are displayed on-screen. You may also want to familiarize yourself with media management techniques in Drupal.
- Image Styles — Learn to use Drupal’s image styles system to dynamically generate thumbnails and other derivative images.
- Media Management for WYSIWYG Editors
- Introduction to the Media Project for Media Asset Management
A number of our tutorials assume you have done some prerequisite learning on a non-Drupal specific topic. Perhaps you’re a designer who’s learning front-end development. We help bring you up to speed with related technologies with the following learning series.
- Sass and Compass — Using a CSS preprocessor is quickly becoming an industry best-practice. Learn to use the Sass CSS preprocessor to write CSS more efficiently.
- Advanced Theming — This series of video tutorials picks up where Theming Basics left off, introduces more Drupal-specific knowledge, covers conditional CSS, theming forms, and manipulation of variables via preprocess functions before they are presented to template files for display.
Prepare for theming in Drupal 8
Almost every aspect of the theming layer has been touched in one way or another during the Drupal 8 development cycle. We think some of the important ones to learn about are:
- How Drupal 8 makes the theme layer easier to understand
- Changes to help make Drupal responsive and mobile friendly
- The addition of a new template engine based on Twig
The tutorials and presentations here below will give you an overview of what's new in the theming layer of Drupal 8 as well as an introduction to tools, syntax, and concepts you will need to understand. If you want to dive straight in, you can go directly to the complete Drupal 8 Theming Guide.
- What’s New in Drupal 8: Theming — After watching this presentation you should have a better understanding of the things you’ll need to learn in order to create themes in Drupal 8 and where you might need to brush up.
- YAML — As a themer, you’ll need to know how to create, edit, and understand YAML syntax.
- Twig — Twig template files have replace PHP template files as the primary templating language in Drupal 8. In this series, you will learn about Twig, in a framework-agnostic context.
- Understand Responsive Web Design — Drupal 8 will ship with out-of-the-box mobile-friendly and responsive design features. Although this series focuses on a Drupal 7 theme refactoring exercise, you will learn concepts like responsive typography, flexible layouts, media queries, and breakpoints that you will help you understand these features in Drupal 8.
On the blog: Drupal 8 theming
During the Drupal 8 Beta phase, the Drupalize.Me team wrote blog posts about various topics in Drupal 8, including new features in the theming layer. The implementation particulars in these posts might have changed during Drupal 8 development, but many of the features and concepts persist.
- Including Image Styles with Your Drupal 8 Theme — Learn to export image styles so that you can use more than the default image styles in your theme.
- Controlling CSS Classes with the Classy Theme in Drupal 8 — Classy is a new base theme in core, which Bartik and Seven will then use as their bases. The idea here is to provide more flexibility to themers when it comes to choosing default CSS classes.
- Learning Drupal 8 from Boilerplate Code — Use the Drupal Console command-line interface to generate boilerplate code to scaffold a Drupal 8 theme, complete with code comments and theming functions from the Examples module.
This is just a selection of what we have on this topic. To get a full list of all tutorials categorized as “theming”, please use our tutorial library page. You may also want to explore videos categorized as “site building” for additional topics which are configured in the administrative interface, and which affect how things are displayed on the rendered page.
Broaden your skills
To become a great Drupal themer, find various sources of information, communities, and events to broaden your skills, find the right job, and meet others on a similar journey. Here is a sampling of some podcasts, events, and blog posts to help you dive deeper, and support you on your way to mastery.
The following Drupalize.Me podcasts may also be of interest to themers.
- What is a Base Theme and When Should I Use One?
- Jen Lampton and Twig in Core
- Decoupling Drupal — For those aspiring to front-end development and taking Drupal to the next level.
- Getting Sassy with Chris Eppstein — Chris is the creator of the framework Compass, which is used in conjunction with Sass by many themers.
DrupalCon sessions are a great way to get up to speed on the latest in Drupal development. All DrupalCon sessions are recorded and are available for free on the Drupal Association’s YouTube channel. The videos are also embedded on the session description pages for each DrupalCon, so you can browse developer tracks on the DrupalCon website and find session recordings to watch after the Con.
- DrupalCon — Find links to past, present, and future DrupalCons and session recordings.
Drupal camps, sprints, user groups are great way to connect with other Drupal developers and learn new things.
- Drupical — Filter and find Drupal camps, sprints, user groups, and training events.
- Upcoming Drupal community events — Filter and find Drupal-related events.