Skip to main content

Drupal Design

Twitter style Login box for Drupal

Submitted by Jeff Burnz on Monday, August 16th, 2010

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

Login Toboggan

  • Download and install the module

100 Percent width Header and Footer Backgrounds in Adaptivetheme

Submitted by Jeff Burnz on Friday, June 4th, 2010

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.

Border Radius Reference

Submitted by Jeff Burnz on Thursday, May 13th, 2010

Full reference for khtml, moz and webkit + CSS3 rounded corners.

Styling Google Calendar

Submitted by Jeff Burnz on Sunday, February 14th, 2010

A recent project used the Google Calendar widget - this is embedded in a iframe (in a standard Drupal block) and thus can’t be styled with CSS as per normal - but we wanted to style it to match the overall design.

After a bit of hunting around for a solution I found this: MyGoogleCal. The download link is a bit hidden - grab it directly here…

Add Superfish Drop Menus to Any Theme, Easily

Submitted by Jeff Burnz on Monday, October 26th, 2009

How to add a Superfish drop menu to Genesis or Adaptivetheme is one of the most common questions I get. Believe when I say I get emails from well intentioned Drupal users on a weekly basis asking me this. So now, please stop emailing me, I relent, heres how its done.

Rounded Corner Tools and Techniques

Submitted by Jeff Burnz on Saturday, September 26th, 2009

Heres a quick list of rounded corner tools and techniques you can use in your Drupal theme.

Font Family Groups

Submitted by Jeff Burnz on Saturday, September 26th, 2009

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.

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

Inline and Multicol Menus with Skinr and Adaptivetheme

Adaptivetheme includes two Skinr classes that allow us to style menus in different ways - one is to transform a normal menu into an “inline” menu, the other creates a groovy multi-column menu. This video shows you how to apply the classes to the menu block, and how you can change the CSS for each menu.

Note that you must download and install the Skinr module first and Adaptivetheme will automatically start using the module.

You can learn more about the Skinr module and the Adatptivetheme starter theme for Drupal from the project pages or our website:

http://drupal.org/project/skinr

Block Layouts with the Skinr Module and Adaptivetheme

This video tutorial shows you how to use the Skinr module with Adaptivetheme, an advanced starter theme for Drupal.

First you need to download and install the Skinr module (use the -dev version). Adaptivetheme will automatically start using the Skinr module.