Book Image

Drupal 7 Theming Cookbook

By : Karthik Kumar
Book Image

Drupal 7 Theming Cookbook

By: Karthik Kumar

Overview of this book

<p>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.</p> <p>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.</p> <p>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&rsquo;s templating system, which will allow you create themes which surpass even the existing Drupal and contributed modules.</p>

Related Content you might be interested in

Current Title:

Small book image
Drupal 7 Theming Cookbook
Karthik Kumar
Jan, 2012 | 364 pages
No titles found
Table of Contents (18 chapters)
Drupal 7 Theming Cookbook
Drupal 7 Theming Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Drupal Theme Basics
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
2
Beyond the Basics
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
3
Custom Themes and Zen
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
4
Templating Basics
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
5
Development and Debugging Tools
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
6
Advanced Templating
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
7
JavaScript in Themes
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
8
Navigation
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
9
Form Design
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
10
Theming Fields
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
11
Views Theming
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
12
Rapid Layouts with Panels
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

Adding class attributes to form elements

Drupal 7 is quite meticulous with its forms and other markup when it comes to assigning CLASS and ID attributes. This ensures that various page elements can be individually targeted either via CSS or JavaScript and thereby, manipulated as necessary. This is however, not true all the time and circumstances sometimes require further customization.

In this recipe, we will assign class attributes to the Search module's textfields and use them along with a pinch of jQuery to improve usability in situations where the search block is concurrently visible along with the module's input form on the search page.

Getting ready

We will be using the mysite module created earlier in this book to hold an implementation of hook_form_alter(). As we are playing with the Search module, it is assumed that the module is enabled and that the site's content has subsequently been completely indexed. This can be verified via admin/config/search/settings [Home | Administration...

Previous Section
End of Chapter 9
Next Chapter