<About />

My name is Kevin. I am a web professional living in Massachusetts. I build websites mostly using Drupal and jQuery. I use Vim even when I don't need to. When I'm not on the computer, I'm usually hanging with my wife, Melissa.

<Search />

Creating a colorable theme

I've always been fascinated by the color module. If you've ever selected a color palette for the Garland theme, you know how cool this module is. So a couple of weekends ago I decided to buckle down and figure it all out. It wasn't the easiest module to learn, but I have to say it felt really, really good when I finally got it to work. It's not overly complicated, but there are a lot of configurations to keep track of.

I kind of liked my experimental theme, so I started using it for myself and contributed it on drupal.org as Aquanaut.

If you want to get started with the color module, I highly recommend reading this doc page. It covers all of the basics. A couple of things that I learned:

  • Format your CSS file so that multiple CSS selectors/pseudo classes are on the same line:
      /** Don't use this format **/
      a:link,
      a:visited {
        color: #336699;
      }
     

      /** Use this format instead **/
      a:link, a:visited {
        color: #336699
      }
     
  • The first color palette in the schemes array in color.inc simply defines the color picker values. If you select the default (first) color pallette, color module ignores it and loads the style.css and images from your theme directory.
  • A really easy way to create default theme images is to set up the base.png and color.inc, pick a color palette using the color module, save the changes, then copy the images from your files/color directory into your theme directory.
  • Each fill color can only be used once, so organize your base.png wisely if you need to use a color for two different image slices.

Happy theming!

Next-gen Color.module

Please consider integrating with the next-generation color.module instead.

It's a bit buggy still, but is very powerful, many times more flexible and adaptible than color.module and under active development. The author, skiquel, and I have been working on making Acquia Marina theme colorizable, and the issue/patch serves as a good guide, as well as the module's documentation.

Other Options

I've been meaning to look at the color.module myself. Wondering if we can use the same pattern for other display options, such as configuring a grid.

A few modules like this and users won't even need CSS and HTML skills to theme a site.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <span> <a>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

Mollom CAPTCHA (play audio CAPTCHA)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated.