Red Innovation Skin
Visual theme for Plone 2.1
Version 0.6
Copyright
Copyright 2006 Red Innovation
This product includes code from DIYPloneSkin 1.0.4 product copyright David
Convent and Martin Aspeli.
Description
Look sexy. Look cool. Look better than others. Rounded corner, drop shadow and
big header image layout for Plone.
Features
-
Red color scheme
-
Dominating top image, like in popular Wordpress layouts
-
Reading friendly 60-80 characters per line content area layout
-
Portlets with smooth image frames
-
Drop shadows
-
Metallic button polish
-
Search portlet
-
Layout shrinks gracefully when narrowing the viewport
-
Graceful degeneration when images are disabled
-
Per item custom navigation tree icons
The skin was built www.redinnovation.com
site in mind. For your own site, you need some customization which requires
some knowledge of computer graphics. Paint Shop Pro template images for the
skin are included.
License
Requirements
Installation
-
Extract product to your Plone/Data/Products directory
-
Use Plone quick installer to install the product
Customizing
-
You need to change customize global_logo.pt and footer.pt files with your
own logo and copyright texts.
-
Go to Zope Management interface, choose Plone -> portal_skins
-
Choose Ruby Red
-
Click either footer, logo_animated or logo_text. The logo is divided to
two parts. You can disable the other part if you can have logo in one piece.
-
Click customize
-
Now you can edit your custom items in portal_skins/custom folder
-
All portlets must be changed to use portlet slot mechanism introduced in this
skin. This skin is shipped with modified
-
portlet_navigation
-
portlet_login
-
portlet_prefs (Preferences)
-
portlet_search
-
Add portlet_search to ZMI -> Plone instance -> Properties ->
left_slot, since there is no longer search filed in main_template
Per item navigation tree items
Each navigation item will get CSS id which is normalized version from item
title. You can use this id and Plone's customize function to create per item
navigation tree icons.
-
Go to portal_css in Zope management interface
-
Add a new stylesheet called "icons.css", media:all
-
Go to portal_skins/custom
-
Create icons.css DTML page
-
Add following sample code
#navtree-members a {
background-image: url(&dtml-portal_url;/finland_flag_icon.gif);
background-position: left center;
background-repeat: no-repeat;
}
This will use image finland_flag_icon.gif (Finnish flag) for Members
in navigation tree.
References
The skin is in live usage in www.redinnovation.com
Quality assurance
The skin is tested with:
-
Plone 2.1.2
-
Zope 2.8.5
-
Windows XP
-
IE 6.0
-
Opera 8.5
-
Firefox 1.5
Known problems
-
The skin is quite heavy and in its current form is not suitable for mobile /
text-only / accessibility demanding sites
-
Some of administrative interface buttons are not skinned propeply
Todo
-
Make tables used in layouts screen to speech software friendly
-
CSS optimizations - remove overlapping style definitions
Contact
If you need consulting, freelancer or just a helping hand in your Plone
projects, please contact us. Just drop in email and we'll see what we can do
for you.
Red Innovation company web site
info@redinnovation.com