34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Themes are among the most powerful features that can be used to customize a website to fit your needs. The greatest strength of Drupal lies in its design, which, when done right, allows developers to customize every aspect of the site. Although it might sound easy to customize the look of your site, it's not a cakewalk to build custom themes that are easy to administer and maintain.Drupal 6 Theming Cookbook provides a plethora of recipes that enable Drupal template designers to make full use of Drupal's extensibility and style their site just the way they want it. It is a well-rounded guide, which will allow users looking to theme their Drupal sites to do so by taking full advantage of Drupal's theming system. It covers numerous aspects from creating custom themes to using the powerful CCK, Views, and Panels modules to create rich designs that are easy to administer and maintain.Structured as a collection of recipes to perform a wide variety of tasks, this book will guide readers through most important aspects of Drupal theming. It starts off with recipes dealing with the basics of Drupal's theme system: you will find recipes for solving all your problems with regions and blocks. It then moves on to advanced topics such as creating a custom theme and using it to modify the layout and style of the content that is output on a page. A substantial number of recipes are dedicated to Drupal's template system, which will provide you with a solid foundation in order to override the output of Drupal and contributed modules. Furthermore, as the combination of modules such as CCK, Views, and Panels is so widely prevalent, chapters have been dedicated for each of these modules. With this book, you'll learn to get the most out of Drupal's templating system and its modules to create rich designs for your site.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 377
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
Drupal 6 Theming Cookbook
Drupal 6 Theming Cookbook
Copyright © 2010 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, nor Packt Publishing, and its dealers and 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 of 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: November 2010
Production Reference: 1081110
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847198-68-6
www.packtpub.com
Cover Image by Vinayak Chittar (<[email protected]>)
Credits
Author
Karthik Kumar
Reviewers
Peter Brady
Kevin Davison
Sheena Donnelly
Richard Eriksson
Jake Strawn
Acquisition Editor
Sarah Cullington
Development Editor
Wilson D'Souza
Technical Editors
Manasi Poonthottam
Rupal Pravin Joshi
Indexer
Hemangini Bari
Editorial Team Leader
Mithun Sehgal
Project Team Leader
Lata Basantani
Project Coordinator
Leena Purkait
Proofreader
Joanna McMahon
Graphics
Nilesh Mohite
Production Coordinator
Adline Swetha Jesuthas
Cover Work
Adline Swetha Jesuthas
About the Author
Karthik Kumar is a Drupal developer residing in Chennai, India. He first came across Drupal in late 2004 and has been a fan ever since. He maintains a number of modules on http://drupal.org under the moniker Zen (http://drupal.org/user/21209), and has also made substantial contributions towards the development of Drupal core.
Acknowledgements to the reviewers—Peter Brady, Kevin Davison, Sheena Donnelly, Richard Eriksson, and Jake Strawn—for their careful scrutiny. To all the people at Packt involved in the publishing of this book—Sarah Cullington, Wilson D'Souza, Sunny Kansara, Priya Mukherji, Leena Purkait, Sudha Rao, and Patricia Weir—for their guidance and patience. To Dries and the Drupal developer community for making Drupal what it is today.
Finally, this book is dedicated to my parents for all freedoms given.
About the Reviewers
Kevin Davison is a Web Generalist, Content Strategist, "Drupaler", and Owner of Quevin, LLC in San Francisco, California. Since Netscape Navigator 2.0, Kevin has built hundreds of dynamic websites and he recently finished a Technical Writing degree at SFSU. His experience with Drupal began as an experiment on Quevin.com, and now it has become his passion. Find Kevin actively involved at DrupalCon SF, SFDUG, Drupal.org support, Quevin, and with the Drupal community on IRC (Quevin).
Quevin—the business—stands for a system of web production methodologies and iterative development interactions to help ensure the success of complex website projects. Quevin, LLC isn't a large company, although it has produced like one since 2007.
Thanks to the Drupal community for making all of this possible, and to Dries for having the vision. Packt Publishing has made this a great learning opportunity. And thanks to my wife especially for her support.
Richard Eriksson has been a member of the Drupal community since 2004. Richard worked on the community support and systems administration team at Bryght, the first commercial Drupal venture, and subsequently Raincity Studios. He has since struck out on his own with his consultancy, Ethical Detergent.
Jake Strawn has been working with the web since 1998, and started with a brief background in HTML/CSS, moving into PHP/MySQL and web application programming. After almost eight years of PHP/MySQL programming, he discovered Drupal, and his life changed forever, making complex tasks simple with a framework built for extensibility and efficiency. Jake has extensive experience with the Drupal framework with over 800 commits to his name (http://drupal.org/user/159141). He has been a speaker at many Drupal events including DrupalCons, and DrupalCamps evolved his programming background to include design capabilities to create and deliver amazing looking sites.
Jake works almost exclusively with Drupal 7 now and has invested hundreds of hours into learning and expanding on the new Drupal 7 APIs, including upgrading his Omega base theme (http://drupal.org/project/omega), which promises to be one of the most powerful base themes in Drupal 7.
Jake is also a contributing author on the Definitive Guide to Drupal 7 set to be published shortly after an official release of D7. Jake is writing the jQuery and AJAX chapter, which deals with changes to jQuery in D7, and also the new AJAX system.
Jake also recently relaunched his blog (http://himerus.com) on Drupal 7.
Preface
Themes are among the most powerful and flexible features available when it comes to the presentation of a website. The greatest strength of Drupal lies in its design which, when done correctly, allows developers and designers to customize and micromanage each and every aspect of the site. Furthermore, the Drupal theming system and its APIs allow for the design of custom themes that are easy to administer and maintain.
This book provides a plethora of solutions that enable Drupal theme designers to make full use of all its features and its inherent extensibility to style their sites just the way they want to. It covers numerous aspects from using contributed and custom themes to leveraging the powerful CCK, Views, and Panels triad of modules to create rich designs that are easy to administer and maintain.
Structured as a collection of recipes to perform a wide variety of practical tasks, this book will systematically guide readers towards solutions that are central to Drupal theming. Each recipe is divided into the following sections:
While it is recommended that readers follow the recipes in each chapter in sequence, it is also possible to sift through the recipes at random. Special attention should always be paid to the Getting ready section of each recipe which provides information on preliminary steps that need to be performed, and in some cases, specify if the recipe builds on the result of earlier recipes in the same chapter.
What this book covers
Chapter 1, Drupal Theme Basics, introduces the reader to the basic elements of Drupal theming, such as downloading and installing a contributed theme, and learning how to add and customize blocks.
Chapter 2, Beyond the Basics, explains the concept of theme engines and sub-themes and briefly introduces the topic of template overrides. It also includes essentials recipes dealing with adding and optimizing CSS files.
Chapter 3, Custom Themes and Zen, focuses on starter themes, specifically Zen.
Chapter 4, Templating Basics, details how to customize page elements and content by overriding template files.
Chapter 5, Development and Debugging Tools, provides essential information on debugging and expediting development through the use of a number of tools.
Chapter 6, Advanced Templating, explores the PHPTemplate theme engine further and delves into using techniques such as variable manipulation and preprocess hooks to customize various theme elements.
Chapter 7, JavaScript in Themes, covers the use of JavaScript and jQuery in Drupal themes.
Chapter 8, Navigation, contains recipes which focus on theming navigational elements in a Drupal theme such as menus, breadcrumbs, pagers, and so on.
Chapter 9, Form Design, discusses the Drupal Forms API from a theming point of view.
Chapter 10, Customizing CCK, demonstrates how to theme CCK nodes and fields and also covers the use of customization of the ImageField and ImageCache modules, to display and style images to suit the theme.
Chapter 11, Views Theming, focuses on the Views module from a themer's perspective.
Chapter 12, Rapid Layouts with Panels, shows how to create complex layouts using the Panels module and demonstrates its use in conjunction with the CCK and Views modules.
What you need for this book
A standard Drupal 6 development site is all that is required to run through the recipes in this book. The system requirements for Drupal is available at http://drupal.org/requirements. Since this book deals with theming, it is assumed that this test site is already up and running.
Who this book is for
This book is written for Drupal developers who want to refresh the look and feel of their sites. If you are a Drupal site administrator who is looking to go beyond the basics and customize the presentational aspects of your Drupal site, then this book is for you. It assumes that readers are familiar with rudimentary PHP and acquainted with Drupal installation and general usage. Readers are also expected to have knowledge of CSS and XHTML.
Reader feedback
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 send an e-mail to <[email protected]>, and mention the book title via 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 e-mail <[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.
Customer support
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.
Tip
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
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 us with the location address or website name immediately so that 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.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Drupal Theme Basics
We will be covering the following recipes in this chapter:
Introduction
Drupal is designed to separate logic from presentation with the former usually handled through the use of modules and the latter via themes. Although this separation is not absolute, it is distinct enough to facilitate quick and efficient customization and deployment of websites. This especially holds true when the site is developed in a team environment as it enables developers, designers, and content managers to work independently of each other.
Themes are synonymous with skins in other applications and control the look and feel of a website. Each theme can consist of a variety of files ranging from a .info configuration file which registers the theme with Drupal to .tpl.php template files accompanied by CSS, JavaScript, and other files that determine the layout and style of the content. Depending on the nature of the site and its requirements, developers can choose from the slew of themes available on http://drupal.org as contributed themes or, instead, decide to roll their own.
Contributed themes are, as the name suggests, themes which have been contributed by the Drupal community at large. They usually tend to be the designs that have been developed by a user for a site and then shared with the community, or designs from other packages or sites which have been ported over to Drupal. Consequently, while they are ready-to-wear, they are generic in nature and lack uniqueness. Furthermore, the quality of these themes vary significantly from one to the other with some being excellent and others well below par. Contributed themes are primarily used for sites which require rapid deployment or in hobby sites with basic requirements where uniqueness is not a factor.
Custom themes, on the other hand, are a necessity for sites with unique requirements in layout, usability, and design. While they are often built from the ground up, it is now established practice to use special starter themes as a base on which they can be extended.
Contributed themes can be accessed at http://drupal.org/project/themes. This page, by default, lists all available themes and provides filters, to narrow down on those which are compatible with Drupal 6, and sorting options to peruse contributions based on popularity, update status, and other criteria. More information about a particular theme can be accessed by clicking on its Find out more link.
Prior to choosing a contributed theme, there are a few considerations to keep in mind. Firstly, it is important to have a general idea of the layout required for the site with the chief concern usually being the column layout of the theme. Most themes support a three-column (with two sidebars and a content area) layout which also work as two-column layouts (one sidebar) if no content is added to one of the sidebars. The more exotic ones support four or more columns and are only really a viable option for special cases.
Secondly, while fewer themes nowadays are being laid out using tables, they are still around. Unless there is no other recourse, these should be avoided in favor of CSS layouts.
Next, check to see whether the theme is a fixed-width or a fluid theme or supports both types. Fixed-width themes, as the name suggests, maintain a predefined width irrespective of the user's screen resolution. As a result, the site has a consistent appearance. Fluid layouts, or liquid layouts as they are sometimes referred to, grow according to the user's screen size and consequently make better use of the available real estate. The question of which to use is generally decided on a case by case basis.
The Drupal theme system also supports the use of different theme engines to render the design. Each engine uses a different process by which the designer can interact with Drupal to implement a design. The PHPTemplate engine is built into Drupal and is by far the most popular of the ones available. The vast majority of contributed themes available are compatible with PHPTemplate. Nevertheless, it is prudent to check the specifications of the theme to ensure that it does not require a different theme engine. Contributed theme engines can, if necessary, be downloaded from http://drupal.org/project/theme+engines.
Every theme's project page usually provides screenshots and explicitly specifies layout and other useful information. A number of them also link to a demonstration page—as in the following screenshot—where the theme can be previewed and tested using different browsers, screen resolutions, and so on. A third-party site http://themegarden.org, which showcases various contributed themes, comes in very handy for the same reason.
Additionally, project pages customarily link to their CVS repositories where files within the theme can be viewed prior to downloading. It is also worth exploring the issue queue of a theme to see if bugs have been reported and are being addressed in a timely manner.
Note
CVS is a tool used by Drupal developers to manage their code and control their releases. It is effectively a repository for modules, themes, and Drupal itself. More information on CVS is available at http://drupal.org/handbook/cvs.
Once the list of candidate themes has been narrowed down to a short list, the only way to test them further is to download and install them. The theme project page lists available downloads based on version and stability along with release notes which might be useful to glance through as well. Download the latest release recommended for Drupal 6. The recipes in this chapter will address the installation and configuration of a downloaded theme.
Installing and enabling a theme
This recipe will cover the steps required to install and enable a downloaded theme.
Getting ready
Downloaded themes are usually in tar.gz format. These files can be extracted using archive programs such as 7-Zip (http://www.7-zip.org) as well as commercial packages such as WinZip (http://www.winzip.com) and WinRAR (http://www.rarlabs.com).
How to do it...
To install a theme, open Windows Explorer and navigate to the Drupal installation.
In the last screenshot, we see the Acquia Marina theme's installation folder situated within sites/all/themes. Themes also occasionally contain a README.txt file which provides documentation which is worth a read-through.
Tip
File structure options
In this recipe, we have chosen to use the folder sites/all/themes/mytheme to store our theme. By positioning our theme inside sites/all, we are stating that the theme is to be available to all sites using this Drupal installation. In other words, this enables multi-site setups to share modules and themes. In case we want to restrict access to the theme solely to one particular site, we would position its folder within sites/foo.example.com/themes/ where foo.example.com is the site in question.
In the last screenshot, we can see that the contributed theme Acquia Marina has been enabled and is set to be the default theme for the site. Drupal comes packaged with six core themes including Bluemarine shown in the last screenshot.
Click on Save configuration to enable the new theme and also set it as the default theme for the site.
How it works...
Drupal scans folders within sites/all/themes and, in particular, looks for files with the extension .info. This file contains information about the theme such as its name, description, version compatibility, and so on. If the theme is compatible, it is listed on the theme administration page.
A site can have multiple themes enabled. Out of these, only one can be chosen as the default theme. The default theme is, as the name suggests, the primary theme for the website. When more than one theme has been enabled, users with the select different theme permission can optionally select one of the other available options as their personal theme.
There's more...
Drupal makes it easier for us to manage our site by following preset naming conventions when it comes to the folder structure of the site.
Folder structure
Themes do not necessarily have to be placed at the root of the sites/all/themes folder. For organizational purposes, it might be useful to create sites/all/themes/contrib and sites/all/themes/custom. This will allow us to differentiate between downloaded themes and custom themes.
Tip
Since Drupal's core themes are located within the root themes folder, we might be led to believe that this might also be a good place to store our contributed or custom themes. While this will certainly work, it will prove to be a bad decision in the long run as it is never a good idea to mix core files with custom files. The chief reason for this separation is manageability—it is far easier to maintain and update Drupal when there is a clear distinction between the core installation, and contributed modules and themes.
Uploading a new logo
Most websites incorporate a logo into their design, usually accompanying the site name in the header. For example, the Drupal logo or "Druplicon" in the following screenshot represents the default logo displayed for every core theme that comes packaged with Drupal.
These logos tend to play an important role in the branding and identity of the site and are frequently an important facet in the overall design of the theme. This recipe details the steps involved in changing the logo displayed in a theme.
Getting ready
The new logo should be in a suitable format and should balance quality with size. The usual rule of thumb is as follows:
How to do it...
Adding a custom logo to a theme can be done using the following steps:
How it works...
The uploaded file is saved in the Drupal filesystem and the path to the logo is registered as a configuration setting in the database. During display, the theme uses this setting to embed the logo within the Drupal page. The following screenshot displays the Bluemarine core theme with its default logo replaced with a custom PNG.
There's more...
Besides specifying the logo file via a theme's configuration page, there are other avenues which can also be pursued.
Directly linking to image files
Alternatively, instead of uploading the logo via Drupal, use the Path to custom logo textfield to point to an existing logo file on the server. A third option is to just place the logo file in the theme's folder and rename it as logo.png. Provided that the Use the default logo field is checked, the theme will automatically look for this file in its folder and use it as its logo.
Uploading a new favicon
This recipe details the steps involved in changing the favicon displayed with the theme. A favicon, dubbed as a shortcut icon in the Drupal interface, is an image which is particular to a site and is displayed in the address bar of the browser next to the site URL as well as the browser tab. It also makes its presence felt if the site is bookmarked in the browser as in the following screenshot:
Getting ready
We are going to need the icon file to be added which is recommended to be of size 32x32 pixels or higher. An example icon file named favicon.ico can be seen in the misc folder in the Drupal installation.
How to do it...
Adding a custom favicon to the theme can be done by performing the following steps:
How it works...
The uploaded file is saved in the Drupal filesystem and the path to the icon is registered as a theme setting in the database. When a page is being rendered, the Drupal theme system designates this .ico file as the favicon for the site.
In the following screenshot, we can see the logo image added in the previous recipe also being used as the basis for a favicon:
There's more...
Besides manually uploading the icon file via the theme's configuration page, other options exist to perform the same task.
Alternative methods
Alternatively, instead of uploading the icon file via Drupal, use the Path to custom icon textbox to point to the icon file on the server. A third option is to place the icon file in the theme's folder and rename it favicon.ico. Provided that the Use the default shortcut icon field is checked, the theme will automatically look for this file in its folder and use it as its favicon. Not specifying a favicon will result in the site using Drupal's default icon, Druplicon, instead.
Tip
Other formats besides the ICO format are also supported by some, but not all browsers. More information is available at http://en.wikipedia.org/wiki/Favicon#Browser_support.
Adding a slogan to the theme
This recipe details the steps involved in adding a slogan to the theme. Site slogans are a common feature on most sites and are typically witty or involve clever wordplay. They are synonymous with catchphrases, tag-lines, mottoes, and so on.
Drupal offers a global setting to store the site slogan which is customarily displayed by themes near the site logo or site name, and is also regularly added to news feeds and site e-mails as part of the site's identity.
Getting ready
Think up a good slogan! This is the biggest stumbling block to getting this recipe right.
How to do it...
Adding a slogan to a theme involves the following steps:
The resulting page should have multiple tabs: one titled Global settings which affects all themes and others representing each enabled theme. Configuration options under the Global settings tab serve as the site's default settings for all themes while equivalent settings within each theme's tab work as overrides for the global settings.
On the Global settings page, look for the Site slogan setting in the Toggle display section and ensure that it is checked.Click on the Save configuration button to save our changes.Tip
If any of the themes have overridden the global settings, then the Site slogan checkbox will also need to be checked in its respective theme tab.
How it works...
Drupal saves the provided slogan as a configuration setting in the database. The theme system makes this setting available as a variable to the theme which outputs it accordingly when the page is being rendered.
In the following screenshot, we can see that the slogan is enabled and is displayed below the logo and name of the site.
There's more...
Besides the site slogan, other site variables are also available on the theme configuration pages.
Similar settings
The Drupal Site information page seen in this recipe also contains fields for other settings such as the site name, mission, and footer which are also similarly exposed by themes.
Allowing users to choose from multiple themes
This recipe details the steps involved in enabling users to choose which theme they wish to use when they are viewing the site. For example, users with accessibility issues might prefer to view the site using a high-contrast theme, or those viewing the site via monitors with low resolutions might prefer a theme which uses a fluid layout.
Drupal's flexible approach to themes includes the ability to allow theme-specific block arrangements. As a result, this allows us to, for example, have a separate theme for site contributors with, perhaps, an extra sidebar equipped with a contributor-specific block arrangement.
Getting ready
Since we are going to be working with multiple themes in this recipe, we will need at least two themes to have been enabled on the site. This can be done via the theme administration page at admin/build/themes (Home | Administer | Site building | Themes) as seen earlier in this chapter.
How to do it...
We can enable users to choose between the different themes which are available through the following steps:
How it works...
Drupal saves the users' choice as a configuration setting in the database. When a page is to be displayed, Drupal notices this setting and themes the page using the specified theme instead of the site's default theme.
