Assumptions

• Plone 2.1.x or Plone 2.5.x installed
  
• CMFContentPanels 2.4 installed
• Plenty of content ready to be displayed in separate
  panels ;-)
  

Introduction

CMFContentPanels is a way to create fairly complex page layouts by managing individual panels and the capability of using multiple rows and columns or multiple "sub-pages".

Sample (screen shot)

Adding a CMFContenPanel

After selecting "contentpanels" from the drop down menu, you will have a number of choices to make:

1. Title - Title of this CMFContentPanel and used for creating the short name / URL.
2. Page Layout Mode

• Tile mode -- for creating multiple rows of panels on a single page
• Tab mode -- for creating multiple pages within a single CMFContentPanel; a clickable button is automatically generated for each page.

Adding a CMFContenPanel (more)

1. Set to Left/Right Column - used for overriding the left and right portlet settings. [need screenshots of this and possibly more detailed explanation].
2. Custom CSS - used to override the default CSS (see "More fun with CMFContentPanels" for when this can be useful).

The Layout Tab

• Page
  
• Page Parameters
  
• Columns

The Layout Tab (screen shot)

Note the "new page" icon on the far right, the "Page parameters" section, and two sets of controls, one for each column.

Page

Clicking on the new page icon will add a new row or a new page, depending on the mode selected previously.

If "tab" mode is being used, then this adds a new "sub-page" with clickable buttons provided automatically.

If "tile" mode is being used, then this essentially adds a new row on the same CMFContentPanel page. This is extremely useful if you want one row to have two columns and then another row to have a single column that spans the two columns from the first row.

Page Parameters

• Page Title - used when "tab mode" is selected; the Page Title will be the text of the clickable button.
  
• Row Spacing - amount of horizontal space between panels in pixels.
  
• Column Spacing - amount of vertical space between panels in pixels.
  

Panel Settings

By default, a new CMFContentPanel will have one row (or page) and two columns. Each column can have its own width that can be customized in percentages or absolute pixels.

Additionally, each panel has four icons for the following functionality:

• Adding a panel -- see "Panel Content" below
  
• Moving a column (left, right, up, or down)
• Adding a new column
  
• Deleting a column
  

Note: not all these functions make sense in all cases.

Panel Configuration

Clicking on the "new panel" icon brings up the Panel Configuration pop-up window with the following sections:

• Related Content
• Viewlet
• Viewlet Settings
• Preview

Panel Configuration (screen shot)

Panel Configuration: Related Content

From the Related Content section, you can browse your Plone site and select the content what you want to have displayed in the panel.

Panel Configuration: Viewlet

The viewlet selected controls how the chosen content is displayed. The viewlet choices available are based on the content type selected in the "Related Content" section:

• Content Related
• Folder Related
• Site Wide
• Personal Related

As you select various viewlets, the Preview Section is updated.

Note: by default, there isn't a viewlet specifically for listing events. See "More fun with CMFContentPanels" for more information.

Pane Configuration: Viewlet (screen shot)

The viewlet section which determines how the content selected will be displayed. In the screen shot below, a page has been selected in the Related Content; by default, Title description is selected in the Viewlet section.

Panel Configuration: Viewlet: Content Related

Viewlet choices are limited to single content items (Page, Image, etc.) Note: It's not possible to display the content (Body Text) of a single news item or event. (Bug? Or probably they just each need a custom viewlet based off of Plone's templates for these types :p)

Smart Folders will have one option available, "Topic result list", which is suitable for everything but Event-based Smart Folders (See "More fun with CMFContentPanels" for more information.)

Panel Configuration: Viewlet: Content Related (screen shot)

Panel Configuration: Viewlet: Folder Related

These viewlet choices are for "folderish" items. When multiple items can be displayed (e.g. "Recent changes"), additional settings are available under "Viewlet settings" for finer control of what gets displayed.

Note: not all choices apply to all folders; many only make sense based on the content in the selected folder.

Panel Configuration: Viewlet: Site Wide

These items are always available, regardless of where you have browsed to via the Related Content section:

• Calendar - Simple month-view calendar. Note: this calendar does not appear to highlight dates with events occurring on them.
  
• Simple text - easy way to enter (raw) HTML content. Note: built-in editors are not available for editing
  
• RSS - To display items from an RSS feed. Note: http://feedparser.org/feedparser must be installed for this feature to work.
  
• Inline frame - Display another page (external or local) within this panel by specifying a URL.
  

Panel Configuration: Viewlet: Personal Related

These items are always available, regardless of where you have browsed to via the Related Content section. They are limited to your "personal" content items:

• My recent changes
• My favorites
• Review list

Panel Configuration: Viewlet Settings

Minimally, you may select a skin from the default listing to control the overall appearance of the panel:

• Default
• No title
• ZopeZen
• Default Box
• Alert
• Dotted
• Rounded

Panel Configuration: Viewlet Settings (more)

When choosing a folderish item in the Related Content and a folderish view (e.g. "folder listings", "recent items", etc) for that item, additional settings are available such as:

• title (optional)
• max number to list

Panel Configuration: Viewlet Settings (more)

Two viewlets that provide the most flexibility for folders with multiple content types are "Recent changes" and "Folder changes":

• Subject (Note: couldn't figure out the purpose of this. Entering "My Subject" resulted in nothing showing up in the Preview Panel)
• Portal Types
• review status
• search sub-folders
• show rss link
• link more to

Panel Configuration: Preview

Panel Configuration: Select this panel

Once you have clicked on "select this panel", the pop-up disappears and the "layout" of your CMFContentPanel item is updated automatically. This is worth noting in the event you find yourself editing a CMFContentPanel that is already published: there is no "save" button per se.

Example layout: tab mode (screen shot)

"Page 1"

Example layout: tab mode (screen shot)

"Page 2"

Example layout: tile mode (screen shot)

"Page 1" includes the calendar, the lorem ipsum (on the right), and news panels. "Page 2" is the bottom row with a single "lorem ipsum" panel that spans the two columns above.

Changing the content of a panel

To change or update the content inside of the panel, click on the icon in the desired panel and the familiar pop-up will appear.