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!

Yes, the colors are a bit much, but it's a very exciting design for me. This is my first theme using Drupal's color module. I've been meaning to learn how to use it for quite some time. So, last weekend I sat down and decided to not get up until I had it down. This was no small task as this was one of the more complicated Drupal APIs that I have yet to learn. It's not that difficult to understand, there are just a lot of moving parts. I'll do a more extensive blog post about the inner workings of the theme, but in short, you can pick the background color, link and text color, and pick a gradient for the top-right block using a simple color picker. I'm hoping to polish this one up and submit it to drupal.org as my first contrib theme!

One of the most fun parts of the project was to create a colorable Druplicon. I traced some of the highlights and shadows from the Druplicon in Illustrator, then added these to my base.png for the color module. Now, when you color your theme, the Druplicon becomes the same color as your site links!

I'm super excited about having this in my arsenal because it provides some elegant, helpful features when handing off a site to a non-technical administrator. You really don't even need the complicated background images. You can use the color module for something as basic as just letting them select the link and text colors. Very cool stuff!!

I just finished up the preliminary work on a new site where the client wanted drop down menus and fancy image links for the top-level menu items. The requirements were to use the Drupal menu system to maintain permissions on the links, but also use stylized images for the main menu links. It took a bit of searching, but the solution was pretty elegant thanks to the Drupal community.

The drop downs were easy. I used the Nice Menus module for the first time and immediately fell in love with it. It provides up to 99 blocks to which you can assign Drupal menus. The menus can drop down or fly out, depending upon your design. Plus, you can stylize them to your hearts content to match your theme. So, the only real problem was how to use images for the top level menu.

There are apparently a few ways to solve this problem. My first attempt was to just use CSS to size the menu items, hide the menu text and place a background image for the element. This seemed to be the least obtrusive method for Drupal, but flaws emerged with compatibility and accessibility. Firefox seems to like color: transparent; but IE does not. They both seem to like text-indent: -1000px; but with either of these solutions the links completely disappear when you turn images off :(

Luckily, I stumbled upon this comment which details the use of theme_menu_item_link() to swap the menu title field with the description field and allow it to use HTML for display. After implementing the function in your template.php file, you can type your HTML img tag into the description field, and your hover text into the title field when creating a menu item.

Now, you have an accessibility friendly menu which uses Drupal permissions, image tags with alt text and an anchor tag with title text. You just have to do a little bit more CSS cleanup to get the drop downs to match your theme and you are golden!

Many thanks to the Drupal community on this one!!