• capri-theme

last modified February 29, 2008 by francescociriaci

Migration-Note: If you are interested in the history of this page prior to the migration from the original page at the Plone Conference 2007 sprint pages, please  use the history of the original!

Capri theme

by Francesco Ciriaci (ilbestio), Eleonora Borelli (lili^), Franco Carinato (fco), Cinzia D'Angelo (ranzie), Denis Mishunov (spliter), Valerio Lo Bello, Luke Aune.

The concept

The idea is to provide a fresh version of the old Plone Default Skin based on the new Plone logo.
The Plone Default skin has soft colors, tabs everywhere, matches the old Plone logo... but it still great, we belive; thus the need for a simple skin that fits the graphical design of the new logo but does not break continuity as NuPlone (which we adore, btw).

First Draft of the theme

What is Capri?

Capri is a so beautiful island just in front of Naples, where the sprint is. Capri is also about the sea (the blue of the new logo).


Where is the code?

Capri is currently a branch of the plonetheme.pizza package. (https://svn.plone.org/svn/collective/plonetheme.pizza/branches/capri)

Latest version of the master (.psd file) - ask ilBestio


Guidelines for this theme

Fixed width, centered

Most sites use fixed width and it's such a common question to address, we wanted to provide it by default but...
Body background by default has not been defined yet.

Based on EM

Mosly for accessibility but... we love to try having a skin that fits all sizes!

Accessibility

Most important issue for us.

Global navigation as a bar

Another very common use case... and we're all fed up with tabs I guess.

Font policy

The idea is to use two main font families:

  • a sans-serif font for the all document body elements, breadcrumbs, footer and other possible small elements.
  • a cool serif font to give a special identity to the theme and help readability for: portlet headers, document description, search, document actions,  user actions.

    A useful links for webfonts: http://web.mit.edu/jmorzins/www/fonts.html

Usability and style of portlets

The main idea here is to provide a special icon for every portlet to:

  • make them look more "different"
  • increase usability for the user and manager (in part related to the new portlet management available in Plone 3)
  • give a little of visuals in a pretty empy theme ;)

We removed the icons next to items in portlets (but navigation) as it is most of the times not very common use case.
We have instead the special icon in portlets in the header (btw: the name of the image is ugly!)
To increase usability this icon set will have a different color (orange seems cool) from the base icon set and the same color (orange) will be used for portlet footer links.
It seems that having a nice icon and the same color for this header icon and footer links will help users to find out that portlet headers can do cool stuff if clicked.

Navigation portlet

Special attention is needed for the nav tree; here are the concepts:

  • Header icon: first choise is a "plus icon" to match the "if-you-click-here-the navtree will completely expand".
  • Icons on contents will be kept. Indentation and font size used wisely.
  • Hover, selected.... TODO (no ideas till now)

Footer

  • Condensed footer
  • high contrast with the rest of the skin
  • we'd like to put a portlet manager in there.... but is a new functionnality, not theme related.

Backoffice / Personal Actions

The concept is to use the same color code (a green) for  all  "logged in" actions and backoffice "decorations".
Thus logged in user the personal actions are .... green!

Tabs will be mostly like those in NuPlone, but green.
Dropdown menus again like NuPlone, probably with more contrast.

New icons

We would like also to produce a new icon set very close to default Plone but based on the new logo style and color.


Why this is a great theme to start skinning with...

  • Because it is very generic and contains all Plone default elements
  • Because it is nearly decorationless
  • Because you need to delete only a few lines from portlet.css and base.css to have a very empty but meaningful skin.


Progress

We have we done so far:

  • A nice  Photoshop FIle (.psd) with  almost  all  of the  main  Plone  default  elements  grouped  by the corresponding Plone code macro.
  • First draft of the theme and a few (recycled) icons
  • Defined fonts: same as old Plone Default (Lucida Sans) for sans, Georgia for serif (see CSS for fallbacks).
  • Accessibility checked
  • Improved "identity" and overall look and feel
  • Management screens (backoffice) drafted! http://www.openplans.org/projects/plone-conference-2007/capri-theme/capri-skin-backoffice-draft.jpg


Todos

  • Define exact color codes based on final new Plone logo color and web safe colors
  • Accessibility improvements
  • Print CSS check
  • Fullscreen CSS check
  • Favicon !!!!! (please help) How to Create a Favicon Image

Skinning notes


The whole theme is designed with a 3 column layout in mind!
Removing portlets from one column may broke alignments