Page Elements

Plone Theme Reference

1. Viewlet

What goes to make up a viewlet, plus cheat sheets on how to move, remove or customize them, and links to useful tutorials.

1.1. Anatomy of a Viewlet

The bits that go to make up a viewlet component.

Directive in ZCML

<browser:viewlet />

Attributes in ZCML

name: e.g. [your namespace].[your viewlet name]
manager: a manager interface
layer: a marker interface for your particular theme
class: a Python class. This class requires a 'render' attribute, which, in most cases, will point to a template. You don't need to specify the template in the ZCML, however, in Plone version 3.1.3 and higher, you can override this template using the template attribute below
template: in Plone version 3.1.2 and lower, you can only use this if you aren't using a class; in Plone version 3.1.3 and higher, you can use this to override the template you've set in the class you specified above
permission: in most cases this will be Zope.Public
for: specify an interface marking a group of content types, if you wish. The viewlet will then be restricted to those content types (for an example see the Presentation viewlet in the Elements section)
view: specify an interface marking a specific browser view, if you wish. The viewlet will be restricted to items with that specific view (for an example investigate the source code of the Content Actions viewlet - you'll find directions on where to locate this code on the Content Actions page of the Elements section)

1.2. Moving, Removing or Hiding a Viewlet

Moving, Removing or Hiding a Viewlet

1.2.1. Overview and Cheat Sheet

A cheat sheet of what you need to do to move viewlets in your page layout, or remove or hide them from your page.

You'll find detailed information and a tutorial on how to move viewlets here:

http://plone.org/documentation/tutorial/customizing-main-template-viewlets/reordering-and-hiding-viewlets

Quick Cheat Sheet of the Basics

Through the Web

Add @@manage-viewlets to your site URL.
If you want to move viewlets that only appear on a page, be sure to append @@manage-viewlets to the URL of the page.
You will find that you can move, hide or remove viewlets with this method, but that you cannot move them from one viewlet manager to another.

In your own product

Moving or removing viewlets is part of your site configuration:

Add or edit [your theme package]/profiles/default/viewlets.xml

You'll find general information about the site configuration in the Configuration section of this manual. It's worth reading this through before you launch in here, as configuring viewlets and viewlet managers can be a bit tricky. It will tell you

how you can get the Generic Setup tool to write out the configuration for you
why things might not be working as you expect

GloWorm is a useful tool here too. It will help you move the viewlets around through the Plone user interface and inspect the resulting configuration.

Removing a viewlet from a viewlet manager

You can't do anything more than hide your viewlet in the viewlet manager

<object>
    <hidden manager="[Viewlet Manager Name]" skinname="[your skin name]">
        <viewlet name="[Viewlet Name]" />
    </hidden>
</object>

Note that you can do this process through the web and then get the Generic Setup tool to write out the configuration for you to transfer into your own theme package.

Moving a viewlet within a viewlet manager

<object>
    <order manager="[Viewlet Manager Name]" skinname="[your skin name]">
Specify all the viewlets you want to see in this viewlet 
in the order you want them with this directive:
        <viewlet name="[Viewlet Name]">
    </order>
</object>

Note that you can do this process through the web and then get the Generic Setup tool to write out the configuration for you to transfer into your own theme package.

Moving a viewlet from one viewlet manager to another

If you are basing your theme on the Plone Default theme, then you'll find that reassigning a Plone Default viewlet is a two step process

hide it in its current viewlet manager
add it and give it a position in a different viewlet manager

<object>
Hide it from the current viewlet manager
    <hidden manager="[current Viewlet Manager Name]" skinname="[your skin name]">
        <viewlet name="[Viewlet Name]" />
    </hidden>
Add it to a different viewlet manager
    <order manager="[a different Viewlet Manager]" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[Viewlet Name]"
                 insert-before="[Name of Viewlet Below]" />
    </order>
OR Add it to your own viewlet manager
    <order manager="[Your Viewlet Manager]" skinname="[your skin name]">
        <viewlet name="[Viewlet Name]"/>
    </order>
</object>

you can also use 'insert-after="[Name of Viewlet Above]"' or use an asterisk to place the viewlet at the top or bottom of the manager (e.g 'insert-after'=*).
based-on="Plone Default" means that it will take the Plone Default ordering and then apply the insert-after and insert-before adjustments you've specified.

1.3. Overriding or Creating a New Viewlet

Overriding or Creating a New Viewlet

1.3.1. Overview and Cheat Sheet

A quick cheat sheet on how to customize or create a new viewlet.

You can customize a viewlet template through the web, but you can't alter the underlying Python class.

On the file system, rather than customize, the process is to wire up a new viewlet, or re-wire an existing viewlet.

You'll find a detailed tutorial on creating a viewlet in this article.

Quick Cheat Sheet

Through the Web

Use Site Setup > Zope Management Interfaces > portal_view_customizations to customize the template of an existing Plone Default viewlet.
You cannot create a new viewlet through the web.

In your own product

You will need to know the name of:

1. The viewlet manager interface: Look this up in the Elements section of this manual
2. Your theme specific interface: This is optional, but ensures that your viewlet is only available for your theme. If you used the plone3_theme paster template, then the name will probably be IThemeSpecific.

You will need to create the following (you should be able to locate the originals to copy by looking at the Elements section or by using GloWorm):

3. browser viewlet directive: This will go in [your theme package]/browser/configure.zcml
4. configuration file: [your theme package]/profiles/default/viewlets.xml

5. page template: [your theme package]/browser/[your template name].pt
6. Python class: This is optional (but see the note below for Plone version 3.1.2 or lower)
put this in [your theme package]/browser/[your module].py

Sample configuration.zcml directives

Re-wiring a Plone Default viewlet to use your own template (note the layer attribute is really important here)

<browser:viewlet
 name="plone.[viewlet name]"
 manager="[viewlet manager interface]"
 class="plone.app.layout.viewlets.common.[viewlet class name]"
 template="templates/[your template name]"
 layer="[your theme specific interface]"
 permission="zope2.View"
 />

Wiring up a new viewlet but borrowing a Plone Default viewlet class

<browser:viewlet
 name=[your namespace].[your viewlet name]"
 manager="[viewlet manager interface]"
 class="plone.app.layout.viewlets.common.[viewlet class name]"
 template="templates/[your template name]"
 layer="[your theme specific interface]"
 permission="zope2.View"
 />

Wiring up with a brand new viewlet with your own class or your own template

<browser:viewlet
 name=[your namespace].[your viewlet name]"
 manager="[viewlet manager interface]"
 class=".[your module].[your class name]"
 (or: template="templates/[your template name]")
 layer="[your theme specific interface]"
 permission="zope2.View"
 />

Notes for Plone version 3.1.2 or lower:

Sample Python class

In Plone version 3.1.2 or lower, you will need to use this to override a Plone Default viewlet, even if you only want to change the page template.

from [element namespace] import [element class name]
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFileclass 

[your class name]([element class name]):
    render = ViewPageTemplateFile("[your template name]")

2. Portlet

A cheat sheet of the bits that make up a portlet, plus information on moving, hiding or overriding a portlet.

2.1. Anatomy of a Portlet

The bits that go to make up a portlet renderer (which is the bit of a portlet you'll want to customize).

Customizing a portlet is similar to overriding a viewlet, but rather more straightforward. There is a specific ZCML directive for customization.

Directive in ZCML

<plone:portletRenderer />

Attributes in ZCML

layer: a marker interface for your particular theme
portlet: the interface of the portlet you wish to customize
template: location of the template you wish to override
class: your custom class (use this if you don't specify a template) for rendering the portlet

2.2. Moving, Removing or Hiding a Portlet

Some tips on moving or hiding portlets.

Whether or not portlets appear on your site is highly customizable through the web, you can use the manage portlets link in most contexts. For more information:

http://plone.org/documentation/tutorial/where-is-what/portlets-1/

It's assumed that you wouldn't want to fix portlets on a page (otherwise they'd probably be viewlets). However, if you wish to set up an initial assignment of portlets on installation of your theme product, use

[your theme package]/profiles/default/portlets.xml.

Here's an extract from the Plone Default portlets.xml, setting up the login and navigation portlet for the left-hand column, and the review and news portlets for the right-hand column.

<?xml version="1.0"?>
<portlets
    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
    i18n:domain="plone">

 
 <!-- Assign the standard portlets -->
 
 <assignment
     manager="plone.leftcolumn"
     category="context"
     key="/"
     type="portlets.Navigation"
     name="navigation"
     />
 
 <assignment
     manager="plone.leftcolumn"
     category="context"
     key="/"
     type="portlets.Login"
     name="login"
     />
     
  <assignment
     manager="plone.rightcolumn"
     category="context"
     key="/"
     type="portlets.Review"
     name="review"
     />

 <assignment
     manager="plone.rightcolumn"
     category="context"
     key="/"
     type="portlets.News"
     name="news"
     />
     
 
</portlets>

The attributes for the assignment directive are described in full here: http://plone.org/products/plone/roadmap/203/. In brief:

manager and type: The names for these can be looked up in plone.app.portlets.portlets.configure.zcml (for type of portlet) or in the Plone Default profiles/default/portlets.xml file.
category: This can be one of four values "context", "content_type", "group" or "user" - depending on where you wish to assign your portlets.
key: This will depend on the value given in category above. In the case of "context", the location in the site is indicated (the examples above specify the site root).

If you wish to configure the portlet in more detail, you can nest property directives within the assignment directive. Here's a tweak to ensure the navigation portlet appears at the root of the site:

<assignment name="navigation" category="context" key="/"
    manager="plone.leftcolumn" type="portlets.Navigation">
     <property name="topLevel">0</property>
 </assignment>

2.3. Overriding a Portlet

A quick cheat sheet of how to override or customize a portlet.

Through the Web

Use Site Setup > Zope Management Interfaces > portal_view_customizations to customize the template of an existing Plone Default portlet.

In your own product

There is a detailed tutorial available here:

http://plone.org/documentation/how-to/override-the-portlets-in-plone-3.0/

You can also look up the details of the portlet you want to override in the Elements section of this manual.

Quick Cheat Sheet

You will need to know the name of

Your theme-specific interface: This is optional but ensures that your portlet is only available for your theme. If you used the plone3_theme paster template, then the name will probably be IThemeSpecific.

You will need to create the following (you should be able to locate the originals to copy by looking them up in the Elements section):

plone portlet renderer directive: [your theme package]/browser/configure.zcml
page template: [your theme package]/browser/[your template name].pt
Python class *: [your theme package]/browser/[your module name].py

* in most cases you won't need a Python class

Sample configuration.zcml directive

<configure 
    xmlns:plone="http://namespaces.plone.org/plone">
    <include package="plone.app.portlets"  />
    <plone:portletRenderer
       portlet="[element interface]"
       template="[your template name].pt"
      (or class=".[your module].[your class name]")
      layer="[your theme specific interface]"
     />
</configure>

Sample Python class for navigation portlet override

If you want to customize the navigation portlet, you may need to supply the class as well as the template. Two templates are involved: the first is the usual display template; the second handles the recursion through the navigation tree. If you need to make your own version of the second, then you'll need to assign it to the recurse method in the class.

from plone.app.portlets.portlets.navigation import Renderer
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

class [your class name](Renderer):
    _template = ViewPageTemplateFile([your template name].pt)  
    recurse = ViewPageTemplateFile([your recurse template name])

2.4. Override the portlets in Plone 3.0

Customizing the portlets is a regular task, working with Plone theme. In this how-to we will find out how-to do this in Plone 3.0 with it's new mechanism for managing portlets (contributed by Denys Mishunov)

Purpose

It was pretty easy to customize one of the standard portlet in times of Plone versions prior 3.0. You just had to copy a page template for appropriate portlet to your theme product and do whatever you want, changing it's XHTML. You could also create a new portlet the same easy way - just create a template for the new portlet and register this portlet with your site's Properties.

In Plone 3.0 portlets became slightly more complex. But don't be afraid. They became much more powerful at the same time! The advantage becomes obvious now, right? ;) They are served from separate python package and have really flexible management possibilities. So, it's worth to try this new mechanism to realize how powerful it is.

Prerequisities

First thing we should mention - this is not about TTW (Through The Web) customization. If you need a fast and dirty trick, have a look at portal_view_customizations tool. This how-to assumes you want to have your changes in a repeatable way, so that you could have the same changes on any site where you install your product.

Another thing you might consider is worth a mentioning - you don't need this technique in any case you want to customize a portlet in Plone 3.0. If you have hardly customized portlets used in previous versions of Plone or you want to continue using portlets in "pre-3.0-era-way" (that we strongly don't recommend) you might need to have a look at ClassicPortlet that is shipped with Plone 3.0. It deals with the regular page templates the same way you have worked with portlets before Plone 3.0.

And the last before we move on. If you want to customize any of the standard portlets removing all back-end logic from it (making a static portlet), don't do this. We mean that - don't do this. Wise people thought about you. Better install plone.portlet.static and play with it, creating the static portlets when you need it.

So, for all those who are still with us... we move on finally.

We assume you have created MyTheme Plone 3 theme with either DIYPloneStyle or ZopeSkel generators. We do not cover explanations of all aspects of creating a theme for Plone 3.0. To find out more about core ideas of making a theme, managing the viewlets in Plone 3.0 and many more, check an excellent tutorial by David Convent - Customizing the viewlets in main_template.

The key concept in working with portlets in Plone 3.0 is the use of Zope 3 skin layer - the same as we have when overriding a viewlet. We assume you have at least the following minimum set of files in MyTheme/browser folder:

- browser/
    - __init__.py
    - configure.zcml
    - interfaces.py

In common, portlets' overriding process looks like this:

choose the portlet you want to override;
register a skin layer if you don't have one yet in interfaces.py;
add the special <plone:portletRenderer/> directive to MyTheme/browser/configure.zcml;
define portlet attribute for <plone:portletRenderer /> directive. This is a portlet data provider type for which this override is used. This can be either class or interface. For example plone.app.portlets.portlets.navigation.INewsPortlet;
define a new template attribute for <plone:portletRenderer /> directive. When you add this the default renderer for portlet you are overriding will be used, but with your template;
in case you need to customize the default behavior for the portlet, you should use class attribute instead of simple template. This new class will be acting as the renderer for the portlet instead of the default one;
define layer attribute for <plone:portletRenderer /> directive with MyTheme browser layer. The layer attribute of the portletRenderer attribute associates a particular IPortletRenderer with a particular browser layer (MyTheme layer in our case). When our layer is in effect (i.e. MyTheme is installed) the new renderer will be used instead of the default one;
add a new template to MyTheme/browser that will implement the renderer;
restart Zope and enjoy.

Step by step

1. Choose the portlet

First of all we should decide what portlet we would like to customize. Let's choose the News portlet. If you will have a look at the standard news portlet, you will see those news_icon images in-front of the titles. Let's get rid of them in the XHTML just for the test.

Plone default portlets are declared in the plone.app.portlets.portlets package. The core Plone 3.0 portlets can be found in $INSTANCE_HOME/lib/python/plone/app/portlets/portlets/. It might be located somewhere else in the $PYTHONPATH though. Depending on the zope installation (win32 or unix like operating system, installation from source, installer, eggs or elseâ¦), you may need to use the search tools available in your operating system to locate the package.

plone.app.portlets.portlets package contains python modules, page templates and ZCML configuration file - configure.zcml. This file contains a set of <plone:portlet /> directives that define the standard portlets like this:

<plone:portlet
    name="portlets.News"
    interface=".news.INewsPortlet"
    assignment=".news.Assignment"
    renderer=".news.Renderer"
    addview=".news.AddForm"
    editview=".news.EditForm"
    />

Attributes in the above code are pretty self-explanatory. But if they are not clear to you or you want to know more about additional attributes for <plone:portlet />, have a look at IPortletDirective interface in metadirectives module inside the plone.app.portlets package.

2. Register a skin layer if you don't have one yet

We can register an override for a portlet only for one theme (one skin selection) thanks to the plone.theme package. Thanks to plone.theme, we can set a Zope 3 skin layer that corresponds to a particular skin selection in portal_skins (a theme).

Add the following code to MyTheme/browser/interfaces.py if you don't have it yet:

from plone.theme.interfaces import IDefaultPloneLayer

class IThemeSpecific(IDefaultPloneLayer):
    """Marker interface that defines a Zope 3 skin layer bound to a Skin
       Selection in portal_skins.
    """

3. Add the directive to configure.zcml with appropriate attributes

Along with <plone:portlet /> directive, plone.app.portlets package defines another one - <plone:portletRenderer />. The last one is used to override the portlets, defined in your site. It has quite a few possible attributes that can be found in metadirectives module inside the plone.app.portlets package. We will not list them all here, so just spend 5 minutes and have a look at those attributes, so that you could understand the following code...

... 5 minutes later...

Ok, let's get back to work. So, to override the standard News portlet for MyTheme product we should add <plone:portletRenderer /> directive to MyTheme/browser/configure.zcml. Let's have a look how this should look like (be sure you have xmlns:plone="http://namespaces.plone.org/plone" namespace defined in your <configure> top node.):

<include package="plone.app.portlets" />

<interface
   interface=".interfaces.IThemeSpecific"
   type="zope.publisher.interfaces.browser.IBrowserSkinType"
   name="My Theme"
   />

<plone:portletRenderer
   portlet="plone.app.portlets.portlets.news.INewsPortlet"
   template="mytheme_news.pt"
   layer=".interfaces.IThemeSpecific"
   />

First of all we include plone.app.portlets package to be sure that default portlets are enabled before we override anything.

Then we make browser layer interface for MyTheme, defined in MyTheme/browser/interfaces.py, available. If you have customized any viewlet you should already have this in configure.zcml so no need to add it twice in the same theme.

Next, let's sort out what attributes we use here:

portlet - define the portlet that we are going to override. In our case we define the full dotted path to INewsPortlet interface, that is implemented by news portlet;
template - the name of a template that implements the renderer. The default renderer for this news portlet will be used, but with "mytheme_news.pt template instead of the default one.
layer - our browser layer for which this renderer is used.
one more attribute you might need to remember here is class. You will need to use it in case you want to change the default behavior of the portlet. This attribute will define the class that will be used as a renderer for this portlet instead of the default one.

That's it with configure.zcml. Let's move on.

4. Add a new template for portlet's renderer

So, in previous part we have defined mytheme_news.pt as a value for template attribute. But we don't have that template on file-system. Let's add it to MyTheme/browser/. Just copy news.pt template for news portlet from plone.app.portlets.portlets to MyTheme/browser/ and rename it to mytheme_news.pt. Open this template in your favorite editor and let's play with it a little bit.

As you remember we should get rid of standard news_icon.gif icons we get for news items by default. Find the following line in your template:

<img tal:replace="structure item_icon/html_tag" />

and comment it out so that we do not un-recoverable steps and could revert our changes later. So, we get:

<!-- <img tal:replace="structure item_icon/html_tag" /> -->

That's all folks!

So, that's it. Restart your Zope and have a look at your news items portlet - no images! Cool! Yeah! Actually not that cool just to remove the images, that might be useful for community portals :)

What's next?

This example is really simple and not pretty useful for sure. But you definitely can do much better customizations now. When using class attribute in <plone:portletRenderer/> directive you can do portlets that will really differ from default one. And that's where the beauty of portlets in Plone 3.0 goes - you will not need to put a load of python to your page templates as you had to do before. All python will be exactly where it should be - in python class. And template will just get the results from different python methods within that class.

Enjoy!

3. Viewlet Manager

How to move or hide viewlet managers and how to create a new one.

3.1. Anatomy of a Viewlet Manager

The bits that go to make up a Viewlet Manager.

Directive in ZCML

<browser:viewletManager />

Attributes in ZCML

name: e.g., [your namespace].[your viewlet manager name]
provides: a marker interface defining what this manager does
layer: a marker interface for your particular theme
class: this will be plone.app.viewletmanager.manager.OrderedViewletManager
permission: in most cases this will be Zope.Public
for: specify an interface marking a group of content types, if you wish. The viewlet manager will then be restricted to those content types
view: specify an interface marking a view, if you wish. The viewlet manager will be restricted to items with those views.

3.2. Moving, Removing or Hiding a Viewlet Manager

Some hints on moving or hiding viewlet managers.

Viewlet managers are called by page templates. Moving or removing them is simply a case of customizing the template. Most are called by the main_template, but you may also need to look into specific content views for some of them.

Quick Cheat Sheet

Through the Web

Site Setup > Zope Management Interface > portal_skins > plone_templates or plone_content

Click the Customize button, and look for

<div tal:replace="structure provider:[viewlet manager name]" />

(use the Elements key to identify exactly which manager you're interested in)

In your own product

Put your own version of main_template or of the content views in

[your theme package]/skins.

3.3. Creating a New Viewlet Manager

A quick cheat sheet for creating a new viewlet manager.

Through the Web

You cannot create a new viewlet manager through the web. To override the order in which viewlets appear in a viewlet manager, use the instructions for viewlets.

In your own product

If you're basing your new viewlet manager on a Plone Default viewlet manager, look up the details in the Elements section of this manual.

You will need to know the name of

Your theme specific interface: This is optional, but ensures that your viewlet is only available for your theme. If you used the plone3_theme paster template, then the name will probably be IThemeSpecific.

You will need to create the following (you should be able to locate the originals to copy by looking them up in the elements section):

browser viewletManager directive: [your theme package]/browser/configure.zcml
Your viewlet manager interface: [your theme package]/browser/interfaces.py
configuration file directives: [your theme package]/profiles/default/viewlets.xml

Sample Interface

from zope.viewlet.interfaces import IViewletManager

class [your viewlet manager interface](IViewletManager):
    """ [A description of your viewlet manager goes here]  """

Sample configure.zcml directive

<browser:viewletManager
 name=[your namespace].[your element name]"
 provides=".interfaces.[your viewlet manager interface]"
 class="plone.app.viewletmanager.manager.OrderedViewletManager"
 layer="[your theme interface]"
 permission="zope2.View"
 />

4. Portlet Manager

Tips on moving and hiding portlet managers. Cheat Sheet for creating a new portlet manager.

4.1. Moving or Removing a Portlet Manager

Tips on how to move or remove portlet managers.

Portlet managers are called by main_template. Moving or removing them is simply a case of customizing the template.

Through the Web

Site Setup > Zope Management Interface > portal_skins > plone_templates > main_template

Customize this, and look for

<div tal:replace="structure provider:[portlet manager name]" />

(use the Elements key to identify exactly which manager you're interested in)

In your own product

Put your own version of main_template in

[your theme product]/skins.

4.2. Hiding a Portlet Manager

There are several methods for hiding a portlet manager.

A portlet manager won't display if there are no portlets assigned to it to display or if the assigned portlets have no data.

In the case of the portlet columns, if the portlet manager is empty, then it is also useful to have the surrounding block elements disappear too, so that you don't get a wide blank margin on your page. For this reason, the columns containing the portlet managers in the main_template are wrapped around with slots. Hiding the portlet managers is, therefore, a matter or manipulating these slots. There are various techniques:

Defining an empty slot

Use the following in a content view template to ensure that the right hand column is removed:

<metal:column_one fill-slot="column_one_slot" />

Using the sl and sr global variables

These are set as conditions on the slots; they check the respective portlet managers for content and, if they are empty, evaluate to false. You can override these in the template itself.

Using show_portlets option

show_portlets=false can be passed as an option to a template to set both sl and sr to false. To see this in action, have a look at

CMFPlone/skins/plone_templates/standard_error_message.py and
CMFPlone/browser/ploneview.py

4.3. Creating a New Portlet Manager

How to create a new portlet manager.

A practical example of creating a new portlet manager can be found here

http://plone.org/documentation/how-to/adding-portlet-managers

Here's a quick checklist of what you need to do.

Quick Cheat Sheet

Through the Web

You cannot create a new portlet manager through the web.

In your own product

You will need to provide the name of

Your theme-specific interface: This is optional but ensures that your portlet manager is available for your theme only. If you used the plone3_theme paster template, then the name will probably be IThemeSpecific.

You will need to create the following (you should be able to locate the originals to copy by looking them up in the elements section):

Interface: This will go in [your theme package]/browser/interfaces.py. You can give it any name you like, but by convention, it should be prefaced with "I".
configuration directive: [your theme package]/profiles/default/portlets.xml
browser:page directive (for the management view): [your theme package]/browser/configure.zcml
page template (for the management view): [your theme package]/browser/[your template].pt

Sample interface

from plone.portlets.interfaces import IPortletManager

class [your portlet manager interface](IPortletManager):
 """A description goes here    """

Sample portlets.xml

<?xml version="1.0"?>
<portlets>
 <portletmanager
    name="[your namespace].[your portlet manager]"
    type="[your namespace].[your theme name].browser.interfaces.[your portlet manager interface]"
 />
</portlets>

Sample configure.zcml directive (for the management view)

<browser:page
 for="plone.portlets.interfaces.ILocalPortletAssignable"
 class="plone.app.portlets.browser.manage.ManageContextualPortlets"
 name="[your view name]"
 template="[your template name].pt"
 permission="plone.app.portlets.ManagePortlets"
/>

4.4. Practical

Practical

4.4.1. Adding Portlet Managers

You need portlets at an additional place in your Plone. In this example we put contextual portlets above the content (contributed by Jens Klein)

This is about adding Portlet MANAGERS, hint: PortletManager != Portlet. A PortletManager is a kind of container for the portlets, like the ViewletManager is for Viewlets. So, after reducing the momentum of misunderstanding, lets start:

Prerequsites

I assume you're familar with GenericSetup based setups for Plone 3. Take a look at DIYPloneStyle and related tutorials if not.

You need Plone 3 installed and a Product NEWTHEME for your own skin (based on DIYPloneStyle works fine).

Strategy

In my example I don't want to customize the main-template. So the idea is to add a viewlet to the plone.app.layout.viewlets.interfaces.IContentViews viewletmanager. So the steps need to be done is

Add a viewlet to the viewlet-manager
Add a portlet-manager
Add a management view for the portlet-manager.

Step One: Add a viewlet

in Products.NEWTHEME add a file abovecontentportlets.pt containing:

<tal:block replace="structure provider:my.abovecontentportlets" />

Here we call the portlet manager, we create it in step two.
But first lets register our new viewlet for the viewletmanager.
Edit your Products/NEWTHEME/configure.zcml and add:

<browser:viewlet
    name="my.abovecontentportlets"
    manager="plone.app.layout.viewlets.interfaces.IContentViews"
    template="abovecontentportlets.pt"
    permission="zope2.View" 
/>

Step Two: Add a portlet manager

Create a marking interface for the manager and add or edit Products/NEWTHEME/interfaces.py

from plone.portlets.interfaces import IPortletManager

class IMyAboveContent(IPortletManager):
    """we need our own portlet manager above the content area.
    """

Add (or edit) your Products/NEWTHEME/profiles/default/portlets.xml and register a portlet manager:

<?xml version="1.0"?>
<portlets> 
 <portletmanager 
   name="my.abovecontentportlets"
   type="Products.NEWTHEME.interfaces.IMyAboveContent"
 />
</portlets>

Thats all you need if you don't want to manage the portlets through the web. Oh, you want to? So you need a third step:

Step Three: Add a management view for the portlet manager

The management view is rendered for the left and right slots directly on the main-template. But we use a viewlet and in here we have a different view. so we need to call explicitly our view and call the our manager within its context.

We need to register a new browser view for an own page template directly calling our manager. Again add some lines to your configure.zcml:

<browser:page
    for="plone.portlets.interfaces.ILocalPortletAssignable"
    class="plone.app.portlets.browser.manage.ManageContextualPortlets"
    name="manage-myabove"
    template="templates/managemyabove.pt"
    permission="plone.app.portlets.ManagePortlets"
/>

And finally we need the template, so add an file managemyabove.pt and edit it:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      metal:use-macro="context/main_template/macros/master"
      i18n:domain="plone">
<head>
    <div metal:fill-slot="javascript_head_slot" tal:omit-tag="">
        <link type="text/css" rel="kinetic-stylesheet"
            tal:attributes="href string:${context/absolute_url}/++resource++manage-portlets.kss"/>
    </div>
</head>
<body>
<div metal:fill-slot="main">
  <h1 class="documentFirstHeading">Manage My Portlets</h1>
  <span tal:replace="structure provider:my.abovecontentportlets" />
</div>
</body>
</html>

That's it. After restarting your zope you can call http://DOMAIN.TLD/plone/path/to/some/context/@@manage-myabove

and assign portlets over your content.

5. Page Elements Index - Plone Default and Classic Theme

A visual index of the main page elements.

At the moment, this index gives you only viewlets, but the intention is to expand it to include portlets and viewlet- and portlet- managers.

An alternative to using this index is to install GloWorm in your Plone instance. This is a visual inspector which will give you further information about aspects of the Plone Default theme directly through your browser, and enable you to make through-the-web customizations of viewlet templates.

Key	Title	HTML	Name Manager Type
	Skip Links	<p class="hiddenStructure"> â¦ </p>	plone.skip_links plone.portalheader viewlet
	HTML Head Title	<title> ...</title>	plone.htmlhead.title plone.htmlhead viewlet
	Next Previous Links	<link title="Go to previous item" â¦ />	plone.nextprevious.links plone.htmlhead.links viewlet
	Favicon Link	<link rel="shortcut icon" â¦ />	plone.links.favicon plone.htmlhead.links viewlet
	Search Link	<link rel="search" â¦ />	plone.links.search plone.htmlhead.links viewlet
	Author Link	<link rel="author" â¦ />	plone.links.author plone.htmlhead.links viewlet
	Navigation Link	<link title="Front Page" â¦> and <link title="Site Map" ..>	plone.links.navigation plone.htmlhead.links viewlet
	Analytics	(code snippet defined by the site manager)	plone.analytics plone.portalfooter viewlet
	Header	<div id="portal-header"> â¦ </div>	plone.header plone.portaltop viewlet
	Language Selector	<ul id="portal-languageselector"> â¦ </ul>	plone.app.i18n.locales.languageselector Portal Top viewlet
	Site Actions	<ul id="portal-siteactions">...</ul>	plone.site_actions plone.portalheader viewlet
	Search Box	<div id="portal-searchbox">â¦</div>	plone.searchbox plone.portalheader viewlet
	Logo	<a id="portal-logo" ...>... </a>	plone.logo plone.portalheader viewlet
	Global Sections	<h5 class="hiddenStructure">Sections</h5> <ul id="portal-globalnav"> â¦ </ul>	plone.global_sections plone.portalheader viewlet
	Personal Bar	<div id="portal-personaltools-wrapper"> â¦</div>	plone.personal_bar plone.portaltop viewlet
	Path Bar (Portal Breadcrumbs)	<div id="portal-breadcrumbs">...</div>	plone.path_bar plone.portaltop viewlet
	Content Views	<ul class="contentViews"> â¦ </ul>	plone.contentviews plone.contentviews viewlet
	Content Actions		plone.contentactions plone.contentviews viewlet
	Table of Contents	<dl id="document-toc" class="portlet toc" style="display: none"> â¦ </dl>	plone.tableofcontents plone.abovecontentbody viewlet
	Presentation	<p id="link-presentation">...</p>	plone.presentation plone.abovecontentbody viewlet
	Keywords	<div id="category" class="documentByLine">â¦</div>	plone.belowcontenttitle.keywords plone.belowcontenttitle viewlet
	Byline	<div id="plone-document-byline" class="documentByLine">... </div>	plone.belowcontenttitle.documentbyline plone.belowcontenttitle viewlet
	Lock	<div id="plone-lock-status" />	plone.lockinfo plone.abovecontent viewlet
	Document Actions	<div class="documentActions"> â¦ </div>	plone.abovecontenttitle.documentactions plone.belowcontentbody viewlet
	Comments	<div class="discussion"> â¦ </div>	plone.comments plone.belowcontent viewlet
	Content History	<div class="contentHistory" id="content-history">â¦</div>	plone.belowcontentbody.contenthistory plone.belowcontentbody viewlet
	Next Previous	<div class="listingBar">â¦</div>	plone.nextprevious plone.belowcontent viewlet
	Footer	<div id="portal-footer">â¦</div>	plone.footer plone.portalfooter viewlet
	Colophon	<div id="portal-colophon">â¦</div>	plone.colophon plone.portalfooter viewlet

6. Page Elements Index - Sunburst Theme - Plone 4

A visual index of the main page elements.

At the moment, this index gives you only viewlets, but the intention is to expand it to include portlets and viewlet- and portlet- managers.

Key	Title	HTML	Name Manager Type
	Skip Links	<p class="hiddenStructure"> â¦ </p>	plone.skip_links plone.portalheader viewlet
	HTML Head Title	<title> ...</title>	plone.htmlhead.title plone.htmlhead viewlet
	Dublin Core Metadata	<meta ... />	plone.htmlhead.dublincore plone.htmlhead viewlet
	KSS Base Url	<link rel="kss-base-url" ... />	plone.htmlhead.kss-base-url plone.htmlhead viewlet
	Next Previous Links	<link title="Go to previous item" â¦ />	plone.nextprevious.links plone.htmlhead.links viewlet
	Favicon Link	<link rel="shortcut icon" â¦ />	plone.links.favicon plone.htmlhead.links viewlet
	Search Link	<link rel="search" â¦ />	plone.links.search plone.htmlhead.links viewlet
	Author Link	<link rel="author" â¦ />	plone.links.author plone.htmlhead.links viewlet
	Navigation Link	<link title="Front Page" â¦> and <link title="Site Map" ..>	plone.links.navigation plone.htmlhead.links viewlet
	RSS Link	<link rel="alternate" title="RSS 1.0" .. />	plone.links.RSS plone.htmlhead.links viewlet
	Analytics	(code snippet defined by the site manager)	plone.analytics plone.portalfooter viewlet
	Header	<div id="portal-header"> â¦ </div>	plone.header plone.portaltop viewlet
	Language Selector	<ul id="portal-languageselector"> â¦ </ul>	plone.app.i18n.locales.languageselector Portal Top viewlet
	Site Actions	<ul id="portal-siteactions">...</ul>	plonetheme.sunburst.site_actions plone.portalfooter viewlet
	Search Box	<div id="portal-searchbox">â¦</div>	plone.searchbox plone.portalheader viewlet
	Logo	<a id="portal-logo" ...>... </a>	plone.logo plone.portalheader viewlet
	Global Sections	<h5 class="hiddenStructure">Sections</h5> <ul id="portal-globalnav"> â¦ </ul>	plone.global_sections plone.portalheader viewlet
	Personal Bar	<div id="portal-personaltools-wrapper"> â¦</div>	plonetheme.sunburst.personal_bar plone.portaltop viewlet
	Path Bar (Portal Breadcrumbs)	<div id="portal-breadcrumbs">...</div>	plone.path_bar plone.portaltop viewlet
	Content Views	<ul class="contentViews"> â¦ </ul>	plone.contentviews plone.contentviews viewlet
	Content Actions		plone.contentactions plone.contentviews viewlet
	Table of Contents	<dl id="document-toc" class="portlet toc" style="display: none"> â¦ </dl>	plone.tableofcontents plone.abovecontentbody viewlet
	Presentation	<p id="link-presentation">...</p>	plone.presentation plone.abovecontentbody viewlet
	Keywords	<div id="category" class="documentByLine">â¦</div>	plone.belowcontenttitle.keywords plone.belowcontenttitle viewlet
	Byline	<div id="plone-document-byline" class="documentByLine">... </div>	plone.belowcontenttitle.documentbyline plone.belowcontenttitle viewlet
	Lock	<div id="plone-lock-status" />	plone.lockinfo plone.abovecontent viewlet
	Document Actions	<div class="documentActions"> â¦ </div>	plone.abovecontenttitle.documentactions plone.belowcontentbody viewlet
	Related Items	<div class="relatedItems"> â¦ </div>	plone.belowcontentbody.relateditems plone.belowcontentbody viewlet
	Comments	<div class="discussion"> â¦ </div>	plone.comments plone.belowcontent viewlet
	Content History	<div class="contentHistory" id="content-history">â¦</div>	plone.belowcontentbody.contenthistory plone.belowcontentbody viewlet
	Next Previous	<div class="listingBar">â¦</div>	plone.nextprevious plone.belowcontent viewlet
	Footer	<div id="portal-footer">â¦</div>	plone.footer plone.portalfooter viewlet
	Colophon	<div id="portal-colophon">â¦</div>	plone.colophon plone.portalfooter viewlet

7. Structural Elements

Elements forming the underlying page structure (viewlet and portlet managers).

7.1. Header

Calls the viewlet managers for the site header.

Snippet:: <div id="portal-header"> â¦ </div>
Name:: plone.header
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.header

Customizing in your own product

The following details will help you locate the files that you will need to copy into your own product. They will also help you to provide the correct information to create your own zcml directives, Python classes, and interfaces.See viewlet for more information.

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

portal_header.pt

Class Name:

none

Manager:

plone.portaltop (name)
plone.app.layout.viewlets.interfaces.IPortalTop (interface)

Sample files & directives

Put a version of portal_header.pt in [your theme package]/browser/templates)

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalTop"
    template="templates/[your template name].pt"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portaltop" skinname="[your skin name]">
        <viewlet name="plone.header" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portaltop" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8. Hidden Elements

Hidden page elements (appearing in the HTMLhead or with css set to display:none).

8.1. Skip Links

Hidden links at the top of the page to skip to the content and the navigation.

Snippet:: <p class="hiddenStructure"> â¦ </p>
CSS:: invisibles.css
Name:: plone.skip_links
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.skip_links

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

skip_links.pt

Class Name:

plone.app.layout.viewlets.common.SkipLinksViewlet

Manager:

plone.portalheader (name)
plone.app.layout.viewlets.interfaces.IPortalHeader (interface)

Sample files & directives

Put a version of skip_links.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import SkipLinksViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](SkipLinksViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalheader" skinname="[your skin name]">
        <viewlet name="plone.skip_links" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalheader" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.2. HTML Head Title

The page title in the HTML head.

Snippet:: <title> ...</title>
CSS:: none
Name:: plone.htmlhead.title
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.htmlhead.title

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

none

Class Name:

plone.app.layout.viewlets.common.TitleViewlet

Manager:

plone.htmlhead (name)
plone.app.layout.viewlets.interfaces.IHtmlHead (interface)

Sample files & directives

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import TitleViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

class [your class name](TitleViewlet):
    [your code here]

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead" skinname="[your skin name]">
        <viewlet name="plone.htmlhead.title" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.3. Next Previous Links

Provides next/previous links in the HTML head.

Snippet:: <link title="Go to previous item" â¦ />
CSS:: none
Name:: plone.nextprevious.links
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.nextprevious.links

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/nextprevious/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/nextprevious/

Template Name:

links.pt

Class Name:

plone.app.layout.nextprevious.view.NextPreviousLinksViewlet

Manager:

plone.htmlhead.links (name)
plone.app.layout.viewlets.interfaces.IHtmlHeadLinks (interface)

Sample files & directives

Put a version of links.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.nextprevious.view import NextPreviousLinksViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](NextPreviousLinksViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead.links" skinname="[your skin name]">
        <viewlet name="plone.nextprevious.links" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead.links" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.4. Favicon Link

The favicon link in HTML head.

Snippet:: <link rel="shortcut icon" â¦ />
CSS:: none
Name:: plone.links.favicon
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.links.favicon

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/links/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/links/

Template Name:

favicon.pt

Class Name:

plone.app.layout.links.viewlets.FaviconViewlet

Manager:

plone.htmlhead.links (name)
plone.app.layout.viewlets.interfaces.IHtmlHeadLinks (interface)

Sample files & directives

Put a version of favicon.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.links.viewlets import FaviconViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](FaviconViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead.links" skinname="[your skin name]">
        <viewlet name="plone.links.favicon" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead.links" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.5. Search Link

The search link in HTML head.

Snippet:: <link rel="search" â¦ />
CSS:: none
Name:: plone.links.search
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.links.search

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/links/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/links/

Template Name:

search.pt

Class Name:

plone.app.layout.links.viewlets.SearchViewlet

Manager:

plone.htmlhead.links (name)
plone.app.layout.viewlets.interfaces.IHtmlHeadLinks (interface)

Sample files & directives

Put a version of search.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.links.viewlets import SearchViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](SearchViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead.links" skinname="[your skin name]">
        <viewlet name="plone.links.search" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead.links" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.6. Author Link

The author link in the HTML head.

Snippet:: <link rel="author" â¦ />
CSS:: none
Name:: plone.links.author
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.links.author

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/links/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/links/

Template Name:

author.pt

Class Name:

plone.app.layout.links.viewlets.AuthorViewlet

Manager:

plone.htmlhead.links (name)
plone.app.layout.viewlets.interfaces.IHtmlHeadLinks (interface)

Sample files & directives

Put a version of author.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.links.viewlets import AuthorViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](AuthorViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead.links" skinname="[your skin name]">
        <viewlet name="plone.links.author" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead.links" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.7. Navigation Link

The navigation link in the HTML head.

Snippet:: <link title="Front Page" â¦> and <link title="Site Map" ..>
CSS:: none
Name:: plone.links.navigation
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.links.navigation

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/links/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/links/

Template Name:

navigation.pt

Class Name:

plone.app.layout.links.viewlets.NavigationViewlet

Manager:

plone.htmlhead.links (name)
plone.app.layout.viewlets.interfaces.IHtmlHeadLinks (interface)

Sample files & directives

Put a version of navigation.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.links.viewlets import NavigationViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](NavigationViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead.links" skinname="[your skin name]">
        <viewlet name="plone.links.navigation" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead.links" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.8. Analytics

Google analytics code snippet.

Notes:: Provide the code snippet for your site through the web: Site Setup > Site settings
Snippet:: (code snippet defined by the site manager)
CSS:: none
Name:: plone.analytics
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.analytics

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/analytics/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/analytics/

Template Name:

none

Class Name:

plone.app.layout.analytics.view.AnalyticsViewlet

Manager:

plone.portalfooter (name)
plone.app.layout.viewlets.interfaces.IPortalFooter (interface)

Sample files & directives

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.analytics.view import AnalyticsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

class [your class name](AnalyticsViewlet):
    [your code here]

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalfooter" skinname="[your skin name]">
        <viewlet name="plone.analytics" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalfooter" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.9. Dublin Core Metadata

The Dublin Core metadata in the HTML head.

Snippet:: <meta .... />
CSS:: none
Name:: plone.htmlhead.dublincore
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.htmlhead.dublincore

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

dublin_core.pt

Class Name:

plone.app.layout.viewlets.common.DublinCoreViewlet

Manager:

plone.htmlhead (name)
plone.app.layout.viewlets.interfaces.IHtmlHead (interface)

Sample files & directives

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import DublinCoreViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

class [your class name](DublinCoreViewlet):
    [your code here]

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead" skinname="[your skin name]">
        <viewlet name="plone.htmlhead.dublincore" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.10. KSS Base Url

Link rel tag in the HTML head with the real url of the published page.

Snippet:: <link rel="kss-base-url" .... />
CSS:: none
Name:: plone.htmlhead.kss-base-url
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.htmlhead.kss-base-url

Customizing in your own product

Located in:

[your egg location]/plone/app/kss/
[your egg location]/plone.app.kss-[version].egg/plone/app/kss/

Template Name:

none

Class Name:

plone.app.kss.headerViewlet.KSSBaseUrlViewlet

Manager:

plone.htmlhead (name)
plone.app.layout.viewlets.interfaces.IHtmlHead (interface)

Sample files & directives

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.kss.headerViewlet import KSSBaseUrlViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

class [your class name](KSSBaseUrlViewlet):
    [your code here]

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead" skinname="[your skin name]">
        <viewlet name="plone.htmlhead.kss-base-url" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

8.11. RSS Link

The RSS link in the HTML head.

Snippet:: <link rel="alternate" title="RSS 1.0" ... />
CSS:: none
Name:: plone.links.RSS
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.links.RSS

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/links/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/links/

Template Name:

rsslink.pt

Class Name:

plone.app.layout.links.viewlets.RSSViewlet

Manager:

plone.htmlhead.links (name)
plone.app.layout.viewlets.interfaces.IHtmlHeadLinks (interface)

Sample files & directives

Put a version of navigation.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.links.viewlets import RSSViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](RSSViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.htmlhead.links" skinname="[your skin name]">
        <viewlet name="plone.links.RSS" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.htmlhead.links" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9. Visible Page Elements

Page elements visible on the page (logo, site actions, search box etc)

9.1. Language Selector

Provides a drop down list to select a different language.

Snippet:: <ul id="portal-languageselector"> â¦ </ul>
Name:: plone.app.i18n.locales.languageselector
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.app.i18n.locales.languageselector

Customizing in your own product

Located in:

[your egg location]/plone/app/i18n/locales/browser/
[your egg location]/plone.app.i18n-[version].egg/plone/app/i18n/locales/browser/

Template Name:

languageselector.pt

Class Name:

plone.app.i18n.locales.browser.selector.LanguageSelector

Manager:

Portal Top (name)
plone.app.layout.viewlets.interfaces.IPortalTop (interface)

Sample files & directives

Put a version of languageselector.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.i18n.locales.browser.selector import LanguageSelector
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](LanguageSelector):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalTop"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="Portal Top" skinname="[your skin name]">
        <viewlet name="plone.app.i18n.locales.languageselector" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="Portal Top" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.2. Site Actions

Links, available on every page, to provide specific functionality or information.

Notes:

You can reorder, add, or remove individual site actions

through the web: Site Setup >Zope Management Interface > portal_actions > site_actions
in your product: profiles/default/actions.xml

Snippet:

<ul id="portal-siteactions">...</ul>

CSS:

public.css

Name:

plone.site_actions

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.site_actions

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

site_actions.pt

Class Name:

plone.app.layout.viewlets.common.SiteActionsViewlet

Manager:

plone.portalheader (name)
plone.app.layout.viewlets.interfaces.IPortalHeader (interface)

Sample files & directives

Put a version of site_actions.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import SiteActionsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](SiteActionsViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalheader" skinname="[your skin name]">
        <viewlet name="plone.site_actions" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalheader" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.3. Search Box

Site search facility.

Notes:

To customise the search box behaviour

through the web: Site Setup > Search
in your product: profiles/default/propertiestool.xml

Snippet:

<div id="portal-searchbox">â¦</div>

CSS:

public.css

Name:

plone.searchbox

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.searchbox
Further information:: http://plone.org/documentation/kb/the-search-box

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

searchbox.pt

Class Name:

plone.app.layout.viewlets.common.SearchBoxViewlet

Manager:

plone.portalheader (name)
plone.app.layout.viewlets.interfaces.IPortalHeader (interface)

Sample files & directives

Put a version of searchbox.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import SearchBoxViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](SearchBoxViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalheader" skinname="[your skin name]">
        <viewlet name="plone.searchbox" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalheader" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.4. Logo

The site logo.

Snippet:: <a id="portal-logo" ...>... </a>
CSS:: public.css
Name:: plone.logo
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.logo
Further information:: http://plone.org/documentation/kb/where-is-what/the-logo
See also the Quick Start Section of this manual.

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

logo.pt

Class Name:

plone.app.layout.viewlets.common.LogoViewlet

Manager:

plone.portalheader (name)
plone.app.layout.viewlets.interfaces.IPortalHeader (interface)

Sample files & directives

Put a version of logo.pt in [your theme package]/browser/templates)

Modify the logo.pt to suit your needs. For example, if you want to use an image named something other than logo.jpg, you could use this code and style #header in your mytheme.css file.

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <!-- <img src="logo.jpg" alt=""
         tal:replace="structure view/logo_tag" /> --> <!--commenting out the code that normally looks for logo.jpg -->
    <div id="banner"><!-- style this div in your mytheme.css --></div></a>

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import LogoViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](LogoViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalheader" skinname="[your skin name]">
        <viewlet name="plone.logo" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalheader" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.5. Global Sections

The top level sections of the site.

Notes:

The sections are either auto-generated from top level content items or can be set up manually

through the web: Site Setup > Navigation (for auto-generation)
Site Setup > Zope Management Interface > portal_tabs (for manually defined sections)
in your product: profiles/default/actions.xml and propertiestool.xml

Snippet:

<h5 class="hiddenStructure">Sections</h5> <ul id="portal-globalnav"> â¦ </ul>

CSS:

public.css

Name:

plone.global_sections

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.global_sections
Further information:: http://plone.org/documentation/kb/where-is-what/the-navigation-tabs

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

sections.pt

Class Name:

plone.app.layout.viewlets.common.GlobalSectionsViewlet

Manager:

plone.portalheader (name)
plone.app.layout.viewlets.interfaces.IPortalHeader (interface)

Sample files & directives

Put a version of sections.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import GlobalSectionsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](GlobalSectionsViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalheader" skinname="[your skin name]">
        <viewlet name="plone.global_sections" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalheader" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.6. Personal Bar

Provides the Log in link and further links for users once logged in.

Notes:

You can reorder, add, or remove specific links in the personal bar

through the web: Site Setup >Zope Management Interface > portal_actions > user
In your product: profiles/default/actions.xml

Snippet:

<div id="portal-personaltools-wrapper"> â¦</div>

CSS:

public.css

Name:

plone.personal_bar

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.personal_bar
Further information:: http://plone.org/documentation/kb/where-is-what/the-personal-bar

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

personal_bar.pt

Class Name:

plone.app.layout.viewlets.common.PersonalBarViewlet

Manager:

plone.portaltop (name)
plone.app.layout.viewlets.interfaces.IPortalTop (interface)

Sample files & directives

Put a version of personal_bar.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import PersonalBarViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](PersonalBarViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalTop"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portaltop" skinname="[your skin name]">
        <viewlet name="plone.personal_bar" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portaltop" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.7. Path Bar (Portal Breadcrumbs)

Provides the breadcrumb trail.

Snippet:: <div id="portal-breadcrumbs">...</div>
Note:: In the Sunburst theme, the breadcrumbs have been styled not to appear until the third level down. Customize the CSS to change this behaviour.
CSS:: public.css
Name:: plone.path_bar
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.path_bar
Further information:: http://plone.org/documentation/kb/where-is-what/the-path-bar

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

path_bar.pt

Class Name:

plone.app.layout.viewlets.common.PathBarViewlet

Manager:

plone.portaltop (name)
plone.app.layout.viewlets.interfaces.IPortalTop (interface)

Sample files & directives

Put a version of path_bar.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import PathBarViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](PathBarViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalTop"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portaltop" skinname="[your skin name]">
        <viewlet name="plone.path_bar" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portaltop" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.8. Content Views

The View, Edit, and other tabs in the editing interface.

Snippet:: <ul class="contentViews"> â¦ </ul>
CSS:: authoring.css
Name:: plone.contentviews
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.contentviews

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

contentviews.pt

Class Name:

none

Manager:

plone.contentviews (name)
plone.app.layout.viewlets.interfaces.IContentViews (interface)

Sample files & directives

Put a version of contentviews.pt in [your theme package]/browser/templates)

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IContentViews"
    template="templates/[your template name].pt"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.contentviews" skinname="[your skin name]">
        <viewlet name="plone.contentviews" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.contentviews" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.9. Content Actions

Provides the display drop-down and other actions in editing mode. There are three content actions components, registered for different view interfaces (as different sets of actions are required in different contexts).

Name:: plone.contentactions
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.contentactions

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

contentactions_blank.pt & contentactions.pt

Class Name:

plone.app.layout.viewlets.common.ContentActionsViewlet

Manager:

plone.contentviews (name)
plone.app.layout.viewlets.interfaces.IContentViews (interface)

Sample files & directives

Put a version of contentactions_blank.pt & contentactions.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import ContentActionsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](ContentActionsViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IContentViews"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.contentviews" skinname="[your skin name]">
        <viewlet name="plone.contentactions" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.contentviews" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.10. Table of Contents

Provides a set of bookmarks for the current page.

Notes:: Turned on per content item through Edit > Settings.
Snippet:: <dl id="document-toc" class="portlet toc" style="display: none"> â¦ </dl>
CSS:: portlets.css
Name:: plone.tableofcontents
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.tableofcontents

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

toc.pt

Class Name:

plone.app.layout.viewlets.common.TableOfContentsViewlet

Manager:

plone.abovecontentbody (name)
plone.app.layout.viewlets.interfaces.IAboveContentBody (interface)

Sample files & directives

Put a version of toc.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.common import TableOfContentsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](TableOfContentsViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IAboveContentBody"
    class=".[your module].[your class name]"
    for="Products.ATContentTypes.interface.IATDocument"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.abovecontentbody" skinname="[your skin name]">
        <viewlet name="plone.tableofcontents" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.abovecontentbody" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.11. Presentation

Provides a link to a presentation view of a document.

Notes:

Only available for a document. The link to a presentation view can be turned on or off

through the web: on an individual item (Edit > Settings > Presentation )
or Site Setup > Types (site-wide per type)
in your product: profiles/default/types (per type)

Snippet:

<p id="link-presentation">...</p>

CSS:

none

Name:

plone.presentation

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.presentation

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/presentation/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/presentation/

Template Name:

none

Class Name:

plone.app.presentation.PresentationViewlet

Manager:

plone.abovecontentbody (name)
plone.app.layout.viewlets.interfaces.IAboveContentBody (interface)

Sample files & directives

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.presentation import PresentationViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

class [your class name](PresentationViewlet):
    [your code here]

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IAboveContentBody"
    class=".[your module].[your class name]"
    for="Products.ATContentTypes.interface.IATDocument"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.abovecontentbody" skinname="[your skin name]">
        <viewlet name="plone.presentation" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.abovecontentbody" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.12. Keywords

The categories (a.k.a. keywords / tags / labels) that have been assigned to the item.

Notes:: This will only appear if some categories have been assigned using Edit > Categories.
Snippet:: <div id="category" class="documentByLine">â¦</div>
CSS:: public.css
Name:: plone.belowcontenttitle.keywords
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.belowcontenttitle.keywords

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

keywords.pt

Class Name:

none

Manager:

plone.belowcontenttitle (name)
plone.app.layout.viewlets.interfaces.IBelowContentTitle (interface)

Sample files & directives

Put a version of keywords.pt in [your theme package]/browser/templates)

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContentTitle"
    template="templates/[your template name].pt"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontenttitle" skinname="[your skin name]">
        <viewlet name="plone.belowcontenttitle.keywords" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontenttitle" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.13. Byline

The 'about' information (who created a content item and when it was modified).

Notes:

You can turn off the Byline for anonymous viewers

through the web: Site Setup > Security
In your product: profiles/default/propertiestool.xml

Snippet:

<div id="plone-document-byline" class="documentByLine">... </div>

CSS:

public.css

Name:

plone.belowcontenttitle.documentbyline

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.belowcontenttitle.documentbyline

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

document_byline.pt

Class Name:

plone.app.layout.viewlets.content.DocumentBylineViewlet

Manager:

plone.belowcontenttitle (name)
plone.app.layout.viewlets.interfaces.IBelowContentTitle (interface)

Sample files & directives

Put a version of document_byline.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.content import DocumentBylineViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](DocumentBylineViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContentTitle"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontenttitle" skinname="[your skin name]">
        <viewlet name="plone.belowcontenttitle.documentbyline" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontenttitle" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.14. Lock

Indicates that the content item is locked for editing.

Snippet:: <div id="plone-lock-status" />
CSS:: public.css
Name:: plone.lockinfo
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.lockinfo

Customizing in your own product

Located in:

[your egg location]/plone/locking/browser/
[your egg location]/plone.locking-[version].egg/plone/locking/browser/

Template Name:

info.pt

Class Name:

plone.locking.browser.info.LockInfoViewlet

Manager:

plone.abovecontent (name)
plone.app.layout.viewlets.interfaces.IAboveContent (interface)

Sample files & directives

Put a version of info.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.locking.browser.info import LockInfoViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](LockInfoViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IAboveContent"
    class=".[your module].[your class name]"
    for="plone.locking.interfaces.ITTWLockable"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.abovecontent" skinname="[your skin name]">
        <viewlet name="plone.lockinfo" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.abovecontent" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.15. Workflow History

Summarizes workflow transitions on the current content item.

Snippet:: <div class="reviewHistory" id="review-history">â¦</div>
CSS:: authoring.css
Name:: plone.belowcontentbody.workflowhistory
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.belowcontentbody.workflowhistory

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

review_history.pt

Class Name:

plone.app.layout.viewlets.content.WorkflowHistoryViewlet

Manager:

plone.belowcontentbody (name)
plone.app.layout.viewlets.interfaces.IBelowContentBody (interface)

Sample files & directives

Put a version of review_history.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.content import WorkflowHistoryViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](WorkflowHistoryViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContentBody"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontentbody" skinname="[your skin name]">
        <viewlet name="plone.belowcontentbody.workflowhistory" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontentbody" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.16. Content History

Summarizes workflow transitions and version history on the current content item (this replaces the workflow viewlet in Plone 3.3).

Snippet:: <div class="contentHistory" id="content-history">â¦</div>
CSS:: authoring.css
Name:: plone.belowcontentbody.contenthistory
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.belowcontentbody.contenthistory

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

content_history.pt

Class Name:

plone.app.layout.viewlets.content.ContentHistoryViewlet

Manager:

plone.belowcontentbody (name)
plone.app.layout.viewlets.interfaces.IBelowContentBody (interface)

Sample files & directives

Put a version of review_history.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.content import ContentHistoryViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](ContentHistoryViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContentBody"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontentbody" skinname="[your skin name]">
        <viewlet name="plone.belowcontentbody.contenthistory" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontentbody" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.17. Document Actions

The Print and RSS links.

Notes:

You can reorder, add, or remove individual document actions

through the web: Site Setup >Zope Management Interface > portal_actions > document_actions
In your product: profiles/default/actions.xml

Snippet:

<div class="documentActions"> â¦ </div>

CSS:

public.css

Name:

plone.abovecontenttitle.documentactions

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.abovecontenttitle.documentactions
Further information:: http://plone.org/documentation/kb/where-is-what/document-actions

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

document_actions.pt

Class Name:

plone.app.layout.viewlets.content.DocumentActionsViewlet

Manager:

plone.belowcontentbody (name)
plone.app.layout.viewlets.interfaces.IBelowContentBody (interface)

Sample files & directives

Put a version of document_actions.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.content import DocumentActionsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](DocumentActionsViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContentBody"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontentbody" skinname="[your skin name]">
        <viewlet name="plone.abovecontenttitle.documentactions" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontentbody" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.18. Related Items

Items related to the content

Notes:: This viewlet displays links to additional content items selected by the editor under the categorization tab.
Snippet:: <div class="relatedItems"> â¦ </div>
CSS:: public.css
Name:: plone.belowcontentbody.relateditems
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.belowcontentbody.relateditems

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

document_relateditems.pt

Class Name:

plone.app.layout.viewlets.content.ContentRelatedItems

Manager:

plone.belowcontentbody (name)
plone.app.layout.viewlets.interfaces.IBelowContentBody (interface)

Sample files & directives

Put a version of document_relateditems.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.content import ContentRelatedItems
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](ContentRelatedItems):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContentBody"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontentbody" skinname="[your skin name]">
        <viewlet name="plone.belowcontentbody.relateditems" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontentbody" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.19. Comments

Supplies the commenting interface.

Notes:

Comments can be turned on or off

through the web: on an individual item (Edit > Settings > Allow Comments )
or Site Setup > Types (site-wide per type)
in your product: profiles/default/types (per type)

Snippet:

<div class="discussion"> â¦ </div>

CSS:

public.css

Name:

plone.comments

Type:

viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.comments

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

comments.pt

Class Name:

plone.app.layout.viewlets.comments.CommentsViewlet

Manager:

plone.belowcontent (name)
plone.app.layout.viewlets.interfaces.IBelowContent (interface)

Sample files & directives

Put a version of comments.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.viewlets.comments import CommentsViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](CommentsViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContent"
    class=".[your module].[your class name]"
    for="Products.CMFCore.interfaces.IContentish"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontent" skinname="[your skin name]">
        <viewlet name="plone.comments" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontent" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.20. Next Previous

Provides next/previous functionality for a folder.

Notes:: Turn this on per folder using Edit > Settings.
Snippet:: <div class="listingBar">â¦</div>
CSS:: public.css
Name:: plone.nextprevious
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.nextprevious

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/nextprevious/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/nextprevious/

Template Name:

nextprevious.pt

Class Name:

plone.app.layout.nextprevious.view.NextPreviousViewlet

Manager:

plone.belowcontent (name)
plone.app.layout.viewlets.interfaces.IBelowContent (interface)

Sample files & directives

Put a version of nextprevious.pt in [your theme package]/browser/templates)

Create your own version of the class in [your theme package]/browser/[your module].py

from plone.app.layout.nextprevious.view import NextPreviousViewlet
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
class [your class name](NextPreviousViewlet):
    render = ViewPageTemplateFile("[your template name]")

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IBelowContent"
    class=".[your module].[your class name]"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.belowcontent" skinname="[your skin name]">
        <viewlet name="plone.nextprevious" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.belowcontent" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.21. Footer

Contains copyright information.

Snippet:: <div id="portal-footer">â¦</div>
CSS:: public.css
Name:: plone.footer
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.footer

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

footer.pt

Class Name:

none

Manager:

plone.portalfooter (name)
plone.app.layout.viewlets.interfaces.IPortalFooter (interface)

Sample files & directives

Put a version of footer.pt in [your theme package]/browser/templates)

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
    template="templates/[your template name].pt"
    for="*"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalfooter" skinname="[your skin name]">
        <viewlet name="plone.footer" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalfooter" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

9.22. Colophon

Contains links to plone.org etc.

Snippet:: <div id="portal-colophon">â¦</div>
CSS:: public.css
Name:: plone.colophon
Type:: viewlet

Use:: Site Setup > Zope Management Interface > portal_view_customizations
Go to:: plone.colophon

Customizing in your own product

Located in:

[your egg location]/plone/app/layout/viewlets/
[your egg location]/plone.app.layout-[version].egg/plone/app/layout/viewlets/

Template Name:

colophon.pt

Class Name:

none

Manager:

plone.portalfooter (name)
plone.app.layout.viewlets.interfaces.IPortalFooter (interface)

Sample files & directives

Put a version of colophon.pt in [your theme package]/browser/templates)

Wire up your viewlet in [your theme package]/browser/configure.zcml

<browser:viewlet
    name="[your namespace].[your viewlet name]"
    manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
    template="templates/[your template name].pt"
    for="*"
    layer=".interfaces.[your theme specific interface]"
    permission="zope2.View"
/>

In [your theme package]/profiles/default/viewlets.xml

Hide the original viewlet (if you wish)

<object>
    <hidden manager="plone.portalfooter" skinname="[your skin name]">
        <viewlet name="plone.colophon" />
    </hidden>

Insert your new viewlet in a viewlet manager

    <order manager="plone.portalfooter" skinname="[your skin name]"
           based-on="Plone Default">
        <viewlet name="[your namespace].[your viewlet name]"
                 insert-before="*" />
    </order>
</object>

Page Elements

1. Viewlet

1.1. Anatomy of a Viewlet

Directive in ZCML

Attributes in ZCML

1.2. Moving, Removing or Hiding a Viewlet

1.2.1. Overview and Cheat Sheet

Quick Cheat Sheet of the Basics

Through the Web

In your own product

Removing a viewlet from a viewlet manager

Moving a viewlet within a viewlet manager

Moving a viewlet from one viewlet manager to another

1.3. Overriding or Creating a New Viewlet

1.3.1. Overview and Cheat Sheet

Quick Cheat Sheet

Through the Web

In your own product

Sample configuration.zcml directives

Notes for Plone version 3.1.2 or lower:

Sample Python class

2. Portlet

2.1. Anatomy of a Portlet

Directive in ZCML

Attributes in ZCML

2.2. Moving, Removing or Hiding a Portlet

2.3. Overriding a Portlet

Through the Web

In your own product

Quick Cheat Sheet

Sample configuration.zcml directive

Sample Python class for navigation portlet override

2.4. Override the portlets in Plone 3.0

3. Viewlet Manager

3.1. Anatomy of a Viewlet Manager

Directive in ZCML

Attributes in ZCML

3.2. Moving, Removing or Hiding a Viewlet Manager

Quick Cheat Sheet

Through the Web

In your own product

3.3. Creating a New Viewlet Manager

Through the Web

In your own product

Sample Interface

Sample configure.zcml directive

4. Portlet Manager

4.1. Moving or Removing a Portlet Manager

Through the Web

In your own product

4.2. Hiding a Portlet Manager

4.3. Creating a New Portlet Manager

Quick Cheat Sheet

Through the Web

In your own product

Sample interface

Sample portlets.xml

Sample configure.zcml directive (for the management view)

4.4. Practical

4.4.1. Adding Portlet Managers

Prerequsites

Strategy

Step One: Add a viewlet

Step Two: Add a portlet manager

Step Three: Add a management view for the portlet manager

5. Page Elements Index - Plone Default and Classic Theme

6. Page Elements Index - Sunburst Theme - Plone 4

7. Structural Elements

7.1. Header

Customizing through the Zope Management Interface

Customizing in your own product

Sample files & directives

8. Hidden Elements

8.1. Skip Links

Customizing through the Zope Management Interface

Customizing in your own product

Sample files & directives

8.2. HTML Head Title

Customizing through the Zope Management Interface

Customizing in your own product