Drupal 7 Theming Cookbook

Drupal 7 Theming Cookbook

By : Karthik Kumar

Buy this Book

Drupal 7 Theming Cookbook

By: Karthik Kumar

Buy this Book

Overview of this book

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

Drupal 7 Theming Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

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

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Minimizing and maximizing blocks using JavaScript

In this recipe, we will be looking at using JavaScript to add a clickable button to each block allowing them to be minimized or maximized upon clicking.

Getting ready

We will be using the myzen theme created earlier in this book as the example theme in this recipe. We will also be using a couple of icon images to indicate the minimized and maximized state of each block. These images are to be placed inside the images folder of the theme and named open.png and close.png respectively.

How to do it...

The following steps are to be performed inside the myzen theme folder at sites/all/themes/myzen:

1. Browse into the js subfolder where JavaScript files are conventionally stored.
2. Create a file named block.js and open it in an editor.

3. Add the following JavaScript to the file:

(function ($) {
Drupal.behaviors.myzenBlockDisplay = {
attach: function() {
// We are targeting all blocks inside sidebars.
var s = $('div.sidebar').addClass('js-sidebar...

Drupal 7 Theming Cookbook

By : Karthik Kumar

Drupal 7 Theming Cookbook

By: Karthik Kumar

Overview of this book

Related Content you might be interested in

Current Title:

Drupal 7 Theming Cookbook

Minimizing and maximizing blocks using JavaScript

Getting ready

How to do it...