Skip to main content

Drupal Design

Styling Google Calendar

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

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

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

Font Family Groups

Quick list of some handy font family groups 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.

Adaptivethemes to roll out Ubercart and OpenPublish Starter themes

Drupal 6 has seen some truly fantastic installation profiles emerge that allow end users to have a site-in-a-box installation in minutes. UberDrupal gets you up to speed with Uberbcart and OpenPublish is an amazing profile for setting up a magazine or news site.

Each of these profiles has very specific theming requirements. Ubercart has the product and cart pages, while OpenPublish has extended user profiles and bio information for nodes and many additional views and other features.

Semantic Views Module for Drupal 6 - Video Tutorial

The Semantic Views module for Drupal 6 allows you to easily insert HTML markup for your Views rows and fields.

This is a new module by bangpound and I think this is really going to change how we think about theming Views because for the first time it puts clean semantic Views output in the hands of site builders and other end users, without having to get their hands dirty in the templates.

Getting Started with CSS

Prolly one of the most frequently asked drupal design questions to me and others in the Drupal forum is “how do I [insert question] CSS”. Answering these questions provide little more than the proverbial fish, whereas we really want to be teaching them how to fish. Heres a few resources that can really give you a head start with CSS.