Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Theme Your Drupal Forms Continued

Parent Feed: 

Theming forms is always a little bit of a handful; designers like to create slick looking forms with rounded corners, drop shadows and custom looking form elements. Unfortunately it's not always an easy task to bring the design to life, but with a bit of css and jquery it is very easy to get your drupal forms looking a little less Drupal-ey.

Overview

We have previously gone over theming the markup of your Drupal forms for easier theming, now let's look at what tools are out there to add a bit of pizzaz to those boring select list and checkboxes. Select lists and checkboxes are incredibly annoying to deal with because unlike text fields you just can do much with css. Without any theming you end up with a very disjointed looking form. I this case we have to look to jquery to save the day. We are going to be using two lightweight jquery scripts to transform those stubborn form element into slick custom checkboxes and select lists.

Preparations

We are going to need these two scripts.

The select box script comes with a .css file as well, you can drop that in your theme's css folder and we will load it like any other css file.

and lastly you will need an empty file to supply the jquery to the theme, I usualy go with the incredibly creative scripts.js.

How-to

First things first you'll want to create a folder in the root of your theme called "scripts" if there isn't one already. Once you have that done you can toss those three files in there. Then we want to load those files through the theme. The way we do that is declare them in your themes .info file like this.

stylesheets[all][] = css/jquery.selectBox.css scripts[] = scripts/jquery.selectBox.js scripts[] = scripts/jquery.checkbox.js scripts[] = scripts/scripts.js

Save your file and give your site's cache a clear at admin/config/development/performance or if you use Administration menu you can flush it through the link they have. Your theme should now be loading your scripts so we should probably start applying them to something.

First we can apply the select box script to all select boxes on the site with this

(function ($) { $(document).ready(function(){ $(function() { /** * Fancy select boxes */ $("SELECT").selectBox(['default']); }); }); })(jQuery);

If you would like something a little more targeted just throw in the css selector you'd like it to apply to.

Under that you will add a similar line for your checkboxes again if you want to target specific ones just add a css selector.

(function ($) { $(document).ready(function(){ $(function() { /** * Fancy select boxes */ $("SELECT").selectBox(['default']); /** * Fancy checkboxes */ $('input:checkbox:not([safari])').checkbox(); }); }); })(jQuery);

What you will get is some nice markup to theme away.

For select boxes you will get this.

<a class="selectBox selectBox-dropdown"> <span class="selectBox-label">Item 15</span> </a>

The ul with all your options will ouput at the bottom of your page and be absolutely positioned below the selectbox.

For checkboxes you will get this.

<label><input style="position: absolute; z-index: -1; visibility: hidden; " type="radio" /> <span class="jquery-checkbox"> <span class="mark"> <img src="empty.png" /> </span> </span> 1st radio button </label>

With these 2 scripts you should be able to get your form looking quite unique and a lot less drupal-ey. I will offer a little disclaimer, it is very easy to get carried away with adding jquery to forms. Having used full jquery form suites in the past I urge you to steer clear of them. I've only created more headaches with them and prefer to bring jquery in to help with only the most stubborn of form elements.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web