Drupal Tutorial

Upgrading 7.x-1.x sub-themes to 7.x-2.x

For the most part your 7.x-1.x sub-themes will just run on 7.x-2.x, unless it includes Google fonts such as some of the existing commercial themes do. These you should wait for the official 2.x release of those themes before upgrading else you will get a site error when you try to change the theme settings.

Follow these basic steps to properly upgrade from 7.x-1.x to 7.x-2.x. The bare minimum involves just two steps. You will need to judge if you need to do more, but this will get your theme up and running with the new layout engine and responsive layouts.

Twitter style Login box for Drupal

In this tutorial I'll show just how easy it is to do a Twitter style drop-down login form in Drupal 6 (probably just as easy if not identical in Drupal 5 and 7). If you don't know what this looks like these days you better get over to http://twitter.com/ and scope it out so you know that I'm on about - see the link in the top right corner...

Requirements

* We're gonna cheat and use the LoginToboggan module
* Moderate CSS skills

Login Toboggan

* Download and install the module

How to theme the User Login page in Maintenance Mode

A recent client wanted to remove everything from the user login page when the site was in maintenance (or Site off-line as its referred to in most system messages and documentation). Just showing the user login form when the site is off-line actually makes a lot of sense because whats the point of showing things like primary links, search block or whatever else might show on your normal user login page.

100 Percent width Header and Footer Backgrounds in Adaptivetheme

I've been asked a few times by Drupal themers and designers how to do 100% header and footer backgrounds in Adaptivetheme—and retain the theme settings so end users can still adjust the overall page width. Actually this is pretty easy - its just a matter of adding a couple of wrapper DIV's in the right places and overriding the layout variables that Adaptivetheme uses to set the width.

First we wrap the various page elements in a set of wrapper DIV's. The new .container DIV will be full width and the .container-width wrapper will set the width - see the PHP snippet below.

Add first and last classes to secondary local tasks

We had a project recently where we needed to add first and last classes to Drupals secondary local tasks. I was in a bit of a hurry so instead of trying to figure this out myself I Googled it and pretty quickly found this post on Drupal.org which seemed to fit the bill. Problem is the post doesn't actually tell you how or where to use the snippet, which isn't much good for those of you struggling with Drupal in the first place.

Page template suggestions for taxonomy vocabs

Drupal's template suggestions are plentiful and pretty powerful stuff, however, given all the options there are some noteable oversights. In particular the ability to use page-taxonomy suggestions per vocabulary, something like page-vocab-1.tpl.php to theme all taxonomy term pages in vocabulary 1 (where 1 is the VID or vocabulary id).

To achieve this we turn to our trusty preprocess_page function which by now every Drupal themer worth his or her salt knows all about.

Font Family Groups

Quick list of some handy font family groups (often called "font stacks") for web design and Drupal theme development. Includes the three groups that come with Adaptivetheme starter theme and an example of how to set the font-family in your CSS.

Basic Groups

Sans serif - smaller

"Helvetica Neue", Arial, Helvetica, sans-serif

Sans serif - larger

Verdana, Geneva, Arial, Helvetica, sans-serif

Serif - smaller

Garamond, Perpetua, "Nimbus Roman No9 L", "Times New Roman", serif

Gpanels: Create a two column section for blocks with Gpanels and Adaptivetheme

Gpanels are easy to use PHP and HTML snippets for creating multi column layouts. The idea is you copy/paste them into page.tpl.php (where ever you want) and place blocks into the regions to create columns of blocks.

Gpanels come with both Adaptivetheme and the Genesis starter theme.

This video walks you through the process of adding a Gpanel, enabling the regions and CSS, and then placing the blocks in the newly available regions.

You can learn more about the themes that use Gpanels for Drupal.org or our website:

http://drupal.org/project/adaptivetheme

Pages