Basics

You want to have round corners, wicky borders and drop shadows to your portlets? This tutorial explains how to modify Plone's portlets to have free form frame made from images around the portlet.

What we are going to do

1. Creating one template macro which is called by every portlet

• This macro renders the frame around the portlet content
• Portlets place their content inside frame using the metal:fill-slot mechanism of TAL page template language
• Template macro defines nine image slice around the portlet content. CSS background-image property is used to stylize these slices.
  

• Individual portlet macros calls portlet template macro
  
• Modify portlet header to fill its name to fill-slot
• Modify portlet wrap its content to portlet body fill-slot

This approach is good because

• Frame visuals and content are separated to two different templates. Either of them can be changed without affecting another.
  
• It's very clear approach without much hazzle
• Portlets can be resized to any size without breaking the layout
• Works well with all browsers
• Changes to individual portlet code is minimized by using shared portlet frame template
  

Prerequisites

• Basic Plone development knowledge
• Plone skin mechanism knowledge. This tutorial doesn't tell where files should be placed inside Plone or how one can rollout new skins.
  
• TAL page template language knowledge
• CSS knowledge
  
• Image editor with slice export functionality
  

The result

The result will look cool like this