20,53 €
Drupal is an award winning open source Content Management System (CMS). Based on PHP/MySQL, its power and flexibility combined with its exceptional design mean it is one of the most popular choices for creating a CMS website.
Drupal employs a specialized templating system and supports themes, which allow you to change the look and feel of the system's front and back-end interfaces.
Drupal 6 Themes is an ideal introduction to theming with Drupal 6. If you want to create a striking new look for your Drupal 6 website, this book is for you. This book is a revised, updated and expanded edition of Drupal 5 Themes, written specifically for Drupal 6. The book will show you techniques and tools to help you improve the look and feel of any Drupal 6-powered website
Starting from the basics of theme setup and configuration, you will learn about the Drupal theming architecture and the PHPTemplate engine, and then move on to modifying existing themes and building new themes from scratch. You will find out about tools to make your theme development easier, and also find invaluable information about under-documented elements of the theming system.
This book is the ideal introduction to theming in Drupal 6
This book helps you understand the logic behind the theming system employed in Drupal, and how to make it work for you. You will learn key concepts and work through examples with careful, step-by-step instructions.
The main requirements to make use of this book are knowledge of HTML, CSS, and a touch of creativity - you don't need to know anything about theming in Drupal, although you should be familiar with the basic operation of the Drupal system.
Although this book aims to make Drupal theming accessible to designers, theming in Drupal 6 involves writing some PHP code, and a basic knowledge of PHP will be helpful.
Regardless of your technical skills, this book will teach you to design themes for your Drupal websites in the easiest way.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 313
Veröffentlichungsjahr: 2008
Copyright © 2008 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: September 2008
Production Reference: 1190908
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847195-66-1
www.packtpub.com
Cover Image by Ric Shreves (<[email protected]>)
Author
Ric Shreves
Reviewers
Alan Doucette
Bret Johnson
Dave Myburgh
Senior Acquisition Editor
Douglas Paterson
Development Editor
Ved Prakash Jha
Technical Editor
Ajay Shanker
Editorial Team Leader
Mithil Kulkarni
Project Manager
Abhijeet Deobhakta
Project Coordinator
Rajashree Hamine
Indexer
Monica Ajmera
Proofreader
Camille Guy
Production Coordinator
Aparna Bhagat
Cover Designer
Aparna Bhagat
Ric Shreves is a partner in water&stone (www.waterandstone.com), a web development company that specializes in open source content management systems, including Drupal. Ric has been building websites professionally since 1999 and now works primarily as a web applications consultant. He lives in Bali with his wife Nalisa.
This book would not have been possible without the assistance and encouragement of the Packt Team, particularly Douglas Paterson, Damien Carvill, Ajay Shanker, Rajashree Hamine, and Ved Prakash Jha.
I would also like to thank the various individuals who took the time provide feedback on the previous edition of this text; their input had a positive impact on this version. Similarly, this work benefitted from the efforts of a number of reviewers, many of whom I have sadly never actually met. Thanks to all of you!
Looking a bit further afield, beyond the publishing realm, I would be remiss if I failed to mention my wife Nalisa, who's CSS skills are exceeded only by her patience with me during the course of this book.
Last but not least, my hat's off to the Drupal Team. Drupal 6 is a nice piece of work and shows clearly that the team is capable of continuing to deliver great code with a volunteer-driven, community-oriented project—no easy task, but they manage to make it happen (again and again). Cheers!
Alan Doucette is a partner of KOI (koitech.net), a web development company based in Jacksonville Beach, Florida, USA. He is passionate about PHP and open-source software. He is also very active in the web community as the Organizer of JaxPHP (jaxphp.org) and a contributor of Drupal.
Thanks go to the awesome Drupal community for all their daily hard work creating great open-source software. I would also like to thank my business partner, Ben Davis, for his support and dealing with a Drupal fanatic.
Bret Johnson is a Network Analyst in his hometown of Austin, TX. About a year and a half ago, he developed a keen interest in web development and has been a diligent student ever since. After becoming involved with maintaining his team's intranet site, he decided to start developing websites in his spare time. While researching PHP scripts for a certain project, he stumbled across Drupal and has been working with it ever since.
I would like to thank my family and friends for their support on all of my endeavors. I would also like to thank Packt Publishing for this great learning opportunity. Thanks also to the Drupal community, whose willingness to share their knowledge and advice, has become an invaluable asset.
Dave Myburgh started out in computers when entire operating systems ran on a single floppy disk and 640kb of RAM was a lot! He studied to become a molecular biologist, but never lost his passion for computers. Later, he ran a successful computer company for a couple of years in South Africa, before moving to Canada with his wife. He went back to science on his arrival in Canada, and since discovering Drupal two and a half years ago, he has once again started his own company, MybesInformatik. He loves working with Drupal, and is quite handy at theming. Since the birth of his son, his time is split between family and keeping his clients happy.
I would like to thank Dries and the Drupal community for making Drupal 6 such a great release. I'd also like to thank my wife and son for their support.
Welcome to Drupal 6 Themes. This book is an updated and expanded version of our Drupal 5 Themes title. Not only has the content been updated to reflect the changes in Drupal 6, but it has also been expanded to include new examples, together with more information and resources.
The goal of this book is to explain the principles behind the Drupal theming system and to provide a reference work for theme developers. The book provides an explanation of the Drupal theme framework and shows how you can use it effectively to manage the presentation of your site. Throughout the text, we illustrate key points by demonstrating practical solutions to common problems.
The book begins with an overview of the default theming system and how you can squeeze the most out of it. In the middle sections, we discuss how to execute more extensive modifications by directly working with Drupal's theme functions and styling. In the latter chapters, we discuss more advanced topics, like how to make the site's presentation layer responsive to the users or the content and how to build templates from scratch.
As the PHPTemplate engine is now so closely integrated with Drupal, we tend to focus on techniques that rely on PHPTemplate. We devote little space to building themes with alternative template engines or directly in PHP. Also, as this work is concerned with the presentation layer of your Drupal site, we do not cover creating new modules or writing custom functionality.
Please note that the author comes from a design background and that many of the explanations and rational reflect the author's background. In that light, this book may not always satisfy hardcore programmers who expect the technical issues to be explained in detail. This book should, however, make the life of many designers a little easier. We also hope that the extensive reference materials included in this book will allow this title to find a lasting home on the shelves of many Drupal developers.
Chapter 1 examines the working of the theme system in Drupal, and the different approaches to working with Drupal themes.
Chapter 2 takes a look at all the various theming options that are available in the default Drupal system. By way of example, we take a default theme and customize it using only the options provided by the system.
Chapter 3 will cover how the PHPTemplate theme engine works and how you can use this powerful tool.
Chapter 4 identifies all the themable elements in the Drupal system and tells you where to find the elements together with an explanation of their functions.
Chapter 5 will cover employing of intercepts and overrides to modify the default styling in your Drupal theme.
Chapter 6 takes a look at how to implement extensive modifications to a default Drupal theme. This is a hands-on example of the techniques covered in previous chapters.
Chapter 7 examines how you can build from scratch a new theme employing the PHPTemplate theme engine.
Chapter 8 takes a look at how the Drupal system enables you to vary the styling between sections, pages or users.
Chapter 9 covers the styling of forms in Drupal, one of the more complex areas in the system.
Appendix A is an inventory of the contents of all the stylesheets in the Drupal system.
Appendix B is a listing of tools and extensions that make your work with themes easier and more efficient.
Throughout this book, we will assume that you have the following package installed and available:
The main requirements of this book are knowledge of HTML, CSS, and a touch of creativity! Though this book aims to make Drupal theming accessible to designers, theming in Drupal 6 involves writing some PHP code, and a basic knowledge of PHP will be helpful.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code will be set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:
New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: "clicking the Next button moves you to the next screen".
Important notes appear in a box like this.
Tips and tricks appear like this.
Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, making sure to mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Visit http://www.packtpub.com/files/code/5661_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide the location address or website name immediately so we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with some aspect of the book, and we will do our best to address it.
In this chapter, we will introduce the concept of themes and explain the key role that themes play in the Drupal system.
The chapter covers the various types of themes, the basic elements of a theme, and the functions those elements fulfil. At the end of the chapter, we will also look at the themes contained in the Drupal distribution, and examine exactly what it is that makes each theme distinct.
The contents of this preliminary chapter provide the general comprehension necessary to grasp the big picture of the role of themes in Drupal. Think of the knowledge communicated in this chapter as a foundation upon which we can build the skills that follow in the subsequent chapters.
The theme of your Drupal site is responsible for the visitor's first impression of the site. Given the key role in shaping the presentation, a theme is arguably the most influential piece of your Drupal installation.
While the default Drupal distribution includes a set of themes that will prove sufficient for many users, I assume you are reading this book out of a desire to do more—whether it be only to install additional themes and then modify them to suit your needs, or whether you plan to build your own themes from scratch.
In order to grasp better some of the challenges (and opportunities) associated with Drupal themes, it is useful to look at three concepts that impact the way you use the system and the way in which you must plan your theme deployment. These three key concepts are basic to the approach throughout this book.
With Drupal, you can either set a single unified look for the entire site with a single template or you can control the look and feel of the individual parts of the site with multiple templates.
One source of confusion for many first time users of Drupal is that the default administrator interface is the same as the front-end interface seen by site visitors. Unlike other content management systems, there is not a purpose-built administration interface in Drupal.
By setting the configuration within the admin interface, you can assign a specific theme to act as the interface for your administration system, however, this option is not active by default. Designating a separate admin theme is discussed in Chapter 8.
During the installation process, the system is configured to display the Garland template both for the front end (the public view) and the back end (the administrator's view). This is an example of using a single unified look for the entire site—the simplest approach to theming a Drupal site. If you want to work with just one template throughout the site, you can.
The seamless integration of the administrator interface into the site works well in some cases, but in others it may be problematic. There will be situations where the use of the same theme for the visitors and the administrators is undesirable, for example, on a marketing-oriented site where the artistic theme used for the site visitors may be impractical for site administrators.
The system's default use of the same page template for both the front end and the back end conceals the existence of a great deal of flexibility and makes it non-obvious that you can do more with the themes. That's the bad news. The good news is that you can do more—much more!
The Drupal system allows you to specify different templates for different purposes on your site. You can, for example, build one page template for your homepage, another for your interior pages, and yet another for your administrator's use. Indeed, not only can you specify different templates for different pages, but you can also specify different templates for different parts of the same page. The sky is the limit as the theme engine also gives you the ability to provide styling for specific types of content or for the output of a particular module. The control is highly granular and with a little practice (and a little ingenuity), you will find the system to be very flexible.
In the following chapters, we will look at how to implement multiple themes and how to theme and configure all the various constituent parts of the Drupal system. You can quite literally, theme it all!
The code of a Drupal theme includes placeholders called regions. The regions are areas in a page where content is typically displayed. The site administrator can assign a variety of output to the regions through the block manager in the admin interface.
Modules are one of the most common sources of output in the Drupal system. Modules are standalone bits of code—mini applications in some cases—that extend the functionality of your site. The default distro includes a large number of modules. It is through modules that Drupal provides functions like the Forum, the Aggregator, and even additional administrative power, like the Throttle module.
Some modules produce output that appears on the screen, for example, the Forum module produces a threaded discussions functionality with extensive output. Other modules simply add functionality, for example the Ping module, which notifies other sites or services when your content has changed. The administrator is able to toggle modules on or off and able to assign the output of those modules—called blocks—to the various regions in the theme.
In addition to the blocks produced by modules, you can also create blocks specific to your installation. Manually created blocks provide an easy avenue for placement of additional information (for example, text or images), or, by inclusion of PHP code in the block, additional functionality.
Each of the blocks in the system, whether created by modules or manually created by the system administrator, can be themed individually, if you so desire.
The process of activating modules and assigning blocks to regions on the pages is one of the most basic and most important skills for a site administrator. Understanding how to administer the system and what options are available is key to building interesting and usable sites. A great deal of flexibility can be squeezed out of the system in this area alone.
This system, however, is not without complications. Module developers typically build their modules to be self-contained units. This independence also extends to the presentation layer of these discreet items of code. As a result, almost all the modules have distinct formatting and specific files that control that formatting. This approach to programming and modularization leads to a system in which a significant number of discrete units must be dealt with, adding greatly to the potential for complexity in changing the look and feel of a site to your specifications.
Each of the functional units—each module—is kept in a separate directory inside the Modules folder. Many contain their own CSS files, creating a large number of stylesheets scattered throughout the system. Add to that already daunting collection of modules any additional extensions you wish to install on your particular site and you can see how CSS juggling might come to dominate your life. Nevertheless, fear not, as styling all of this is manageable, using the technique discussed in this book.
The process of getting data from its raw form to its final displayed form provides several opportunities for you to affect the output prior to the data's arrival on the viewer's screen. While it is possible (even tempting!) to work at the lower levels—that is, hacking the files in the core files (or the modules or the theme engine)—I strongly advise against that. The recognized best practice approach to customizing themes emphasizes making changes at the higher levels, primarily to the theme files themselves.
The best practice approach to customizing themes involves intercepting and overriding files and styles—not altering the files in the Drupal core. In short, if you wish to style a particular block, instead of hacking the module that produces it, you will override the default module file with one of your own, or you will intercept the styles or functions of the module with those of your own (most likely, you will use a combination of both techniques). The new files and styles you create will be part of the theme itself—distinct from the core files.
By choosing to affect the system's output at the highest levels of Drupal's processes, we leave the core in its original state. This approach has several advantages— the most significant being that system upgrades and patches can be applied to the core without fear of losing modifications necessary to your presentation. Sites customized in this manner are easier to maintain, and your code remains portable and available for re-use in other deployments.
"override"—as used in this context, refers to creating a file, function, or style that is redundant with an existing file, function, or style and, courtesy of the order of precedence inherent in Drupal, the new file, function, or style will be in control. The use of intercepts and overrides to modify the look and feel of a Drupal theme is the subject of Chapter 5.
In the context of Drupal, the term "theme" means a collection of interrelated files that are responsible for the look and feel of the website. Other content management systems (CMS) use different names for the files that perform the same function in their particular systems—the most common term used being "template"
Expressed conceptually, a theme is a visual container that is used to format and display data on the screen. Expressed in terms of its component parts, a theme is a collection of files that format data into the presentation layer viewed by site visitors and system administrators. Expressed in simple terms: The theme determines how your site looks!
A theme contains many files that are familiar to web designers, including stylesheets, images, and JavaScript. A theme may also include some files whose extensions may not be so familiar, for example *.theme, or *.tpl.php files. The former is used by pure PHP themes; the latter extension appears in themes that employ the PHPTemplate theme engine bundled with Drupal. In later chapters, we will look at theme engines and their files in detail.
Throughout this book, we will use "theme" to refer to the collection of files responsible for displaying the information on the page. We will use "template" to refer to specific files of the theme, that is, the .tpl.php files.
Here are some of the official Drupal online resources:
Resource
URL
Main Drupal Site
http://www.drupal.org
Drupal Theming Forum
http://drupal.org/forum/3
Drupal Theming on IRC
IRC @ #drupal-themes on the Freenode network
Download Extensions
http://drupal.org/project
Drupal 6 Theme Guide
http://drupal.org/theme-guide
A theme engine is a collection of scripts and files that serve to interpret the programming language used and process the commands contained therein. As data is drawn from the database and from outside sources (if any), the theme engine plugs the data into a predetermined format for display.
There are several popular theme engines, each of which is designed to interpret different templating languages. Drupal is distributed with the PHPTemplate engine. PHPTemplate is popular for a variety of reasons, not the least of which being that the language it relies on is good old PHP—a preferred choice for many Web developers today.
While PHPTemplate is distributed with the Drupal core, historically there were a variety of other theme engines that could also be installed and used with the Drupal system. Among the most popular were XTemplate, Smarty, and PHPTal. With the advent of Drupal 6, the PHPTemplate engine has been further integrated into the Drupal core and frankly it is hard to find a good reason to look for something other than the default theme engine. Alternative theme engines are discussed briefly in Chapter 3.
What can be done with a Drupal theme? How much presentation flexibility does the system have? These are key questions that arise when evaluating Drupal for your project.
The themes included in the default distribution, while useful, don't really offer much in the way of variety. But don't let the default themes narrow your vision; the default themes are simple and are best viewed as basic examples or starting points for your theming efforts. The system is flexible enough to be used to create a wide variety of layout styles, from traditional portal layouts to more cutting-edge sites.
Just a few examples of the layout variety that can be achieved with Drupal themes. For a current list of some of the high-profile sites using Drupal, view the case studies page on Drupal.org: http://drupal.org/cases
When assessing a CMS in terms of suitability for purpose, programmers and designers often have different agendas.
With Drupal, there is good news for both parties. For programmers, the inclusion of the PHPTemplate engine in the Drupal distribution means it is possible to tailor the output to match a variety of criteria. For designers, the flexibility of the Drupal approach to site building allows for the creation of attractive and brand-sensitive interfaces (not just a cookie-cutter portal or blog site).
The system offers the ability to create custom templates and to specify your modified files over the default files—all without having to actually hack the Drupal core. While it may take a while for a newcomer to become comfortable with the Drupal approach to the presentation layer, it is worth the effort, as a little knowledge can go a long way towards allowing you to tailor the system's output to your specific needs.
When you access a Drupal website, what you see on the screen is the result of the site's active theme files. As the theme files call the functions that produce the data, the theme also sets the styling, the position, and the placement of the data on your screen. A lot of work for a small group of files....
Within a web page layout, a Drupal theme designer can designate certain general areas to fulfill certain functions. For example, in a typical 3-column theme, the center column is used to hold the primary content whereas the two smaller side columns contain secondary information. Screen space within each of those areas is also allocated according to the designer's priorities.
In Drupal, that main content area is called the Content Column and those columns on the side are known as Sidebars.
Drupal theme files segregate the elements on the page through the definition of markers called regions. A theme developer can place the regions anywhere on the page by adding a short statement to the code of the appropriate file.
The default Garland theme, showing hard-coded regions.
Adding or modifying the regions in a theme is discussed in Chapter 3.
Wherever regions have been specified, the site administrator can then assign module output, which in Drupal-speak is called a block.
The Right Sidebar region of the Garland theme, showing sample block assignments. Note how the blocks are nested inside the region.
Regions are, in other words, placeholders inside the page layout where a site administrator can position functional output; this is most frequently done by assigning blocks to the desired region.
Regions must be coded into your theme files and are, therefore, primarily the province of the theme developer. Blocks, on the other hand, can be created and manipulated by the site administrator from within the admin interface (without having to modify the code).
Blocks can be created in two fashions:
Regions that have no content assigned to them are inactive, but remain eligible for block assignment. Note in the illustration that the regions labeled Header, Left Sidebar, Right Sidebar, and Content all have output assigned to them. Those regions are active. The Footer region, in contrast, has no output assigned to it and is inactive on this particular page.
Drupal themes can be created in a manner that allows inactive regions to be hidden from view—the Garland theme includes this feature. Where nothing is assigned to a left or right sidebar, the entire region collapses and hides from view.
To view the block placement in each of the default templates of your distro, log in to your Drupal site as an administrator and then go to Administer | Site building | Blocks