Luminance Skin

Warning

This product has not had a release in over 1 year and may no longer be maintained.

LumianceSkin is the successor of MagicSkin published earlier this year. While MagicSkin is based on image-rounding, LuminanceSkin provides dynamic rounding using CSS and Javascript. In contrast to MagicSkin that only rounds elements visible to anonymous users, the goal for LuminanceSkin were rounded views for both anonymous and authenticated users.

Project Description

LumianceSkin is the successor of MagicSkin published earlier this year. While MagicSkin is based on image-rounding, LuminanceSkin provides dynamic rounding using CSS and Javascript. There have been some publications in this area  - my favorite toolbox is Nifty Corners by Alessandro Fulciniti. I took his latest version, Nifty Corners Cube, as a starting point for LuminanceSkin. Another starting point was the excellent DIYPloneStyle 2.1.3 by David Convent. In contrast to MagicSkin that only rounds elements visible to anonymous users, the goal for LuminanceSkin were rounded views for both anonymous and authenticated users. View the project homepage to see the skin in action!

The first public release, LuminanceSkin 1.2, is a proof-of-concept rather than a fully-styled skin for production purposes. Intentionally it is focused on css-styles needed to accomplish rounding rather than normal visual design (around 600 lines of code). LuminanceSkin does not modify any Plone templates, it just adds style sheets and two javascripts. Customization is easy using the provided base_properties and the emtpy custom.css file. Kindly do not publish a "new" skin if you just edit these two files - it is enough to publish the two files on their own. This will simplify updates on coming versions of Plone.

Features:

• rounded global navigation tabs
• rounded portlets (except calendar for now)
• rounded content area
• rounded content tabs
• rounded action menus
• more mouse-over effects than in standard Plone
• basic Internet Explorer (version 6+7) Hacks
• integrated fallback if no Javascript is available (no rounding)

 

LuminanceSkin includes a modified version of Nifty Corners Cube. I had to add a function to force color settings as the automatic detection of Nifty Corners Cube is - though great - not usable on all Plone elements.  Without changing Plone templates, the only way was changing the rounding functions.

 

A few words on browsers: my aim is to meet Plone's browser compatibility for the anonymous views and compatibility with modern browsers for the edit views. At the moment, MagicSkin runs well on Mac (FireFox, Safari, Camino) and Win (IE 6/7). I will not care for IE<6 anymore. Maybe it would be good to generally prevent rounding with older browsers, an elaborate Javascript browser selection routine for niftyLuminance.js would be welcome!

 

Author: Markus Proske