AdaptiveThemes Blog

Typography Rough Guildelines

  1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
  2. Common choices for headlines are Georgia, Arial and Helvetica.
  3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
  4. The most popular font size for headings is a range between 18 and 29 pixels.
  5. The most popular font size for body copy is a range between 12 and 14 pixels.
  6. Header font size ÷ Body copy font size = 1.96.

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 and scope it out so you know that I'm on about - see the link in the top right corner...


* 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.

Using CSS clip as an Accessible Method of Hiding Content

Its relatively easy to hide content in Drupal using CSS, however its a whole different ball game to hide content and keep it accessible to all site visitors. Disabled web users may be using a screen reader or other Assistive Technology. For Drupal 7 we wanted a way to hide content that worked in all browsers and avoided many of the issues associated with current techniques.

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.

Border Radius Reference

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

-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Bartik for Core!

As many of you may know Bartik is one of the candidate themes for Drupal 7 - we only have until the 17th of May to bring it up to core worthiness so if you're a front end developer your help is needed, and its needed now.

Page Template Suggestions per Node Type

Sometimes its useful to have a page.tpl.php template per node type. While you can have a node-[type].tpl.php be default in Drupal 6, the same does not apply to page level templates.

To add these template suggestions to your theme simply add the following code to template.php, replacing themeName with the name of your theme.

Adaptivethemes Running Hot...

Hot Drupal that is!

We just moved host, for various reasons our old host wasn't really working out for us so we jumped ship and went with Hot Drupal.

We're also trying out the Boost module, again, I hope it goes better this time around.

Still some issues to sort out with content delivery, imagecache and so on, but so far the migration went about as smooth as it gets.

Field Type Suggestions in Drupal 7

NOTE: I have submitted a feature request to Drupal 7 to have this included in core - if you have some opinion on that please see Field Type Template Suggestions

Today I finally got around to testing out the new field suggestions in Drupal 7. If you're not familiar with the standard suggestions in short you can either use field templates or override theme_field using a naming convention not unlike we do with preprocess functions. What struck me as kind of odd was the lack suggestions for field types—maybe there's a very good reason for this such as performance, I don't know, but I thought it might be interesting to see if I could use them, if I wanted to.

Export Adaptivethemes Advanced Theme Settings

In the latest bleeding edge DEV version of Adaptivetheme we've introduced a new feature—the ability to export your theme settings. This is useful if you need to move your Drupal theme and you can't just export and move the database as well.

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 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 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.

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.

1. Get the Files

First, download the archive attached to this page. Unzip it and place in your theme.

Note that these files may now be out of day and there could be newer versions.

Why I killed Node, may it RIP

Myself, like many others, have always had an acrimonious relationship with the word "node". It didn't exactly get off to a good start when node presented me with a rude "wtf" moment when we first met. Things only went down hill after that, node remaining aloof and abstract, without ever just coming out and telling me what it actually was.

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