MagicSkin (rounded corners skin) 0.9 (Beta release) (Feb 02, 2006)
This is not a final release. Experimental releases should only be used for testing and development. Do not use these on production sites, and make sure you have proper backups before installing.
The first beta dedicated to Plone 2.1.2 using those final templates.
For additional information about this project, please visit the overview page .
Available downloads
Release Notes
| Tested with | Plone 2.1.2 |
|---|---|
| State | Beta release |
| License | GPL |
| Released | 2006/03/27 00:00:00 Universal |
Description
MagicSkin adds a new visual style to Plone 2.1.2. 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.
Version 0.9 is still beta and not intended for production sites as further browser
compatibility tests are necessary. If you want to support development, please send
bugreports to ploneworks@gmail.com, in case of visualization bugs include
screenshots whenever possible.
If you like MagicSkin and deploy it on your personal website, please send me an email
containing the link....I'd love to know about! (ploneworks@gmail.com)
Known Bugs
- going to edit view, both logo and textlogo are missing or only partly visible (I would appreciate any tipps on this one!)
- print.css has to be fixed
- the border of the Livesearch is not perfect
- 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
Browser Testing - Quick Test
The test was done using browserpool and I just checked appearence of the front page in
every browser. No serious testing has been done except for FireFox 1.5, IE 6.0 and
Opera on Win XP.
- MacOS 10.3
- Passed: Safari 1.3, FireFox 1.07, Opera 8.5, Camino 0.8.4
- Failed: IE 5.2.3
- Debian 3.0
- Passed: Konqueror 3.3.2, FireFox 1.0.4, Opera 8.5
- Win XP
- Passed: FireFox 1.0.6/1.5, IE6, Opera 7.5/8, Netscape 7.2, Mozilla 1.7.11
- Win 2000
- Passed:
- FireFox 1.06, IE 5.5, Netscape 8.08, Opera 7.23/8.08, Mozilla 1.5/1.7.11
- Accessible, minor bugs:
- IE 5.5: column1 + main area + column2 wider than header
- Netscape 6.2: calendar has underlying table, looks strange ;)
- Accessible but ugly:
- Opera 6.06
- Failed:
- Communicator 4.77
- Win 98
- Accessible, minor bugs
- IE 5.0: same problem as 5.5 on Win2k
Installation
Copy MagicSkin to your Products directory and restart the server.
In Plone visit "Site Setup" -> "Add/Remove Products" and install
MagicSkin. Go back to "Home". You might have to empty your browsers
cache to see all the changes.
Uninstall
You can change back to the default skin at any time through
"Site Setup" --> "Skins". To completely remove MagicSkin, go to
"Site Setup" -> "Add/Remove Products" and uninstall MagicSkin.
Afterwards you can remove the files from the Products directory
of your Plone instance too. Do not remove the files while the skin
is activated!
Changes made to Plone
Rounding corners does not work without changing some of the templates. Sadly, changing
templates might lead to problems on migrating Plonesites to new versions of Plone.
MagicSkin was designed to keep the changes as limited as possible. At the end of this
document, there are more informations on changes and upgrading.
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 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
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)
MagicSkin is based on DIYPloneStyle 1.0.4, a skeleton product ready for building new graphical
designs for Plone.
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.
Changes to Plone Templates
MagicSkin does not work without changing some of the plone templates. These changes
are quite simple and listet in the TemplateChanges.txt file included with the product
Upgrade from Plone 2.1.x to Plone 2.1.y
The final release will be dedicated lets say to Plone 2.1.x. If you need to
upgrade faster than a modified MagicSkin for 2.1.y is available you might try
yourself. Go back to the default skin and upgrade your Plone. Then check, wether
there are changes in one of the files mentioned above beside those I did for
MagicSkin. Yes? Take the new Plone file and reapply the small changes for MagicSkin.
Have fun!
