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

Book Description

Over 95 recipes that cover all aspects of customizing and developing unique Drupal themes.

  • Spice up your Drupal themes

  • A complete update for Drupal 7, with added information for the Field API, Views, and Panels

  • Part of Packt’s Cookbook series with lots of practical recipes for solving the most common theming problems

  • In Detail

    The greatest strength of Drupal lies in its design which, when employed correctly, allows developers to literally handcraft every aspect of a site, so that it looks and performs exactly how they want it to. While it is reasonably straightforward to download a Drupal theme and install it, doing anything beyond that is not. Using custom themes requires familiarity and experience with Drupal's theming system, especially if you want to easily administer and maintain your themes.

    Drupal 7 Theming Cookbook provides a plethora of recipes that enable Drupal template designers to make full use of its extensibility and style their site just the way they want it. It is a well-rounded guide which will allow users to take full advantage of Drupal's theming system.

    This cookbook starts with recipes which address the basics of Drupal's theme system, including 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 content. With the introduction of the Field API and the growing importance of Views and Panels in Drupal 7, chapters have been dedicated to each feature. You will also learn many techniques for dealing with Drupal’s templating system, which will allow you create themes which surpass even the existing Drupal and contributed modules.

    Table of Contents

    1. Drupal 7 Theming Cookbook
      1. Table of Contents
      2. Drupal 7 Theming Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. 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. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 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
            2. Disabling a theme
          5. See also
        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
          5. See also
        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. See also
        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
          5. See also
        6. Displaying a different theme foradministration
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. 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
          5. See also
        8. 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
          5. See also
        9. 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
          5. See also
        10. Controlling block visibility based on user role
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        11. Controlling block visibility based on node type
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      9. 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 subtheme based on a core theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Chaining
          5. See also
        4. Overriding base theme elements in a subtheme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Clean upgrades
          5. See also
        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
          5. See also
        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
          5. See also
        7. Enabling CSS optimization
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Internet Explorer and the number 31
            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
          5. See also
        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
            2. Naming conventions
          5. See also
        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
          5. See also
        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
      10. 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
          5. See also
        3. Creating a theme from scratch
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Creating myzen a Zen-based theme
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Subtheme of Zen
            2. RTFM
            3. Rebuild theme registry on every page
          5. See also
        5. Choosing a CSS layout for myzen
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. What is RTL?
            2. Custom layouts
          5. See also
        6. Overriding Zen template files with myzen
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Adding a custom region to myzen
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Hidden regions
        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
          5. See also
        9. Adding a conditional stylesheet in Zen
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding conditional stylesheets from modules and themes
          5. See also
        10. Modifying myzen's theme settings
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      11. 4. Templating Basics
        1. Introduction
        2. Changing the structure of a page using template files
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Customizing the appearance of a particular node type
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Customizing the appearance of a specific node
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Template variables and documentation
          5. See also
        5. Theming made easy using the Devel module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
          5. See also
        7. Styling the site maintenance page
          1. Getting ready
          2. How to do it...
          3. How it works...
      12. 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
          5. See also
        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
          5. See also
        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
          5. See also
        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
          5. See also
        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
          5. See also
        10. Inspecting elements and debugging CSS using Firebug
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
          5. See also
      13. 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...
          4. See also
        3. Deleting a variable from the page template
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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. See also
        5. Hiding all regions on a page
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
          5. See also
        7. Module-based variable manipulation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Optimizing using hook_preprocess()
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Displaying the date field in calendar form
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      14. 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
          5. See also
        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
          5. See also
        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. See also
        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...
          4. See also
        7. Displaying comments in compact form
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. 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
      15. 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 Main menu block
          5. See also
        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
          5. See also
        4. Styling the Main menu
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. The Secondary links menu
          5. See also
        5. Contextual submenus using the Menu module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
          5. See also
        7. Customizing breadcrumbs in Zen-based themes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. Hiding node links using CSS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
          5. See also
        10. Styling the Drupal pager
          1. Getting ready
          2. How to do it...
          3. How it works...
      16. 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
          5. See also
        3. Changing the height of a textarea
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Targeting only node forms
            2. Targeting particular node forms
            3. Altering columns
        4. Replacing Drupal's textareas with aWYSIWYG HTML editor
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Reorganizing fields in a form
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Replacing a standard submit button with an image button
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Styling the comment form
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Targeting specific comment forms
        8. 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
            2. Vertical tabs
          5. See also
        9. Theming form elements from a module
          1. Getting ready
          2. How to do it...
          3. How it works...
        10. Adding class attributes to form elements
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      17. 10. Theming Fields
        1. Introduction
        2. Creating a new 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
          5. See also
        3. Displaying fields together using fieldgroups
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Manipulating display layouts using fieldgroups
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Vertical tabs
            2. Accordions
          5. See also
        5. Theming a field using a template file
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Adding image fields using the Image module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Using Image styles to scale and crop images on the fly
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        8. 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
            2. Media modules
      18. 11. Views Theming
        1. Introduction
        2. Creating a simple View
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
            2. Adding custom CSS classes to the View
            3. Adjusting markup for fields
        4. 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
          5. See also
        5. Overriding the Views table style format
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Creating a custom Views style plugin
          1. Getting ready
          2. How to do it...
          3. How it works...
      19. 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...
          4. See also
        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
          5. See also
        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. See also
        5. Creating custom styles with the Stylizer module
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Stylizer for regions/panels and panes
          5. See also
        6. Changing the layout of a panel
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        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
          5. See also
        8. Replacing the site contact page with a panel
          1. Getting ready
          2. How to do it...
          3. How it works...
      20. Index