Drupal How To

In this section you'll find our ever expanding list of Drupal "how to" tutorials and snippets.

Social Network Links with Drupal 7, Views and Link

Recently I thought about building a social networking module that allowed you to upload an icon, paste in your link and voilà - instant social network links in a block.

Turns out there already exists a few modules in this space and to be frank I don't think we really need yet another Drupal social networking module. However none of the modules really suited my requirments so I turned to Drupal core fields and Views to see if I could build this with no code and just a bit of configuration.

OK, so the requirements for this are pretty simple:

How to add CSS files in Drupal 7

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.

HTML5 Placeholder text for your Drupal 7 Search Field

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.

Using HTML5 figure & figcaption elements to markup Image fields in Drupal 7

I've been reading up about the figure and figcaption elements for HTML5 over at the HTML5 Doctor and other places and thought I'd use these new elements to create captioned images in Drupal 7.

This is actually so easy its not funny, in fact you only need to make one configuration change to your image field and add one template override and you're done.

First - edit your image field settings and check the option to Enable Title field. We're going to re-use the title field to add our captions.

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.

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.

Pages