page.tpl.php

Creating Custom Regions In Drupal 6 Themes

Previously, I covered the topic of creating custom regions in Drupal 5 themes. However, Drupal 6 introduced a new process for creating custom regions in themes and it is still one of the topics people ask about most frequently.

So, here's a tutorial on how to create custom regions in your Drupal 6 themes. In this example I will use the Garland theme, and insert a new region called 'Uber content', which I'll position above everything in the main content area.

Custom Drupal 6 theme region

It's basically a two-step process:

  • step 1 - define the custom region in your theme's .info file
  • step 2 - insert some PHP in your theme's page.tpl.php file wherever you would like the new region to appear
Bookmark/Search this post with:
  • Delicious
  • Digg
  • Facebook
  • Twitter
Posted by Laurence @ 07:57PM on May 28th 2009
Tags:

Classes For (Almost) Everything In A Drupal Theme

Thanks to the Zen theme there is an awesome bit of code available to Drupal themers which enables the addition of dynamic classes to your body tag based upon a number of different parameters, such as your position and status within a site, like so:

Drupal theme body classes

As you can imagine, this is incredibly useful for Drupal theming, as it provides a set of classes on the body which then allow a simple way to target specific areas of a theme via CSS.

I used to end up writing lots of different bits of code into a theme file to achieve this functionality, but the Zen theme does a great job of wrapping it all up in one bundle, and also nicely comments the code so that you can figure out what's happening :)

How to use the code:

Implementing the code into your own theme is a simple two step process:

  • Step 1.
    Copy the main chunk of code into your template.php file
  • Step 2.
    Edit your theme's page.tpl.php file to add the body classes

Step 1
The main chunk of code you will need lives in the Zen theme's ZENtemplate.php file.

I have edited it slightly to remove any Zen theme specific code (such as references to Zen theme sub-themes).

Copy all of this code (except the opening and closing php tags) and paste it into your theme's template.php file.

(Just be aware that if your theme's template.php file already contains a _phptemplate_variables() function you will need to integrate the new code with your existing code, as you cannot re-declare the same function. Unfortunately, it's difficult to give a more detailed explanation about how to do this as each situation will be different.)

Bookmark/Search this post with:
  • Delicious
  • Digg
  • Facebook
  • Twitter
Posted by Laurence @ 12:36PM on April 9th 2008
Tags:

Adding A Class To A Drupal Theme For Logged In Users

I was working on a Drupal theme recently which required a number of different elements to be present on a number of different pages, but only for logged in users.

Using a little PHP I was able to add a class of 'in' to the body which would only appear in the html when a user was logged in.

To do this, just find the opening <body> tag in your page.tpl.php file, and add in the code below.

<body<?php global $user; ?><?php if ($user->uid): ?> class="in"<?php endif; ?>>

Then, you'll be able to write a general rule for logged out users, such as:

body {
background: #fff;
}

And a more specific rule for logged in users, such as:

body.in {
background: #000;
}

Bookmark/Search this post with:
  • Delicious
  • Digg
  • Facebook
  • Twitter
Posted by Laurence @ 12:42PM on October 27th 2007
Tags:

Drupal 5.1 + PNG + IE6

Sounds like a fun recipe huh? Well, having tried (and failed) previously to get this combination to work properly, I recently did some work for a client which demanded that .png files (Portable Network Graphic - image files which have transparent bits) were both used and looked correct in Internet Explorer 6.

Basically, I wanted to accomplish four main things:

  • I wanted a real .png file with full transparency to look correct in IE6, and behave as it’s supposed to (i.e. letting you see some or all of what’s beneath it).
  • I wanted to achieve this using only CSS – no Javascript, no PHP, no Flash, and no other trickery.
  • I wanted this to work for background .png files, that is files which are called from the style.css file like so:
    #div_1 {
    background-image: url(images/druplicon.png)
    }.
  • I wanted the solution to be as tidy as possible.

The trouble is that if you just try to load a .png into IE6 normally, you get the following outcome:

Firefox and IE6 .png comparison

Ouch!

After some googling around, and a bit of trial and error, I came up with a solution which satisfies all of the above criteria. Here’s what I did:

Bookmark/Search this post with:
  • Delicious
  • Digg
  • Facebook
  • Twitter
Posted by Laurence @ 11:13AM on July 9th 2007
Tags:

Simplifying Your Page.tpl.php File

Whenever I start work on modifying an existing theme it’s always important for me to first understand how the whole thing is hanging together. Whilst most theme folders will, broadly, contain the same files (node.tpl.php, template.php etc.) the content within those files can be quite different, and taking a bit of time at the beginning of a project to understand what’s where can save you a lot more time in the long run.

Ordinarily, I will begin by looking at the page.tpl.php file. This file contains the main chunk of code which determines where stuff is going to end up on your web page, and how it will be structured. The problem is that this file can seem a bit confusing at times, and if you’re a little unsure about your PHP one look might just send you running ;) Unfortunately, this is particularly the case for the page.tpl.php file of Drupal’s default theme Garland, which is, at best, a little untidy.

As a way to help me more clearly understand how the whole thing is structured I duplicate the page.tpl.php file, rename it to something obvious like duplicate_page.tpl.php, and then strip out everything which is causing a mess.

Bookmark/Search this post with:
  • Delicious
  • Digg
  • Facebook
  • Twitter
Posted by Laurence @ 11:25PM on June 4th 2007
Tags:

Creating Custom Regions

UPDATE
The following tutorial covers the creation of custom regions in Drupal 5 themes. If you are using Drupal 6 please see the newer creating custom regions in Drupal 6 themes instead.

----------

All Drupal themes you download will come with a number of pre-defined regions into which you can already place blocks (normally header, left-sidebar, content, right-sidebar, footer), but it can sometimes be useful to create your own.

This can seem a little daunting at first, but it's really just a simple two-step process:

  • step 1 - define the custom region in your template.php file
  • step 2 - add the custom region to your page.tpl.php file

So, lets see how it works.

Step 1 - define the custom region in your template.php file

All themes should have a template.php file contained within the theme folder.

Open the template.php file in your chosen editor and locate the function titled 'function nameoftheme_regions' (where nameoftheme will be the name of the theme to which you are adding a custom region). This will probably be the first function in the file, and should look something like this:

function nameoftheme_regions() {
  return array(
       'header' => t('header'),
       'left' => t('left sidebar'),
       'content' => t('content'),
       'right' => t('right sidebar'),
       'footer' => t('footer')
  );
}

Okay, now just add your custom region so that it looks like the pre-defined regions.

Bookmark/Search this post with:
  • Delicious
  • Digg
  • Facebook
  • Twitter
Posted by Laurence @ 11:00AM on May 21st 2007
Tags: