Author: Rob Van Belle Date: 06/06/2014 Version: 1.0

DRUPAL THEMING MANUAL

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/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/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/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/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/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

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