Sands and Sands_CSS

Sands is an attempt to create an all-purpose, drop-in replacement, "generic" theme like Bluemarine. It has design attributes taken from's proprietary Bluebeach theme and friendselectric.

Some features:

  • Higher contrast colors, underlined links, and relative font sizes
  • Novel styling of node information, comments, and block menus
  • Semantic XHTML, heavy use of CSS
  • Segregation of style information, including an easily-modifiable colors.css containing all color and background image definitions
  • Designed in mind to be easily modifiable to create your own custom themes
  • Uses many subtle gradiented background images to create a "smooth," more high-contrast look
  • Uses Mark James' Silk CMS Icons for emphasis on selected links
  • Uses the PHPTemplate theme engine.

In April 2006, I forked Sands into two different themes: Sands and Sands_CSS:

Uses tables for layout, like Drupal's Bluemarine. Use of tables guarantees maximum compatibility with CSS-impaired browsers, like Microsoft Internet Explorer 6 and earlier.
The progressive theme previously known as Sands, that uses a 3-column, source-ordered, elastic CSS layout.


Warning: screenshots are old and have not been updated.

Below are some screenshots of various pages with what they looked like dressed in the Sands theme. Of course, you can see for yourself what they look like by downloading the theme and trying it out yourself!

Sands Front page (node)

Sands Front page (node)

Sands Full Node Screen (with comments)

Sands Full Node Screen (with comments)

Sands Forum Screen

Sands Forum Screen

Sands Administer Screen

Sands Administer Screen

Screenshots were taken with Mozilla Firefox 1.0.x on Debian Linux, dressed with a modified GTK Clearlooks theme.

Getting Sands

Sands is developed and kept in the Drupal contributions CVS repository. It has a project page on where you can download the theme and submit bug reports.

If you're impatient, here are direct-download links to

Frequently Unasked Questions (FUQ)

What browsers does this theme work with?

All the modern generation ones, including Firefox 1.0, Internet Explorer 6, Safari/Konqueror, and Opera 8. There may be some issues with browsers older than that.

To see any known rendering issues please see Drupal's issue tracker for Sands. If you've a new one, please contact me or preferably, create a new issue at the aforementioned issue tracker.

Why are the form controls black in the screenshots?

I'm blind: I use a high contrast theme for my UI windows/widgets that is dark grey/black, so the form controls look the same. On a "normal" machine with a white-ish color scheme (i.e. the defaults) they'll be white, just like you'd expect. Sands doesn't make any attempts to change colors on form controls (and I don't think it should).

What were Sand's inspirations?

Theme-wise, I drew design features I liked from:

How do I change the colors of the columns?

The colors of the columns are in both colors.css and columns.css, not just only colors.css, as one would initially think.

Setting the colors of the columns depends on the way the columns are contructed, so their colors are placed in columns.css to allow sharing of the other Sands and Sands_CSS stylesheets.

What is the elastic, source-ordered, 3-column CSS layout based on?

It is based off of Ruthsarian's skidoo_too layout.

I cannot select text in Microsoft Internet Explorer!

This is due to some extremely odd bug triggered when a page contains the <base href="..."> tag, as Drupal 4.6 does. I gave up trying to find a way around it a long time ago.

If you want to get around it, upgrade to Drupal 4.7, which no longer uses the <base href="..."> tag, or use the Sands (not Sands_CSS) theme, which uses tables for layout.

There are grey borders around images in Internet Explorer...

Internet Explorer 6 does not intuitively work with transparent PNGs, which is why you see grey borders on these images. There are many scripts that will fix this problem, but they do not work with the way Sands has transparent PNGs for both <img> tags and as CSS "background-image"s. I've not had time to look into this, but patches are accepted!

May I remove the tagline with your name at the bottom of the footer?

Yes, you may. You are under no obligation to keep it there; I wanted emphasize the things I link to in it (the theme, Drupal, the GNU GPL, and myself), and few people change the defaults.

How do I remove the icons?

You can remove the icons by editing style.css, and removing the inclusion of the icons.css style sheet.

I've used Sands as a base for a new theme, but why do things suddenly break (such as the breadcrumbs, no icons, etc)?

If you've renamed your theme from "Sands" or "Sands_CSS" to something else, you need to modify template.php. Sands requires a few custom theming functions contained in this file, and functions will only execute in this file if the function is prefixed with the name of the theme.

For example, if you're using Sands, and you create a new theme "blah", you need to modify function names that begin with "sands_" to "blah_" for them to be called.

How do I modify the width of the columns?

Changing column with both Sands and Sands_CSS is easy, though not necessarily easy. In columns.css, simply change all occurences of "14em" with your desired column width (in ems). You can give the left and right columns different widths as well, if you follow the logic of the CSS.


Like this article? Please support my writing! Flattr my blog (see my thoughts on Flattr), tip me via PayPal, or send me an item from my Amazon wish list.