MagicSkin (rounded corners skin)

by Markus Proske last modified Feb 16, 2011 02:02 AM

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

MagicSkin (rounded corners skin)

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

Comments (0)