PacktLib: Drupal 6 Theming Cookbook

Drupal 6 Theming Cookbook

Credits

About the Author

About the Reviewers

Preface

Drupal Theme Basics

Introduction

Installing and enabling a theme

Uploading a new logo

Uploading a new favicon

Adding a slogan to the theme

Allowing users to choose from multiple themes

Displaying a different theme for administration

Adding an existing block to the theme

Adding a custom block to the theme

Displaying a block only on the front page

Controlling block visibility based on user role

Controlling block visibility based on node type

Beyond the Basics

Introduction

Understanding the anatomy of a theme

Creating a sub-theme based on a core theme

Overriding base theme elements in a sub-theme

Changing the screenshot image of a theme

Including a CSS file in a theme

Enabling CSS optimization

Creating the mysite module to hold our tweaks

Adding a CSS file from a module

Displaying a different theme for each day of the week

Creating a fresh look using the color module

Custom Themes and Zen

Introduction

Clearing the theme registry

Creating a theme from scratch

Creating myzen, a Zen-based theme

Choosing a CSS layout for myzen

Overriding Zen template files with myzen

Adding a custom region to myzen

Adding a background image to the theme

Adding a conditional stylesheet in Zen

Modifying myzen's theme settings

Templating Basics

Introduction

Changing the layout of a page using page.tpl.php

Customizing the appearance of a particular node type

Customizing the appearance of a specific node

Theming made easy using the Devel module

Theme overrides using the Theme developer module

Listing all available variables in a template file

Displaying the profile name instead of a username

Styling the site maintenance page

Development and Debugging Tools

Introduction

Finding the right function to use to theme an object

Analyzing variables using the Devel module

Generating sample content using the Devel generate module

Resetting the default theme manually

Live preview with Web Developer

Validating HTML and CSS using Web Developer

Turning off JavaScript in the browser

Disabling CSS in the browser

Inspecting elements and debugging CSS using Firebug

Diagnostic logging of JavaScript using Firebug

Advanced Templating

Introduction

Adding a variable to all node templates

Deleting a variable from the page template

Adding a custom theme setting

Hiding all regions on a page

Displaying the last updated date instead of the submitted date

Module-based variable manipulation

JavaScript in Themes

Introduction

Including JavaScript files from a theme

Including a JavaScript file only for certain pages

Giving the username textfield keyboard focus

Exporting a variable from PHP to JavaScript

Adding default text to the search textfield

Displaying comments in compact form

Adding column-sort functionality to tables

Minimizing and maximizing blocks using JavaScript

Navigation

Introduction

Adding a menu to our theme

Adding content pages to the menu

Styling the primary links menu

Contextual submenus using the Menu module

Adding a drop-down navigation menu

Customizing breadcrumbs in Zen-based themes

Hiding node links using CSS

Styling all external links in a page

Styling the Drupal pager

Form Design

Introduction

Finding the form ID of a form

Changing the height of a textarea

Turning off the resize feature for textareas

Replacing Drupal's textareas with a WYSIWYG HTML editor

Reordering fields in a form

Replacing a standard submit button with an image button

Styling the comment form

Using a fieldset to group fields

Theming form elements

Adding class attributes to form elements

Customizing CCK

Introduction

Creating a custom node type

Hiding fields and labels during display

Displaying fields together using field groups

Theming CCK content using hook_nodeapi()

Theming a CCK field using a template file

Adding image support using the ImageField module

Using ImageCache to scale and crop images on the fly

Adding lightbox support for images

Views Theming

Introduction

Creating a simple view

Styling a node listing using a grid display

Merging columns with the Views table style plugin

Embedding a view inside a node template

Overriding the Views table style plugin

Adding a class to a Views style

Creating a custom Views style plugin

Rapid Layouts with Panels

Introduction

Using Panels to create a front-page layout

Embedding content in a panel

Styling a panel with rounded corners

Creating custom styles with the Panel stylizer module

Changing the layout of a panel

Creating a custom panel layout

Replacing the site contact page with a panel

Embedding tabbed panels in blocks