SlideShare a Scribd company logo
1 of 8
Download to read offline
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

More Related Content

Similar to Drupal theming training

Drush. Why should it be used?
Drush. Why should it be used?Drush. Why should it be used?
Drush. Why should it be used?Sergei Stryukov
 
Face your fears: Drush and Aegir
Face your fears: Drush and AegirFace your fears: Drush and Aegir
Face your fears: Drush and AegirIztok Smolic
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-startedtutorialsruby
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-startedtutorialsruby
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-startedtutorialsruby
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-startedtutorialsruby
 
Making The Drupal Pill Easier To Swallow
Making The Drupal Pill Easier To SwallowMaking The Drupal Pill Easier To Swallow
Making The Drupal Pill Easier To SwallowPhilip Norton
 
SynapseIndia drupal presentation on drupal best practices
SynapseIndia drupal  presentation on drupal best practicesSynapseIndia drupal  presentation on drupal best practices
SynapseIndia drupal presentation on drupal best practicesSynapseindiappsdevelopment
 
LuisRodriguezLocalDevEnvironmentsDrupalOpenDays
LuisRodriguezLocalDevEnvironmentsDrupalOpenDaysLuisRodriguezLocalDevEnvironmentsDrupalOpenDays
LuisRodriguezLocalDevEnvironmentsDrupalOpenDaysLuis Rodríguez Castromil
 
Rapid site production with Drupal
Rapid site production with DrupalRapid site production with Drupal
Rapid site production with DrupalRob Sawyer
 
Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011
Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011
Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011camp_drupal_ua
 
Development Setup of B-Translator
Development Setup of B-TranslatorDevelopment Setup of B-Translator
Development Setup of B-TranslatorDashamir Hoxha
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in DrupalWingston
 
Drupal Multi-Site Setup
Drupal Multi-Site SetupDrupal Multi-Site Setup
Drupal Multi-Site Setupylynfatt
 
Optimize Site Deployments with Drush (DrupalCamp WNY 2011)
Optimize Site Deployments with Drush (DrupalCamp WNY 2011)Optimize Site Deployments with Drush (DrupalCamp WNY 2011)
Optimize Site Deployments with Drush (DrupalCamp WNY 2011)Jon Peck
 

Similar to Drupal theming training (20)

Drush. Why should it be used?
Drush. Why should it be used?Drush. Why should it be used?
Drush. Why should it be used?
 
Drupal
DrupalDrupal
Drupal
 
Drupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating ModulesDrupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating Modules
 
Face your fears: Drush and Aegir
Face your fears: Drush and AegirFace your fears: Drush and Aegir
Face your fears: Drush and Aegir
 
Municipal Website with Drupal
Municipal Website with DrupalMunicipal Website with Drupal
Municipal Website with Drupal
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-started
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-started
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-started
 
php-and-zend-framework-getting-started
php-and-zend-framework-getting-startedphp-and-zend-framework-getting-started
php-and-zend-framework-getting-started
 
PHP
PHP PHP
PHP
 
Making The Drupal Pill Easier To Swallow
Making The Drupal Pill Easier To SwallowMaking The Drupal Pill Easier To Swallow
Making The Drupal Pill Easier To Swallow
 
SynapseIndia drupal presentation on drupal best practices
SynapseIndia drupal  presentation on drupal best practicesSynapseIndia drupal  presentation on drupal best practices
SynapseIndia drupal presentation on drupal best practices
 
LuisRodriguezLocalDevEnvironmentsDrupalOpenDays
LuisRodriguezLocalDevEnvironmentsDrupalOpenDaysLuisRodriguezLocalDevEnvironmentsDrupalOpenDays
LuisRodriguezLocalDevEnvironmentsDrupalOpenDays
 
Rapid site production with Drupal
Rapid site production with DrupalRapid site production with Drupal
Rapid site production with Drupal
 
Drupal distribution
Drupal distributionDrupal distribution
Drupal distribution
 
Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011
Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011
Sergei Stryukov.Drush.Why it should be used.DrupalCamp Kyiv 2011
 
Development Setup of B-Translator
Development Setup of B-TranslatorDevelopment Setup of B-Translator
Development Setup of B-Translator
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 
Drupal Multi-Site Setup
Drupal Multi-Site SetupDrupal Multi-Site Setup
Drupal Multi-Site Setup
 
Optimize Site Deployments with Drush (DrupalCamp WNY 2011)
Optimize Site Deployments with Drush (DrupalCamp WNY 2011)Optimize Site Deployments with Drush (DrupalCamp WNY 2011)
Optimize Site Deployments with Drush (DrupalCamp WNY 2011)
 

More from dropsolid

Twig in drupal 8
Twig in drupal 8Twig in drupal 8
Twig in drupal 8dropsolid
 
de Rules module van Drupal
de Rules module van Drupalde Rules module van Drupal
de Rules module van Drupaldropsolid
 
Vertalen met Drupal.
Vertalen met Drupal.Vertalen met Drupal.
Vertalen met Drupal.dropsolid
 
Site building preview - Drupal training
Site building preview - Drupal trainingSite building preview - Drupal training
Site building preview - Drupal trainingdropsolid
 
Drupal Deployment demo
Drupal Deployment demoDrupal Deployment demo
Drupal Deployment demodropsolid
 
Discover Drupal preview
Discover Drupal previewDiscover Drupal preview
Discover Drupal previewdropsolid
 
Git session Dropsolid.com
Git session Dropsolid.comGit session Dropsolid.com
Git session Dropsolid.comdropsolid
 

More from dropsolid (7)

Twig in drupal 8
Twig in drupal 8Twig in drupal 8
Twig in drupal 8
 
de Rules module van Drupal
de Rules module van Drupalde Rules module van Drupal
de Rules module van Drupal
 
Vertalen met Drupal.
Vertalen met Drupal.Vertalen met Drupal.
Vertalen met Drupal.
 
Site building preview - Drupal training
Site building preview - Drupal trainingSite building preview - Drupal training
Site building preview - Drupal training
 
Drupal Deployment demo
Drupal Deployment demoDrupal Deployment demo
Drupal Deployment demo
 
Discover Drupal preview
Discover Drupal previewDiscover Drupal preview
Discover Drupal preview
 
Git session Dropsolid.com
Git session Dropsolid.comGit session Dropsolid.com
Git session Dropsolid.com
 

Recently uploaded

Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 

Recently uploaded (12)

Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 

Drupal theming training

  • 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