Drupal 6 Theming Cookbook

Drupal 6 Theming Cookbook

Overview of this book

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.

Drupal 6 Theming Cookbook

Credits

About the Author

About the Reviewers

Preface

Free Chapter

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

Optimizing using hook_preprocess()

Displaying the date field in calendar form

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

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Giving the username textfield keyboard focus

This recipe will detail how keyboard focus can be assigned to the username field in the login block. This will ensure that the user does not need to use the mouse or tab through the page to log in to the site.

Getting ready

We will be using the mysite module created earlier in this book to hold our odds and ends. It is assumed that this module has been created and is enabled.

How to do it...

The following steps are to be performed inside the mysite module folder at sites/all/modules/mysite.

Create if necessary, and navigate to the JavaScript folder at sites/all/modules/mysite/js.
Create a JavaScript file named userfocus.js and open it in an editor.
Add or merge the following JavaScript to the file:
```
Drupal.behaviors.mysiteUserFocus = function(context) {
// console.log($('input#edit-name'));
$('input#edit-name').focus();
}
```
The line of jQuery functionally relevant to this recipe has been highlighted. The ID of the username textfield—edit-name—was located...

Drupal 6 Theming Cookbook

Drupal 6 Theming Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Drupal 6 Theming Cookbook

Giving the username textfield keyboard focus

Getting ready

How to do it...