MagicSkin (rounded corners skin)
MagicSkin adds a new visual style to Plone 2.1. Whereas many other skins just change a couple of colors or reposition some elements, MagicSkin does a lot more. It introduces a rounding technique based on image-rounding into plone but still keeps the flexible positioning (within limits) instead of making a static-width skin. Furthermore, the skin is customizable by less experienced users in a very simple way.
Project Description
Description
MagicSkin adds a new visual style to Plone 2.1. Whereas many other skins
just change a couple of colors or reposition some elements, MagicSkin does
a lot more. It introduces a rounding technique based on image-rounding into
plone but still keeps the flexible positioning (within limits) instead of
making a static-width skin. Furthermore, the skin is customizable by less
experienced users in a very simple way.
Please note installation instructions as despite normal Plone install some files
have to be modified for full functionality.
(There are !important declarations in Plone CSS MagicSkin can not override).
Version 0.7 is beta and not intended for production sites as further browser
compatibility test are necessary. If you want to support development, please send
bugreports to ploneworks@gmail.com, in case of visualization bugs include
screenshots whenever possible.
By the time of writing, some testing has been done with current windows and
linux browsers, none with mac so far.
If you like MagicSkin and deploy it on your website, please send me an email
containing the link....I'd love to know about! (ploneworks@gmail.com)
Known issues
LiveSearch: the border breaks on many browsers
FireFox 1.07/Win: one pixel error on some(!) of the portlets at the lower right (does not always happen)
IE 5.5: Right columns are too far right so users have to scroll (is still accessible)
Opera 7.02: Problems with navigation icons and search, the same as with default ploneskin
Opera 6.0: Head section does not look fine but is accessible, other problems as default ploneskin
Modifying MagicSkin
As mentioned above, it is easy to modify the Look & Feel of MagicSkin.
Within the MagicSkin folder there is a folder called skins. It has 5 subfolders:
images, roundimages, styles, portlets and templates.
Many color definitions are done using variables, so you just have to tweak
values in "base_properties.props". Do not take the your original file - use the one
in the styles folder!
If you want other borders/corners just use the Photoshop files (available for download)
and create your own framing. Then copy your .png-files over mine in images. As long
as you do not change width/height of images, your modifications will directly work
(do not forget the clear browsers cache and restart/refresh zope).
If you need or want to change CSS code, use the file "custom.css.dtml". CSS rules
in that file will overwrite MagicSkin CSS rules. Note: MagicSkin has three CSS files:
one for the header, one for the portlets and main.css.dtml for the rest. MagicSkin
CSS rules are commented - it is a good starting point to look at the files...
Finally, you have "your" skin and you want to share with the world? Please, do not
publish your "OwnSkin" as a product as long as you just tweak a few things. MagicSkin
is modular - so users can download MagicSkin and then copy your base_properties.prop,
your custom.css or your images directly into the appropriate folder.
This seperates the "working" part of MagicSkin from your visualizational add-on, making
further modifications and compatibility upgrades much easier.
Credits
MagicSkin has been inspired by the rounded portlets Denis Mishunoff created for
Plone 2.0 - see http://plonetarium.objectis.net for more infos. Those portles
sadly do not work with Plone 2.1 any more.
Special thanks to David Convent for his tutorial "Creating a Custom Style for Plone 2.1"
published on plone.org (http://plone.org/documentation/tutorial/creating-custom-style/introduction)
Current Release
No stable release available yet.
All Releases
| Version | Released | Description | Compatibility | Status |
|---|---|---|---|---|
| 0.9 | The first beta dedicated to Plone 2.1.2 using those final templates. More about this release… |
Plone 2.1.2
|
beta | |
| 0.7.1 | Fixed installation bug (see 0.7 for photoshop files) More about this release… |
Plone 2.1.1
Plone 2.1
|
beta | |
| 0.7 | Initial release, beta More about this release… |
Plone 2.1.1
|
beta |

