You are previewing Front End Drupal: Designing, Theming, Scripting.
O'Reilly logo
Front End Drupal: Designing, Theming, Scripting

Book Description

“For Drupal to succeed, we need books like this.”

–Dries Buytaert, Drupal founder and project lead

“Drupal faces a common problem on the Web–the relative lack of new, high quality themes. Front End Drupal tackles this problem directly and is designed to help both experienced designers and rank novices get an understanding of how Drupal theming works. In fact, I’ll be the first to admit I learned a lot from this book.”

– Dries Buytaert, Drupal founder and project lead

The Practical, Complete Guide to Customizing Drupal Sites with Behaviors, Themes, and Templates

Drupal is now the world’s #1 open source content management system: Thousands of individuals and organizations are using it to build and update Web sites of virtually every kind. As Web designers and developers adopt Drupal, they need ways to quickly customize the visuals and interactivity of their sites. Drupal offers powerful tools for doing so, but little guidance on using them effectively. Front End Drupal is the solution. In this book, two expert Drupal developers cover everything you need to know to create great visual designs and state-of-the-art interactivity with Drupal’s behaviors, themes, and templates.

Front End Drupal is 100% focused on issues of site design, behavior, usability, and management. The authors show how to style Drupal sites, make the most of Drupal’s powerful templating system, build sophisticated community sites, streamline site management, and build more portable, flexible themes. You’ll also gain hands-on experience through several case studies that walk you through the customization of everything from page templates to Web site forums.

  • Prepare and organize content so it’s easier to integrate into Drupal Web sites

  • Structure Drupal page templates that are easy to work with

  • Configure Drupal with the modules and browser tools you need to customize your site

  • Utilize Drupal’s Starter Themes and themes converted from WordPress, Joomla!™, and Drupal 5.x

  • Maximize the power and usability of Drupal’s content editing forms

  • Build usable community sites with user profiles, comments, and user-generated content

  • Use JavaScript™ to make your themes interactive and to enhance usability

  • Create powerful animations and AJAX callbacks with jQuery, Drupal’s JavaScript library

  • About the Web Site

    The accompanying site, frontenddrupal.com, contains all sample code and themes presented in this book.

    Table of Contents

    1. Front End Drupal
      1. Praise for Front End Drupal
      2. Foreword
      3. Preface
        1. Chapter 1
        2. Chapter 2
        3. Chapter 3
        4. Chapter 4
        5. Chapter 5
        6. Chapter 6
        7. Chapter 7
        8. Chapter 8
        9. Chapter 9
        10. Chapter 10
        11. Chapter 11
        12. Appendices
      4. Acknowledgments
      5. About the Authors
      6. 1. Web Page Design
          1. Describing Content
            1. Displaying Content
            2. Content Types and Content Fields
          2. Organizing Lists of Content
            1. Chronological Organization
            2. Linear Organization
            3. Topical Organization
            4. Popularity-Based Organization
            5. Task-Based Organization
          3. Page Design and Layout
            1. Interface Components
            2. Regions
            3. Design Resources
          4. Interaction
            1. User Satisfaction
            2. Guided Tasks
          5. Code
            1. Separating Form, Function, and Behavior
            2. XHTML
            3. Cascading Style Sheets
            4. Scripting Languages
            5. Interaction with JavaScript
          6. Work Flow
            1. Working with Designers
            2. Working with Programmers
            3. Working with Clients
            4. Working with Site Visitors
          1. Summary
      7. 2. The Themers’ Toolkit
          1. A Gentle Introduction
            1. Building a Page for Display
            2. Directory Structure
            3. Paths
          2. Theming Strategies
            1. Best Practices
            2. Alternative Strategies
          3. Drupal Terminology
            1. Node
            2. Users, Roles, and Permissions
            3. Blocks and Regions
            4. Categories, Taxonomy, Vocabularies, and Terms
            5. Parent Items and Weight
            6. Menu
            7. Pagers
            8. Hooks and Naming Conventions
          4. Must-Have Modules
            1. Content Construction Kit (CCK) Module
              1. Installing CCK and Related Modules
              2. Creating a Custom Content Type
              3. Adding Fields
              4. Fields: Order, Display, and Groups
                1. Field Order
                2. Field Display
                3. Field Groups
              5. Additional Settings
                1. Attributions (Post Information)
                2. Post Settings
                3. Permissions
            2. Views Module
              1. Understanding Views
              2. Creating a New View
            3. Devel Module
          5. Browser Tools
            1. Firebug
            2. Web Developer’s Toolbar
            3. Screen Shot and Testing Services
          6. Language References
            1. XHTML
            2. CSS
              1. Grid-Based Frameworks
            3. PHP
              1. Drupal API
            4. JavaScript
          7. Maintaining Your System
            1. Scheduling Tasks with Cron
            2. Revision Control
          1. Summary
      8. 3. Working with Drupal Themes
          1. Finding Themes
            1. Interface Components
            2. Develop a Library of Themes
          2. Installing Drupal Themes
            1. Download and Unpack
            2. Enable the New Theme
            3. Personal Themes
          3. Administering Themes
            1. Global Settings
            2. Theme-Specific Settings
            3. The Front Page
              1. Single “Welcome” Node
              2. Content Teasers
              3. Several Nodes “Promoted to Front Page”
          4. Anatomy of a Theme
            1. Naming and Initializing the Theme
            2. Page Template
            3. Including External CSS and JavaScript Files
            4. Regions
            5. Screenshot
          5. Starter Themes
            1. Zen
            2. Custom Theme Settings
            3. Customizing Banner Images
          6. Migrating to Drupal 6
            1. Converting a Drupal 5.x Theme to a Drupal 6.x Theme
            2. WordPress
            3. Joomla!
          1. Summary
      9. 4. The Drupal Page
          1. Elements of a Page
            1. Dissecting a Theme
          2. Sitewide Page Variables
            1. General Utility Variables
            2. Page Metadata
            3. Site Identity
            4. Page Content, Drupal Messages, and Help Text
            5. Creating New Page Variables
            6. Modifying Page Variables
          3. Navigation and Menus
            1. Theming Menus
          4. Grid Work
            1. Regions
            2. Blocks
            3. Customizing the Markup of Blocks
          5. Search
          6. Changing Templates
            1. Custom Front Page
            2. Custom Offline Page
          7. Alias: Page
            1. New Templates from Aliased URLs
            2. Page Templates for Views
            3. Adding CSS Classes
            4. Page Templates for Content Types
          8. Taxonomy Templates
            1. Graphical Headers
          9. Delivering Plain Content
            1. Print-Friendly Pages
              1. CSS Print-Friendly Pages
              2. Print-Friendly Templates
            2. Mobile Devices
          1. Summary
      10. 5. Drupal Content
          1. Node Templates
            1. The Template File node.tpl.php
          2. Gaining More Control Than $content Provides
            1. Deciphering the Object $node
            2. Accessing Content in the $node Object
            3. Sanitized Data Is More Secure
          3. Node Template Variables
            1. Creating New Variables
            2. Changing the Defaults
            3. Node Links
          4. Pages and Teasers
            1. Administrative Control of the Default Settings
            2. A Teaser Is Not a Summary
            3. Templates for Teasers
          5. Images
            1. Choosing Your Visuals
              1. Image Module
              2. CCK, ImageField, and Image Cache Modules
            2. Images Hosted Offsite
            3. Image Module
              1. Galleries
            4. CCK Images: ImageField and Image Cache
          6. Making Lists of Content with Views
            1. Template Files
            2. New Variables, with Preprocess Functions
          1. Summary
      11. 6. Customizing the Content-Editing Forms
          1. Web Forms
          2. Form Candy
            1. Working with Style Sheets
            2. Coloring in Required Fields
            3. Focus on Input
            4. Background Images on Form Fieldsets
            5. Advanced CSS Selectors
            6. Vertical Tabs
            7. Node Form and Usability Improvements
          3. Rich Text Editing
            1. Installing TinyMCE
            2. Configuring TinyMCE
              1. Basic Setup
              2. Visibility
              3. Buttons and Plugins
              4. Editor Appearance
              5. Cleanup and Output
              6. CSS
            3. Image Integration
              1. Configuring Image Assist and TinyMCE
            4. Extending TinyMCE
          4. Altering Forms with FAPI
            1. Changing Forms Throughout Your Site
            2. Changing Specific Forms
            3. Changing Display Text in Forms
            4. Removing Fields from the Form
            5. Changing Form Widgets
          5. Multiple-Page Forms
            1. Webform
            2. Altering Flow
          6. Improving Access to Edit Screens
            1. Admin Links
            2. Editing Blocks
            3. Preprocess Functions
            4. Structure of the preprocess_block Function
            5. Adding Block-Editing Capabilities to a Theme
            6. Administrative Interfaces
          1. Summary
      12. 7. Users and Community Participation
          1. Users
            1. User Profiles
            2. Theming the Default Profile
              1. user-picture.tpl.php
              2. user-profile-category.tpl.php
              3. user-profile.tpl.php
              4. user-profile-item.tpl.php
            3. Adding More Content
          2. Granting and Restricting Access
            1. Defining Roles
            2. Granting and Revoking Permissions
            3. Checking Access at the Theme Level
            4. Extending the Administrative Role to More Users
          3. Community Comments
            1. Customizing Comment Display
              1. comment.tpl.php
              2. comment-folded.tpl.php
              3. comment-wrapper.tpl.php
            2. Adding User Identity to Comments
            3. Disqus
          4. User-Generated Content
            1. Blogs (and Comments)
            2. Forums
            3. Wikis
            4. Recipes and Specialized Content
          5. Spam
            1. CAPTCHA
            2. Comment Closer
            3. Spam Filtering Services
          6. Private Web Site Areas
            1. Member-Only Sites
            2. Private Content Fields
          1. Summary
      13. 8. Administrative Interfaces
          1. Creating a Custom Administrative Interface
            1. Applying a Separate Administrative Theme
            2. RootCandy
          2. Task-Based Navigation
            1. Creating Custom Menus
            2. Deploying Custom Menus
          3. Administrative Menus
            1. Admin Menu
            2. Teleport
            3. Navigate
          4. Administrative Dashboards and Control Panels
            1. Control Panel
            2. Theming Control Panel
          5. Custom Administrative Screens
            1. New Content View
              1. Basic Settings
              2. Filters
              3. Sort Criteria
              4. Page Display
            2. Orphan Images View
              1. Page Display
              2. Fields
              3. Filters
              4. Basic Settings
              5. Theming the View
            3. Unpublished Content by Category
          6. Error!
            1. Error Messages
            2. 404, Page Not Found
            3. Custom Error
              1. Sample 404 Page
              2. Sample 403 Page
          1. Summary
      14. 9. Learning JavaScript
          1. JavaScript versus DOM
          2. The JavaScript Language
            1. First Steps: Executing Code
            2. Declaring Variables
              1. The Variable Scope
              2. Data Types
              3. Operators
            3. Controlling the Flow
          3. Object Orientation in JavaScript
            1. The “Everything Is an Object” Approach
            2. Defining and Working with Objects
            3. Prototypes
              1. Creating Your Own Objects with Prototypes
              2. Extending Existing Objects
            4. Using Functions
              1. Anonymous Functions
              2. The Function Scope
              3. Aliasing and Calling Functions
          1. Summary
      15. 10. An Introduction to jQuery
          1. A First Look at jQuery
            1. Setting Up jQuery
            2. Executing Code on Page Load
            3. Navigating the DOM Tree
          2. Using jQuery
            1. Events
            2. Setting and Retrieving Attributes
            3. Finding Elements
            4. Inserting, Moving, and Removing Elements
          3. Leveraging jQuery’s Full Potential
            1. Animations
            2. Using jQuery Helper Functions
            3. Calling the Server with XmlHttpRequest
              1. The .load() Function
              2. Loading Data with jQuery.getJSON()
              3. The All-Arounder: $.ajax()
            4. Plugins for jQuery
            5. jQuery UI
          4. Using Other JavaScript Libraries
          1. Summary
      16. 11. JavaScript in Drupal
          1. Server-Side Drupal Integration
            1. Adding JavaScript to a Page
              1. Adding Files
              2. Adding JavaScript to a Theme in the .info File
              3. The Settings Storage
              4. Inline JavaScript
            2. Creating Menu Callback Handlers
            3. Creating JSON
          2. Architecting a Component
          3. Example: Horizontal Scroller
            1. The Component Skeleton
            2. Creating the Markup
            3. Drupal’s JavaScript Behaviors
            4. Filling the Component with Functionality
              1. Breaking Down the Functionality
              2. Bootstrapping the Component
              3. The scrollToItem() Function
              4. Finding the Next Target Item
              5. Enabling the Buttons
              6. Updating the Buttons in updateButtons()
            5. Making the Component Data-Source Agnostic
            6. Integration with Drupal
          4. Using Plugins and jQuery UI
            1. Sparklines
            2. jQuery Drupal Modules
            3. jQuery UI
          1. Summary
      17. A. Installing Drupal
          1. Setting Up a Development Server
            1. Windows
            2. Linux
            3. Mac OS X
          2. Configuring Document Root and Virtual Hosts
          3. Installing Drupal—and Common Hurdles to Its Installation
          4. A Quick Glance at the Admin Area
          5. Installing Modules
      18. B. Supplemental Code
          1. template
            1. index.html
            2. index-input.html
          2. demo-module
            1. demo.module
            2. demo.info
          3. template-skeleton
            1. skeleton.js
            2. skeleton.html
            3. skeleton.css
          4. horizscroll and horizscroll-datasource
            1. horizscroll.js
            2. horizscroll.html
            3. horizscroll.css
          5. sparkline
            1. sparkline.html
            2. sparkline.js