Overview

Theme Hues uses collections of css selectors to allow users to change their theme colors and background images. Collections of selectors, or regions, can be associated with a single color. This allows the theme developer to group theme elements chromatically (all menu items, all headers, or all text that needs special attention, for instance) and allow users to alter colors for those specific groups. Not only does this promote good ui practice, it avoids the MySpace affliction that can come when non-designers are given too much power.

Simply put, the theme designer or site administrator can specify collections of CSS selectors, give them a name, and allow the user to change the color for that group of selectors.

Further, designers can designate other selectors so that users can upload an image and use that image as the background-image property of that element.

Theme Hues saves the users choices in a stylesheet called 'theme_hues.css' and injects it into the page header.

Who sees the style settings?

Thanks to lestu for his work on adding this feature.

Administrators can set the scope of the style changes in the administration form.

Global

Any authorized user may change the style settings. These settings will be visible to all users throughout the site.

User Specific

Any authorized user may change the style settings. These settings will only be visible to that user throughout the site.

User Content

Any authorized user may change the style settings. These settings will be visible to anyone but only on content that the user has created. In effect, the style settings will be visible on the user's blog and user profile, and on any nodes that the user has created.

Roadmap

Here are features I plan to add in a (not-too-distant) future version of the module, roughly in order of importance.

• Enhanced UI for administrators

  Parsing style sheets to extract selectors that define color, background-color and background-image in order to save typing these selectors in by hand.

• Separate stylesheets on multi-site setups

  Currently, sites that share the same files directory and database can't have separate Theme Hues settings.
  See #572888: Support for multiple simultaneous themes? for more details.

• Allow users to create style settings for a single node

  Thanks to gonzalof81 for making this suggestion.

Quick Start Guide

Basic Concepts

The administrator groups css selectors. These are known as "regions".
The end user sets colors for those groups.

Administrating Regions

On the administration page (admin/settings/theme_hues/administer), you can group css selectors so that an end user can associate colors with them. You can also choose css selectors that users can set the background-image value for.

To create a new Region, enter a value in the empty Name field that appears on the administration form. This is an arbitrary value and should indicate the group of selectors in some descriptive way, for instance "Headers", or "Dark" or "Light elements".

In the Selectors area, enter the css selectors that you wish to associate to this region, followed by the css property the user can set. Selector and property should be separated by the pipe character (|). Enter one selector group per row.

You may indicate that the !important rule be added to a property by appending '!' at the end of the property.

Example

The Description field contains instructions to the end user, and appears on the Theme Hues configuration page.

For images, enter an identifying label for the image followed by the selector, separated by the colon character (:). The label is an arbitrary label that works for you and the end user. Examples are: Header Image, Background Image, etc.

The selector is the selector that will have the background-image property associated with it.

Example
Header Image:#header
Front Page Header Image:html #body.front #header

Setting Styles

Authorized users may set style choices once regions have been defined.

The configuration page is found at /theme_hues/configuration. You may add this as a menu link to a menu accessible to your users, though it should also automatically appear in the Navigation menu.

Downloads