You are here: Home Plone products MagicSkin (rounded corners skin)

MagicSkin (rounded corners skin) (0.9)

1
by olena last modified 2008-12-23
0.0
0.0
0.0
0.0
Released on 2006-03-26 by Markus Proske for Plone 2.1 under GPL - GNU General Public License available for All platforms.
Software development stage: beta
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.
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.
   
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.

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.
Document Actions
Powered by Plone