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>
Table of Contents (18 chapters)
Drupal 7 Theming Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Uploading a new favicon


This recipe details the steps involved in changing the favicon displayed with the theme. A favicon, dubbed as a shortcut icon in the Drupal interface, is an image that is particular to a site and is displayed in the address bar of the browser next to the site URL as well as the browser tab. It also makes its presence felt if the site is bookmarked in the browser as shown in the following screenshot:

Getting ready

We are going to need the icon file to be added which is recommended to be of size 32x32 pixels or higher. An example icon file named favicon.ico can be seen in the misc folder in the Drupal installation.

How to do it...

Adding a custom favicon to the theme can be done by performing the following steps:

  1. 1. Navigate to the admin/appearance [Home | Administration | Appearance] page.

  2. 2. Click on the Settings link accompanying the theme in question.

  3. 3. Look for the Shortcut icon settings fieldset.

  4. 4. As in the following screenshot, uncheck the Use default shortcut icon checkbox as we want to use a custom icon:

  1. 5. Using the Upload icon image field, browse and select the icon file in the filesystem.

  2. 6. Finally, click on the Save configuration button below upload and save the changes.

How it works...

The uploaded file is saved in the Drupal filesystem and the path to the icon is registered as a theme setting in the database. When a page is being rendered, the Drupal theme system designates this .ico file as the favicon for the site.

In the following screenshot, we can see the logo image added in the previous recipe also being used as the basis for a favicon:

There’s more...

Besides manually uploading the icon file via the configuration page of the theme, other avenues are also available to accomplish the same objective.

Alternative methods

Just as we saw when uploading a custom logo image, instead of uploading the icon file via Drupal, use the Path to custom icon textfield to point to the icon file on the server. A third option is to place the icon file in the theme’s folder and rename it to favicon.ico. Provided that the Use the default shortcut icon field is checked, the theme will automatically look for this file in its folder and use it as its favicon. Not specifying a favicon will instead result in the site using Drupal’s default icon, Druplicon, which is located within the misc folder.

Note

Other formats besides the ICO format are also supported by some, but not all, browsers. More information is available at http://en.wikipedia.org/wiki/Favicon.

See also

The previous recipe in this chapter, Uploading a new logo, is, in many ways, similar to this one as it describes how to replace the default logo image with a custom file.