Adaptivetheme 7.x-2.x includes a new layout engine that drives both responsive and adaptive layouts using media queries. We've made it super easy to configure layouts for standard desktops and laptops, and tablet and smartphone size screens. This video features Pixture Reloaded, an Adaptivetheme subtheme available for free download on Drupal.org and shows off the layout settings and a brief run down on how it all works.

I get asked all the time how to add a CSS file to Drupal, its seems like the most rudimentary thing to do in a modern website, however Drupal has more than one way to add CSS files so here's an in depth explanation of the different ways you can add your files and why you might choose a particular method.

Way back in September 2010 I launched the Design 4 Drupal Core (D4DC) project - the initial goal was to define a better process for adding new themes to Drupal core. This grew out of the Drupal 7 process which was essentially a code race between Bartik and Corolla. It was clear to me this process could be improved. In the commercial world we always select the design first (as opposed to an entire theme), so I started making the argument that any new core theme would have to be selected based on the design - then coded into theme.

HTML5 has a bunch of new form attributes and one of these can neatly add placeholder text to text inputs, such as your search input field. This text will be removed when the search field is focused, so in effect acts like ye ole JS solutions we've all been using for eons.

Browser support for placeholder looks pretty good, I have it working in Opera 11 and FF4. It should be widely supported in all the next generation browsers.

This debate is going to rear its head in the Drupal community sooner rather than later because right now we're seriously thinking about HTML5 for Drupal 8, and because many new HTML5 themes are springing up.

The issue is that <section> elements must have a heading, that is an <h*> element. If they don't have a heading then technically they're not a section. This is problematic for Drupal blocks because headings are optional, even end users can toggle the display of the block heading.

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.

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

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.