1. Author: Rob Van Belle
Date: 06/06/2014
Version: 1.0
DRUPAL THEMING MANUAL

2. 2/8
TABLE OF CONTENTS
Introduction 3
About this document 3
1 Setup and basics 5
1.1 Setting up for theming 5
1.1.1 Installing Drush 5
1.1.2 Devel and Theme developer 7
1.2 Theme basics 8
1.2.1 Changing theme settings Fout! Bladwijzer niet gedefinieerd.
1.2.2 Installing a theme Fout! Bladwijzer niet gedefinieerd.
2 Anatomy and subtheming Fout! Bladwijzer niet gedefinieerd.
2.1 .info Fout! Bladwijzer niet gedefinieerd.
2.1.1 Required properties: Fout! Bladwijzer niet gedefinieerd.
2.1.2 Additional properties: Fout! Bladwijzer niet gedefinieerd.
2.1.3 What you really need Fout! Bladwijzer niet gedefinieerd.
2.2 Full anatomy of a theme Fout! Bladwijzer niet gedefinieerd.
2.2.1 Regions Fout! Bladwijzer niet gedefinieerd.
2.2.2 Hidden regions Fout! Bladwijzer niet gedefinieerd.
2.3 Custom settings Fout! Bladwijzer niet gedefinieerd.
2.4 Exercise Fout! Bladwijzer niet gedefinieerd.
2.5 Subtheming Fout! Bladwijzer niet gedefinieerd.
2.5.1 How to… Fout! Bladwijzer niet gedefinieerd.
2.5.2 Inheritance and chaining Fout! Bladwijzer niet gedefinieerd.
2.5.3 Exercise Fout! Bladwijzer niet gedefinieerd.
3 The templating system Fout! Bladwijzer niet gedefinieerd.
3.1 Template overrides Fout! Bladwijzer niet gedefinieerd.
3.2 Exercise Fout! Bladwijzer niet gedefinieerd.
3.3 Template suggestions Fout! Bladwijzer niet gedefinieerd.
3.4 Functions Fout! Bladwijzer niet gedefinieerd.
3.4.1 theme() and drupal_render() Fout! Bladwijzer niet gedefinieerd.
3.4.2 hook_theme() Fout! Bladwijzer niet gedefinieerd.
3.4.3 theme_HOOK() Fout! Bladwijzer niet gedefinieerd.
3.4.4 (pre)process Fout! Bladwijzer niet gedefinieerd.
3.5 Exercise Fout! Bladwijzer niet gedefinieerd.

3. 3/8
INTRODUCTION
Welcome, and thank you for choosing Dropsolid Academy for your training needs!
In the presentation of this course, we’ll cover everything you need to know to become a theming wonder! Since
this is a pretty broad field of expertise, we won’t have time to cover all many basics. We assume you already know
how to install and work with Drupal at least in a basic way. You should know where most configurations can be
found, what’s under Structure and how to manage content, etc. You should also have some basic PC skills, like
working with browsers, files and folders.
Please be honest about your level of skill, we’ll gladly refund your tuition, or save you a spot in our Discover
Drupal course.
We’ll start by explaining some general options for themes in Drupal, introduce you to templating, and then dive
into some advanced functions.
We’ll start day 2 by discussing navigation and forms, JavaScript and CSS. After that we’ll show you how to theme a
view and panels.
We’ll wrap it up with a last round of Q&A, we’ll throw some more useful modules your way, and finally, we’ll let
you go, hopefully fulfilled, and filled with fresh knowledge!
One last thing, before we move on: we at Dropsolid strive to continuously improve our services, so if you have
any remarks or tips, please let us know!
ABOUT THIS DOCUMENT
This document is intended as a practical guide that will help you along with the exercises. We won’t be covering all
the theory discussed in the presentation, this would take us much too far.
The copyrights to this document solely belong to Dropsolid NV, but if you do intend on copying from this work,
we favor the Creative Commons Attributions Non-commercial Share-alike license. So please only use for non-
commercial purposes, and give the author and licensor credits. If you do share your derivative work, share it
under the same license!
We will expect a link to the work on whichever channel you have chosen to distribute, or a notice of use and a
copy of said work.
More information on licensing can be found at http://en.wikipedia.org/wiki/Creative_Commons_license.
Ok, so much for the dry stuff. Time for some more useful information about this document…
We’ve tried to keep this course as “human readable” as possible. To achieve this, we’ve added in some custom
formatting, and visual elements that will help guide you through the information.
This custom formatting can be divided into two groups.
The first group of visual elements is the tips group. They also appear in two variants.
The first is the light bulb. Grey blocks of text preceded with the light bulb icon will list handy tips and “good to
knows”.
Silly example tip:

4. 4/8
This is where we’ll tell you things like “It helps if you install Drupal first…”
To distinguish between the more “playful” tips and the actual inner workings of Drupal, we’ve added this visual
element:
Drupal just works! – Would be a pretty useless ‘inner workings’ comment.
The second group of visual elements signify more of a do something element. Here’s the code block:
sites/all/modules/dropsolid/glue/glue.module
81 /**
82 * In between you can import content
83 */
84 function glue_import_content() {
85
86 }
The caption to the right of the code block icon shows the path to the file we’ll be working on. We’ll list the path
starting from the root of your site, meaning the main directory of your Drupal installation.
This next one is the terminal element:
sites/all/modules/custom is an example directory
drush dl something
When you see this, you’ll have to input the command into the terminal.app or command.exe. The path in the
caption shows you from which directory to perform the command.
Now for the final variation of the code block, the directory block! This will show you the directory structure you
need:
Inside/example/folder
> your
> structure
> should
> look
> like
> this
The path in this ones caption shows you the directory from which the list starts.
That’s all you need to know about this document, so let’s get started!

5. 5/8
1 SETUP AND BASICS
1.1 Setting up for theming
1.1.1 Installing Drush
Drush is a command line shell and scripting interface for Drupal, a veritable Swiss Army knife designed to make life
easier for those of us who spend some of our working hours hacking away at the command prompt. Drush is not
a module and is not specific to a certain Drupal version.
1.1.1.1 Microsoft Windows
From the page at http://drush.ws/drush_windows_installer:
The Drush Windows Installer provides a convenient way to install Drush and the components it needs in order to
run on Microsoft Windows.
Supported Operating Systems:
 Windows 7
 Windows Vista SP2
 Windows XP SP3+
 Windows Server 2003 SP2+
 Windows Server 2008
 Windows Server 2008 R2
Supported Shells:
 minsw / msysgit (Recommended)
 DOS
 PowerShell
Cygwin is untested, but probably works.
Setting the PATH Environment Variable:
Drush makes calls to executables without specifying the full path to their location. In order to resolve the correct
location, their full path should be included in %PATH% environment variable. This can be done by either installing
the Register Environment Variables feature, or by running the Drush Command Prompt located on the desktop
after the installer completes.

6. 6/8
Run As Administrator:
IMPORTANT: Selecting Configure Windows Remote Management feature on systems that have User Access
Control enabled requires running installer with elevated privileges. This can be done by right clicking on the MSI
file and selecting Run As Administrator.
Installation steps:
 Run DrushSetup.msi
 Click Next on the Welcome page
 Select features to install. See section Drush Installer Features
below.
 IMPORTANT: If you select Configure Windows Remote
Management feature, make sure that you run the installer
using Run As Administrator option.
 Click Install to proceed with installation
 Click Yes if prompted to run as Administrator
 Click Finish to complete the installation

7. 7/8
1.1.1.2 Mac OSX
Go to https://github.com/drush-ops/drush/tree/6.x, and download the zip file. Extract the folder and rename it to
drush. Then move it to the /usr/local folder and create a symlink to /usr/local/bin. After that run it as sudo once, to
make sure permission are set correctly. After that, you might have to set permissions on the drush cache folder
(last command). Here are the commands:
sudo mv ~/Downloads/drush /usr/local/
sudo ln -s /usr/local/drush/drush /usr/bin/drush
sudo drush
sudo chmod -R g+w ~/.drush/cache
If you get an error after the first command saying that the directory doesn’t exist, create it first with this command:
sudo mkdir /usr/local/
1.1.2 Devel and Theme developer
Install Devel using drush:
drush dl devel && drush en devel
Theme Developer is a little trickier to install. It depends on simplehtmldom, but not the latest version, so you’ll
have to download it manually.
Go to https://drupal.org/project/simplehtmldom, and download the 7.x-1.12 branch. Now unpack it, and move
the resulting folder to sites/all/modules/contrib.
If you don’t have a contrib folder in sites/all/modules, create it first. Your sites folder should look like this:
Drupal root folder
> sites
> all
> modules
> contrib
> custom
> patched
> default
Now that you’ve moved simplehtmldom, install theme_devel with Drush:
drush dl theme_devel && drush en theme_devel
Answer yes to any questions you may get. If you now reload a page of your website, you should see a little
Themer info link at the bottom left:
If you click this link, a new window will appear on top of the page, it will tell you to click on an element, if you do
so, you’ll see something like this:

8. 8/8
This window shows the parent items, the template called, (pre)process
functions, page load and variables in play.
We’ll come back to this functionality later on.
1.2 Theme basics
…
Please contant info@dropsolid.com to register for this training.
Or go to our website http://dropsolid.com/training