Color Schemes: Color schemes are offered for eight different blogs, all from one skin. Neat! (Three are shown here).

The first step was to get the basic layout down. The client had dictated a three-column layout, which are notorious for wasting page real estate. We minimized this problem, by narrowing both of the sidebars and maximizing the center text panel. This focuses the reader's eye onto the content and provides a comfortable reading pane.

A custom site name graphic, which is both simple and elegant, helps to brand the site and provide continuity on each of the eight different sub-blogs. Elegance is further enhanced by rounding edges, integrating color schemes and by giving the page a three-dimensional feel, through the subtle use of highlights and shadows.

There is a consistent look, from blog to blog, but each has a distinguishing page graphic, in the upper right, with a complimenting color scheme, for uniqueness.

Expanding Categories: An elegant & space-saving expanding category list if featured.

The site owner wanted to deploy a collapsible category list. We used one from Matt Kruse and integrated it with b2evolution. Other than Google advertisements, this is the only javascript on the page. This exemplifies the AstonishMe! principle:

Javascript should enhance a visitors experience, never degrade it.

Hence, the collapsible categories javascript degrade gracefully for non-javascript visitors (i.e., the category list is shown in standard fashion).

AstonishMe! also designed a database query to power a unique "author-based" sidebar sorting mechanism. Clicking on an author will bring up all the posts by that particular author. (Keep an eye out for an AstonishMe! plugin, if you wish to deploy such a capability on your site).

There are a few other touches that make this design stand out from other b₂evolution skins. The search form underwent a radical, but elegant change. The submit button is now integratd into the form window as a magnifying glass, doing double duty both an explanation and a "do it" button. (Pressing "enter" also kicks off a search, after typing a search term into the search form.)

CSS Image Rollover: Descriptive blog text is shown when a mouse is hovered over the blog name. Convenient!

The blog list contains a special CSS Image rollover feature. Hovering a mouse pointer over the blog name will bring up a blurred version of the unique blog-page graphic, along with descriptive text. This text provides a short explanation as to the nature of the entries contained in a particular blog. This advanced technique is pure-CSS and XHTML-valid (standards-compliant). No javascripting is necessary and it is browser-independent.

Entry footers (the grey area at the bottom of each post) contain custom black-and-white icons. Deployed as CSS rollovers, they change to colorful icons when a mouse is hovered over them. They include:

• A normal permalink "chain" icon.
• A del.icio.us bookmark icon.
• A comment icon (filled with a number, representing the number of comments for an article).

Like all AstonishMe! designs, this color-enabled custom skin is written to standards (XHTML 1.0 transitional and CSS 2.0) and the few javascript features all degrade gracefully.

Results

The client was thrilled with their elegant, integrated, colorful new look. They are pleased to have a modern design that is a good match to their high-tech content.

Note: If you like this skin, keep an eye out, because we will likely make it available to our members, in the coming weeks.