Update: June 2012 - This project has been delayed as it should be much easier to accomplish a "style switching" theme after the release of RavenNuke 3.0. With a variety of other projects on the board look for work to resume on Chameleon some time in 2013.

Currently in production, our upcoming free theme Chameleon will introduce several new features which many webmasters might enjoy and benefit from. Built around a flexible CSS based template, Chameleon can adapt to just about any fluid or fixed size layout that one may desire. Alternate Stylesheet support for on-demand style and layout changes without a page reload. Media Targeted Stylesheet Support for attractive site-wide printable layouts; and styling targeted to specific devices such as handheld, braille, and aural.

CSS Based Layout

Chameleon uses a flexible CSS based template that can easily be adapted to any 1, 2, or 3 column layout in liquid or fixed dimensions; with fluid or fixed size columns. All content containers including the header, footer, and body of the page are wrapped in extra <div>'s for your styling/jQuery pleasure.

Special Blocks and Column Format

Chameleon will display all blocks on the right within a single column, and when both block columns are visable it will display blocks in a wide format [A], which means you are free to use content up to 300px wide in your right side blocks. Very handy for popular widgets from Facebook, Twitter, Adsense, etc, which are often too wide to fit within the block columns of most themes. When only the left column of blocks are visable it will use a narrow layout for the block column..[B]

Alternate Stylesheet Support

Alternate stylesheets allow users to switch the page style dynamically; without a page refresh. This can be as simple as text size or as complex as a complete restyle. Chameleon will include 4 built-in styles, for more info on Alternate stylesheets and the Chameleon framework, see: Working with Alternate Stylesheets

Media Targeted Stylesheet Support

One of the many advantages of CSS based themes is the ability to target styling to specific devices.

• tty - Teletypes and similar media using a fixed-pitch character grid
• tv - Television type devices (low resolution, limited scroll ability)
• projection - Projectors
• handheld - Handheld devices (small screen, limited bandwidth)
• print - Print preview mode/printed pages
• braille - Braille feedback devices
• aural - Speech synthesizers

Unique ID's for Blocks

All side and center blocks will have unique CSS ID's[*], based on the block title; making it much easier to target specific blocks for CSS styling snd/or your favorite jQuery scripts. For instance, a side block titled "Recent Comments" would be nested within:

<div id="sb-recent-comments" class="block">

or a center block titled "Essential Web Development Sites":

<div id="bc-essential-web-development-sites" class="block">

What about bizarre titled blocks like "Test's & Trial ! !@#$%^&*()+=?`~"? Don't worry Chameleon will cleanse them[**] and produce a valid CSS ID.

<div id="sb-tests-trial" class="block-center">

Timeline

The enormity of completing all the desired features of this theme has started to take shape, as it is essentially 4 themes in one; with a handful of new features that also have to be hashed out. Sitewide printable layouts and braille/aural support are important additions I hope to fit into the first release... Realistically, look for a Chameleon beta release sometime in 2011..

* Unique ID's will be generated for each block provided you do not have two blocks with the same title; doing so will produce validation errors and likely break any styling or scripts reliant on those ID's. Each element on a page can have only one unique id, and it must be used only once on the page.

** This has only been tested with English, so block titles that will have non-latin characters striped out; which may "mince" the CSS ID in some languages. In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9], plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. It is generally inadvisable to start ID's or class names with a hyphen (-) or underscore (_) as they are often used for browser specific extensions.