Red Innovation 0.6 Final Release

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

• GPL

Requirements

• Plone 2.1.2, Plone 2.1.3

Installation

1. Extract product to your Plone/Data/Products directory 
2. 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.
  1. Go to Zope Management interface, choose Plone -> portal_skins
  2. Choose Ruby Red
  3. 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.
  4. Click customize
  5. 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.

1. Go to portal_css in Zope management interface
2. Add a new stylesheet called "icons.css", media:all
3. Go to portal_skins/custom
4. Create icons.css DTML page
5. 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

License: GNU General Public License (GPL)

Download Skin (2325 downloads)

Tested with the following Plone versions:

By: Mikko Ohtamaa email - website