You are previewing Drupal 6 Theming Cookbook.
O'Reilly logo
Drupal 6 Theming Cookbook

Book Description

Over 100 clear step-by-step recipes to create powerful, great-looking Drupal themes

  • Take control of the look and feel of your Drupal website

  • Tips and tricks to get the most out of Drupal's theming system

  • Learn how to customize existing themes and create unique themes from scratch

  • Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

  • In Detail

    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.

    A collection of recipes that cover all aspects of customizing and developing unique Drupal themes

    Table of Contents

    1. Drupal 6 Theming Cookbook
      1. Drupal 6 Theming Cookbook
      2. Credits
      3. About the Author
      4. About the Reviewers
      5. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Errata
          2. Piracy
          3. Questions
      6. 1. Drupal Theme Basics
        1. Introduction
        2. Installing and enabling a theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Folder structure
        3. Uploading a new logo
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Directly linking to image files
        4. Uploading a new favicon
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Alternative methods
        5. Adding a slogan to the theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Similar settings
        6. Allowing users to choose from multiple themes
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Displaying a different theme for administration
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Adding an existing block to the theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Theme-specific block layouts
        9. Adding a custom block to the theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Doing more with custom blocks
        10. Displaying a block only on the front page
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Multiple pages
            2. Matching against URL aliases
            3. Exclusive display
        11. Controlling block visibility based on user role
          1. Getting ready
          2. How to do it...
          3. How it works...
        12. Controlling block visibility based on node type
          1. Getting ready
          2. How to do it...
          3. How it works...
      7. 2. Beyond the Basics
        1. Introduction
        2. Understanding the anatomy of a theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Other theme engine types
        3. Creating a sub-theme based on a core theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Garland and Minnelli
            2. Chaining
        4. Overriding base theme elements in a sub-theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Clean upgrades
        5. Changing the screenshot image of a theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using the .info file
        6. Including a CSS file in a theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Overriding the base theme's stylesheet
        7. Enabling CSS optimization
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. When to use it
            2. Other optimizations
        8. Creating the mysite module to hold our tweaks
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Module builder
        9. Adding a CSS file from a module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding inline CSS
        10. Displaying a different theme for each day of the week
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Displaying a random theme
        11. Creating a fresh look using the color module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Custom presets
      8. 3. Custom Themes and Zen
        1. Introduction
        2. Clearing the theme registry
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Clearing the cache using the Development block
        3. Creating a theme from scratch
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Creating myzen, a Zen-based theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Sub-theme of Zen
            2. RTFM
            3. Rebuild theme registry automatically
        5. Choosing a CSS layout for myzen
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Sidebar support
            2. RTL
                1. Custom layouts
        6. Overriding Zen template files with myzen
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Adding a custom region to myzen
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Adding a background image to the theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Custom file structures
            2. Unused stylesheets
        9. Adding a conditional stylesheet in Zen
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Conditional stylesheets for other themes
        10. Modifying myzen's theme settings
          1. Getting ready
          2. How to do it...
          3. How it works...
      9. 4. Templating Basics
        1. Introduction
        2. Changing the layout of a page using page.tpl.php
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Customizing the appearance of a particular node type
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Hiding submission information
        4. Customizing the appearance of a specific node
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Theming made easy using the Devel module
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Theme overrides using the Theme developer module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Drupal API documentation
            2. Compatibility issues
        7. Listing all available variables in a template file
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Doing it manually
            2. Documentation
        8. Displaying the profile name instead of a username
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Realname module
        9. Styling the site maintenance page
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Maintenance template
      10. 5. Development and Debugging Tools
        1. Introduction
        2. Finding the right function to use to theme an object
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Function reference and the theme registry
        3. Analyzing variables using the Devel module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Removing debug functions after use
            2. Other useful Devel module functions
        4. Generating sample content using the Devel generate module
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Resetting the default theme manually
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using the Devel module to view and edit database variables
        6. Live preview with Web Developer
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Editing HTML and CSS using Firebug
            2. View all CSS rules at once
        7. Validating HTML and CSS using Web Developer
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Validating HTML and CSS automatically
        8. Turning off JavaScript in the browser
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Disabling JavaScript in Opera
            2. Disabling JavaScript in Internet Explorer 8
        9. Disabling CSS in the browser
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Disabling CSS in Internet Explorer 8
        10. Inspecting elements and debugging CSS using Firebug
          1. Getting ready
          2. How to do it...
          3. How it works...
        11. Diagnostic logging of JavaScript using Firebug
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Other console variants
            2. Breakpoints, watches, and more
      11. 6. Advanced Templating
        1. Introduction
        2. Adding a variable to all node templates
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Deleting a variable from the page template
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Adding a custom theme setting
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Zen's breadcrumb settings
            2. Complex form options
        5. Hiding all regions on a page
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Selective hiding of regions
        6. Displaying the last updated date instead of the submitted date
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. format_interval() and other format functions
        7. Module-based variable manipulation
          1. Getting ready
          2. How to do it...
            1. How it works...
            2. There's more...
              1. Adding classes to Zen-based themes
          3. Optimizing using hook_preprocess()
            1. Getting ready
            2. How to do it...
              1. How it works...
            3. Displaying the date field in calendar form
              1. Getting ready
              2. How to do it...
              3. How it works...
      12. 7. JavaScript in Themes
        1. Introduction
        2. Including JavaScript files from a theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Executing JavaScript only after the page is rendered
            2. Drupal's JavaScript behaviors
        3. Including a JavaScript file only for certain pages
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Checking paths with greater accuracy
        4. Giving the username textfield keyboard focus
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Keyboard focus on the first available textfield
        5. Exporting a variable from PHP to JavaScript
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Adding default text to the search textfield
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Displaying comments in compact form
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Adding column-sort functionality to tables
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Column filters and more
        9. Minimizing and maximizing blocks using JavaScript
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Minimizing or maximizing particular blocks by default
      13. 8. Navigation
        1. Introduction
        2. Adding a menu to our theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Using the primary links block
        3. Adding content pages to the menu
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Access control and menu visibility
        4. Styling the primary links menu
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding secondary links
        5. Contextual submenus using the Menu module
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Adding a drop-down navigation menu
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Horizontal menus
        7. Customizing breadcrumbs in Zen-based themes
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Hiding node links using CSS
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Styling all external links in a page
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. External links configuration settings
        10. Styling the Drupal pager
          1. Getting ready
          2. How to do it...
          3. How it works...
      14. 9. Form Design
        1. Introduction
        2. Finding the form ID of a form
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Identifying the form ID from the HTML source
        3. Changing the height of a textarea
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Altering columns
        4. Turning off the resize feature for textareas
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Replacing Drupal's textareas with a WYSIWYG HTML editor
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Reordering fields in a form
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Replacing a standard submit button with an image button
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Styling the comment form
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Using a fieldset to group fields
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Collapsible fieldsets
        10. Theming form elements
          1. Getting ready
          2. How to do it...
          3. How it works...
        11. Adding class attributes to form elements
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Accounting for the search block
      15. 10. Customizing CCK
        1. Introduction
        2. Creating a custom node type
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adjusting the display order of fields
            2. Multiple-value fields
            3. Contributed modules: e-mail and phone
        3. Hiding fields and labels during display
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Displaying fields together using field groups
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Field groups and display fields
        5. Theming CCK content using hook_nodeapi()
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Theming a CCK field using a template file
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Adding image support using the ImageField module
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Using ImageCache to scale and crop images on the fly
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Adding lightbox support for images
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Advanced customizations using Colorbox
      16. 11. Views Theming
        1. Introduction
        2. Creating a simple view
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Styling a node listing using a grid display
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Styling as a table
        4. Merging columns with the Views table style plugin
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Default views
        5. Embedding a view inside a node template
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. views_embed_view() and view titles
            2. Embedding Views using the Viewfield module
        6. Overriding the Views table style plugin
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Naming conventions
        7. Adding a class to a Views style
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Preprocess functions versus template files
        8. Creating a custom Views style plugin
          1. Getting ready
          2. How to do it...
          3. How it works...
      17. 12. Rapid Layouts with Panels
        1. Introduction
        2. Using Panels to create a front-page layout
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Embedding content in a panel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Editing existing content
            2. Views support for Panels
        4. Styling a panel with rounded corners
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Styling individual panes
        5. Creating custom styles with the Panel stylizer module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Stylizer for regions and panes
        6. Changing the layout of a panel
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Creating a custom panel layout
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Removing regions, rows, and columns
        8. Replacing the site contact page with a panel
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Embedding tabbed panels in blocks
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. The flexibility of Mini panels