PacktLib: Drupal 7 Theming Cookbook

Drupal 7 Theming Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Drupal Theme Basics

Introduction

Installing and enabling a theme

Uploading a new logo

Uploading a new favicon

Adding a slogan to the theme

Displaying a different theme foradministration

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 subtheme based on a core theme

Overriding base theme elements in a subtheme

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 structure of a page using template files

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

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

Minimizing and maximizing blocks using JavaScript

Navigation

Introduction

Adding a menu to our theme

Adding content pages to the menu

Styling the Main 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

Replacing Drupal's textareas with aWYSIWYG HTML editor

Reorganizing 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 from a module

Adding class attributes to form elements

Theming Fields

Introduction

Creating a new node type

Displaying fields together using fieldgroups

Manipulating display layouts using fieldgroups

Theming a field using a template file

Adding image fields using the Image module

Using Image styles 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

Embedding a View inside a node template

Overriding the Views table style format

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 Stylizer module

Changing the layout of a panel

Creating a custom panel layout

Replacing the site contact page with a panel