Demo and instructions

After way too long, I have a demo site up and running.

http://soc2008.hotdrupal.com/~ximo/
(Thanks to HotDrupal for VPS hosting)

Log in and try it out!

Another, more comprehensive, icon set is coming soon. I just need to rework it a bit..

Read on for more information about how the module works and how to try it out on your own Drupal site.



Installation

To give the module a go on your own Drupal installation, you will need the following:

With the above files downloaded, do the following:

  1. Extract the Garland (with icons) theme into your themes folder (e.g. sites/all/themes)
  2. Fire up your browser and go to the administration overview. The icons you see there are the default icons provided by this modified version of Garland, added using normal CSS.
  3. Go to admin/build/themes and select either Garland (with icons) or Minelli (with icons) as the default theme
  4. Create a new directory named "icons" in your sites/* directory (e.g. sites/all/icons)
  5. Extract the Lullacons icon set into the newly created icons directory
  6. Extract the Icon module into your modules folder (e.g. sites/all/modules)
  7. Enable the Icon module from admin/build/modules
  8. Go to admin/build/themes/icons, go to the tab for your theme, enable Lullacons
  9. Notice how some icons have changed (where Lullacons provides new icons), while others remain the same (the defaults for the theme)

This demo is more like a proof of concept. The Lullacons set doesn't hold enough icons to fully replace the default ones (which are from Gnome and GPL'ed, by the way!). A more complete icon set might be able to replace all of the icons shown on the main admin overview.

The most likely use for this module are contrib modules that provide icons for their own pages, taking advantage of any default icons for special actions in its admin pages.



More info

Icon enabled themes
Any theme can be easily made compatible with the Icon module. You simply declare the icons used by it in its .info file. The icons themselves may be positioned using normal CSS (background-image: url(path/to/icon.png)) or inline using theme('icon', 'icon-name', $size). Any existing theme that use CSS to position its icons is therefore very easy to convert into an icon enabled theme.

Icon sets
The module lets you install icon sets (in ./icons or ./sites/*/icons), which are similar in structure to themes or modules. Icon sets must provide a .info file declaring its icons, and obviously some icon files.

Cascading and fallbacks
The module has a simple fallback mechanism when an icon set doesn't provide an icon used by the theme. By taking advantage of the cascading part of CSS, it will always fall back to the default icon provided by the theme if no icon set provides an alternative.

Not part of the module, but I've altered the Garland theme to declare a cascading path to the current page as classes in the body tag. This way, any page may be given an icon, based on the classes of the body tag (e.g. admin admin-content admin-content-types). Thanks to CSS' cascading powers, an icon added to admin/content (or .admin-content in CSS) will also apply to admin/content/types and admin/content/node-settings, if no icons have been specifically added to these pages. The lower the level, the more generic the icon should be, so this actually works very well.