Enabling development mode

Before beginning any CSS customization you should turn on debug-/development mode. This will guarantee that caching and compression of CSS is disabled. This will also ensure that you can see your changes in real time, after refreshing your browser.

Here is how you enable debug-/development mode:

1. log on to your Plone site as the 'admin' user
   
2. add '/manage' to the URL to access the ZMI
3. navigate to ZMI > portal_css

In Plone 3:

1. click the Debug/development mode checkbox
2. click the "Save" button

In Plone 4:

1. make sure the Development mode checkbox is clicked - if you've started your Zope instance in development mode then this will automatically be checked
   
2. click the "Save" button

When you are finished making your CSS modifications you should disable debug-/development mode as it does impact the performance of your Plone site.

This section will talk you through the processes required to create your own theme on the file system and to install this in your own Plone site. 

The good news is that you don't have to write substantial amounts of code yourself to create the framework for your own file system theme, you can use a generator (Paster from ZopeSkel) to do this for you. This will give you a directory containing a number of pre-prepared directories and files, which you can augment or re-write with your own customizations.

• In Practical 1: How to Create a Plone 3 Theme Product on the File System, you'll use the code generator to make your skeleton framework. This practical will also talk you through the files you've been given and what they do.
  
• In Practical 2: How to Install your Plone 3 Theme Using Buildout, you'll make this product available for your Plone site to install and use.
  

Through the Web

You can customize all page templates, skins and CSS very easily through the web.

• Site Setup > Zope Management Interface > portal_skins

Locate the item you want to change, click the customize button and a copy will be dropped into the custom layer for you.

You can also add new page templates, Python scripts and files (for CSS and JavaScript) to the custom layer by using the drop-down list in the ZMI. In most cases, though, you will find it easier to locate a template you want to base your new template on, customize it and then rename it through the ZMI.

Don't forget that, if you're hunting for something, the Find tab in the ZMI can be very useful.

Plone Default Skin on the File System

All the page templates, style sheets, scripts and JavaScript for the Plone Default skin can be found in the CMFPlone product:

[your products directory]/CMFPlone/skins

You'll see there are a number of directories corresponding to specific skin layers. Most of this should be self-explanatory, but its worth remembering that only the generic templates live in plone_templates. If you want to track down a specific content view (e.g., document_view) then you'll need to look in plone_content.

In your own Theme Product

/skins/[your theme namespace].[your theme name]_custom_templates | custom_images | styles

These directories will form your skin layers. Your templates, images, and style sheets can go here. If you asked it to, the plone3_theme paster template will have provided blank style sheets to override the Plone Default ones.

/skins.zcml

When your Zope instance starts up, this turns your directories into skin layers

/profiles/default/skins.xml | cssregistry.xml | jsregistry.xml

When your theme is installed in your Plone site, these set up the hierarchy of skin layers, and register your style sheets and JavaScript with the registries

Components are powerful and flexible tools in Plone 3, but a little more abstract than page templates or Python scripts. As the diagram on the right attempts to show, they are normally combinations of Python classes and page templates wired together in Zope Configuration Language (ZCML) and given a name.

There are two important things to remember about components

Components are compounds of classes, templates, interfaces, permissions etc.

To track components down you need to look in .zcml files first, locate their names, and that will lead you to the classes and templates that contribute to them.

Components come into existence when your Zope Instance is started up

Provided Zope has read the .zcml file, a component will be available to use. You can't overwrite existing components, better to create your own, reusing some of the parts.

Parts of a Component

A component comes into being via a ZCML "directive" (there's an example of one of these below). The directive will have a series of "attributes" which will point to the various parts that go into its creation. These parts have four main functions.

1. To identify the component (in the case of a viewlet this will usually be done with a "name" attribute).
2. To compute the information the component is supposed to display (this is usually done with a Python class, and pointed to with a "class" attribute). For example, in the case of the navigation tree, this would be working out which part of the tree should be displayed for each page.
   
3. To display the information the component's class has computed (this is usually done with a page template).
4. To restrict the display of the component. In the case of a viewlet, this could be restricting it to display only to certain logged-in users (by using the "permission" attribute) or restricting it to display only with specific content types (by using the "for" attribute).
   

There's more about this in the component parts section.

Zope Configuration Language (ZCML)

The Five Tutorial on WorldCookery.com will walk you through ZCML, and there are plenty of examples in tutorials on the plone documentation site.

Here's a sample ZCML directive conjuring up the presentation viewlet (which simply provides a link to a presentation version of a page):

<configure    xmlns="http://namespaces.zope.org/zope"
    xmlns:browser="http://namespaces.zope.org/browser">  
    <browser:viewlet      
         name="plone.presentation"      
         for="Products.ATContentTypes.interface.IATDocument"      
         manager="plone.app.layout.viewlets.interfaces.IAboveContentBody"      
         class=".presentation.PresentationViewlet"      
         permission="zope2.View"      
    />
</configure>

There are three things to note:

• Like any kind of XML, ZCML uses namespaces - watch out for these if you're writing your own ZCML file. For theme components, you'll mostly use the browser namespace.
• ZCML attributes often refer to interfaces rather than actual content types, classes or components (see the for and manager attributes in the example above). You'll find more about interfaces in a later section.
• Look at the class attribute and you'll see it begins with a leading dot. This means you can find it in the same directory as the ZCML file itself. If it isn't within the same directory you'll need to give the full name.

You can get detailed information about ZCML directives in the ZCML Reference section of the Zope 3 API - http://apidoc.zope.org/++apidoc++/. If you want to be very disciplined and tidy, consult the ZCMLStyleGuide http://wiki.zope.org/zope3/ZCMLStyleGuide.

Viewlet

This is a new feature in Plone 3 and is used to provide aspects of the page furniture - those elements of the page which generally don't change throughout the site. These are organized by another type of component - a Viewlet Manager.

For more information you can look at

• Anatomy of a Viewlet section in this reference manual
• http://plone.org/documentation/tutorial/customizing-main-template-viewlets
• http://plone.org/documentation/tutorial/customization-for-developers/viewlets/

Portlet

Portlets in Plone are boxes of information, usually in the right or left column of a page, containing aggregated content or additional information, which may or may not be directly relevant to the content item being displayed. Behind the scenes these used to be constructed from ordinary page templates, but now, in Plone 3, they are wired together as components and are managed by another component - a Portlet Manager.

For more information take a look at:

• The Anatomy of a Portlet section of this manual
• http://plone.org/documentation/how-to/override-the-portlets-in-plone-3.0/
• http://plone.org/documentation/tutorial/customization-for-developers/portlet-renderers/ (for a much more technical explanation)
• http://plone.org/documentation/how-to/adding-portlet-managers

View (Browser View)

We gave one definition of the term "view" above in the skin section. However, behind the scenes, in the context of components, View has a more technical meaning. It refers to a component which is usually made up of a Python class or a template or both and, put simply, processes the data from a content item before it reaches the page. There's a technical explanation in the Plone Developer Manual.

You'll sometimes see it referred to as BrowserView or <browser:page> and in templates you'll see a browser view's name prefaced by @@. We look at browser views again in the section on putting a page together.

Note that the term browser and the browser namespace are used to demarcate presentational components – that is, those bits of code which go to make up elements which will find their way to a web browser at some point.

Resource (Browser Resource) & ResourceDirectory

Although we've indicated that the skin and layers are the usual home of page templates, images and style sheets, it is also possible to turn them into components by registering them in ZCML. In this case you'll see them referred to like this ++resource++[resource name]. The same can be done for a directory containing templates and style sheets.

“Oh great”, I can hear you saying, “so which should I use, components or skins?” Go to the section Skin or Components? for a discussion of the pros and cons. At the time of writing we suggest the simpler option is to keep your templates, images and style sheets in your skin. We're just mentioning browser resources so that you know what they are if you encounter them.

Through the Web

Just as for Skins and Layers, it is possible to customize the templates used by components through the Zope Management Interface.

• Site Setup > Zope Management Interface > portal_view_customizations

You will need to know the name of your component (plone.presentation for instance). The Elements section of this manual will help if the name isn't obvious. You can only rewrite the template, which might be limiting.

On the File System

You can achieve much more if you are building your own theme product on the file system, and in this case the approach is slightly different.

Rather than overwrite a component (as you could for skins), it is far easier to create your own version. This involves some rewiring or new wiring in your own .zcml file, but is actually simpler than it sounds.

Here's an example of the presentation viewlet - as it is used by Plone:

<browser:viewlet
      name="plone.presentation"
      for="Products.ATContentTypes.interface.IATDocument"
      manager="plone.app.layout.viewlets.interfaces.IAboveContentBody"
      class=".presentation.PresentationViewlet"
      permission="zope2.View"
      />

Imagine, for your purposes, you need to use a new class to get this viewlet as you want. In your own configure.zcml file, give it a new name and wire in your own class.

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

• Remember that the dot in front of your class namespace indicates that it can be found in the same directory as this configure.zcml file.
• If you're not sure where your configure.zcml file lives, consult the Where to Find What you Need page of this section.
  

As components come into being as soon as Zope starts up and reads the .zcml files, they are available for every Plone site you have in a Zope instance. You might not want this to happen.

A Theme Interface

You can specify that your components are available only for your theme with a marker interface and a layer attribute in ZCML. Here's a rewired version of the presentation viewlet:

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

Note: Don't confuse the layer attribute with a skin layer. Here, layer refers to the whole theme rather than just one slice of it.

There are two methods for creating a theme interface:

Using plone.theme

In Plone 3.0, plone.theme is used:

• A marker interface is defined in [your theme package]/browser/interfaces.py:

from plone.theme.interfaces import IDefaultPloneLayer

class IThemeSpecific(IDefaultPloneLayer):
    """Marker interface that defines a Zope 3 browser layer.    """

• and this is registered in ZCML in [your theme package]/browser/configure.zcml

<interface
        interface=".interfaces.IThemeSpecific"
        type="zope.publisher.interfaces.browser.IBrowserSkinType"
        name="[your skin name]"
        />

Note: [your skin name] crops up here; refer back to the skins section if you are wondering what this is.

Using plone.browserlayer

In Plone 3.1, plone.browserlayer is available to you.

• Create your interface (e.g. in [your theme package]/browser/interfaces.py)

from zope.interface import Interface
    class IThemeSpecific(Interface):
        """A layer specific to my product        """

• Register this in the configuration (in [your theme package]/profiles/default/browserlayer.xml):

<layers>
 <layer name="[your skin name]"
   interface="[your namespace].[your theme name].browser.interfaces.IThemeSpecific"
 />
</layers>

If you generate your file system product or egg using the plone3_theme paster template, then the basics will be done for you (using the plone.theme method), you will simply need to track down the interface to find its name. Look in

• [your theme package]/browser/interfaces.py or configure.zcml

and you should find it with the name IThemeSpecific. When you refer to it, use its path

layer=".interfaces.IThemeSpecific"

The product created by the plone3_theme paster template does the following:

• overrides and rewrites of the standard Plone Default templates and CSS files go in the Skin section – the skins directory.
• new style sheets and images go in the Components section – the browser directory.

This manual suggests putting all your templates, style sheets and images in the Skin section - leaving just the viewlet and portlet templates in the components. There are a few reasons for this

• it is simpler to do this when you're just starting out
• it follows the way in which Plone Default is constructed
• it makes it quick and easy to adjust your theme on-the-fly after it's installed. At that point, you can make further customizations of the Skin through the Zope Management Interface.
  

At the time of writing there's a big discussion going on about this very question.

If you want to strip the browser resources out of the product created by the plone3_theme paster template

• remove the images and stylesheets directories in the [your theme package]/browser
• remove the <browser:resourceDirectory /> entries in [your theme package]/browser/configure.zcml
• remove the register stylesheet entry for main.css in [your theme package]/profiles/default/cssregistry.xml
• if you have already installed your product you may need to check the CSS registry in the Zope Management Interface (portal_css) and delete the main.css entry there too
  

Through the Web

The templates for most components can be customized through the web:

• Site Setup > Zope Management Interface > portal_view_customizations

The Elements section can help you identify the component you need.

Plone Default Components on the File system

If you're planning to wire up your own components, you may need to track down the relevant files of existing components to copy. This can be tricky. They are packaged up into a number of different eggs, so you need first to locate where your eggs are stored, and then work out which of these contains the component elements you need.

• To work out where your eggs are stored, look at the Where is What section of this manual?
• The Elements section of this manual will help you track down the egg containing the component you need.

In your own Theme Product

/browser/viewlet.py | viewlet.pt

An example viewlet component

/browser/interfaces.py

This is used to create your theme interface

/profiles/default/viewlets.xml

Use this file to order your viewlets within viewlet managers

/browser/configure..zcml

Use this file to wire up your components

/browser/templates | styles

These directories can be used for templates, styles, and images. You will need to register these as directories as resources in configure.zcml

Configuration refers to the default behaviour of a site (for instance, whether you allow people to sign up to your site, or how dates are displayed). You're likely to want some of this behaviour to be embedded in your theme.

There is also some overlap between Components, Skins, and Configuration. For instance, the order of skin layers and the order in which viewlets appear within a viewlet manager are considered aspects of configuration.

Profile

A profile is a set of configuration files. Each file is written in fairly simple XML and refers to a particular group of components or page elements. There are two different types of profile, base profiles and extension profiles. For theme purposes you will only ever need to use an extension profile (i.e., a profile that extends the configuration of an existing site).

A profile comes into being when it is wired up by ZCML. Here's the version created by the plone3_theme paster template:

<genericsetup:registerProfile
 name="default"
 title="[your skin name]"
 directory="profiles/default"
 description='Extension profile for the "[your skin name]" Plone theme.'
 provides="Products.GenericSetup.interfaces.EXTENSION"
/>

You'll see that it points at a directory for the location of the XML files and indicates that it is an extension profile by using an interface.

The XML used for profile files is straightforward. There's no DTD available, but there are plenty of examples to reuse or adapt for your purposes. If all of this seems too much, the good news is that you can get Generic Setup to write the files for you by exporting the configuration from an existing site. There's more information on how to do this on the Generic Setup Tool page.

The root node of an XML profile is usually an object:

<object name="portal_javascripts" meta_type="JavaScripts Registry">
     .......
</object>

which corresponds to a particular site tool (in this case the JavaScripts registry). Sub-nodes represent sub-objects and XML attributes correspond to the attributes of those classes.

<javascript cacheable="True" compression="none" cookable="True"
            enabled="True" expression="" id="jquery.js" inline="False"/>

So, in this case, the sub-node represents an entry in the JavaScripts registry and its tick boxes.

In the very unlikely event that you need to work out for yourself what attributes to use, you'll need to investigate the API (or the interfaces and classes) of the tool in question. Use http://api.plone.org or dig into the source code.

You can find the Generic Setup tool here

• Site Setup > Zope Management Interface > portal_setup

You can run the tool manually, but for theme purposes, if you have created a product using the plone3_theme paster template, Generic Setup will be triggered automatically when you install your theme in your site.

You'll find more extensive information about the Generic Setup Tool in this tutorial:

• Understanding and Using Generic Setup on plone.org

However, there are two useful facts to know about it.

No Undo

Although you can uninstall your theme using portal_quickinstaller, at present, you can't undo the profiles Generic Setup applied during installation. For the most part, this isn't a problem, but it can get confusing - if, for instance, you are experimenting with the order of your viewlets and have tried several versions of viewlets.xml in successive installations. In this case, exporting a profile (explained below) can help you make sense of what you've done.

Exporting Profiles

You can export the current configuration of your site as a set of XML files. This can be helpful if you're not quite sure what you've done, if you're searching for a profile to base your own configuration on, or if you just want the Generic Setup Tool to write out a configuration for you.

• Site Setup > Zope Management Interface > portal_setup
• Click the Export tab
• Select the steps you wish to export
  
• Click the Export Selected Steps button
• You'll be given a zip file with the relevant XML files
  

It isn't always obvious which export step you need to get the exact configuration you want, you may need to experiment.

Through the Web

There are a number of different routes to configure your site through the web. The Elements section of this manual should give you pointers on where to look to configure particular page elements. In general

• Site Setup leads you to configlets for the site settings
  
• Site Setup > Zope Management Interface will lead you to the style sheet and JavaScript registry (portal_css and portal_javascripts)
• Adding /@@viewlet_manager to a URL will enable you to order viewlets

Plone Default Configuration on the File System

You will find most of the configuration files you need in:

• [your products location]/CMFPlone/profiles/default

However, be aware that some configuration files may be located in third-party products. For instance, if you want to add some styles to the visual editor, Kupu, as part of your theme, then you will need kupu.xml which you'll find in [your products location]/kupu/plone/profiles/default.

There's an alternative to hunting around the file system, and that's to use the Generic Setup Tool to export the profile.

In your own Theme Product

/profiles/default/

This directory holds the XML for Generic Setup. The plone3_theme paster template will have provided you with some ready-made files - for setting up your skin layers, registering your style sheets and JavaScript, and ordering your viewlets.

/profiles/default/import_steps.xml

Is an essential file for installation, you shouldn't need to change this.

/profiles/default/cssregistry.xml | jssregistry.xml

will register any style sheets and JavaScript in your skin. You will have to edit these yourself if you have any css or Javascript files to add.

/profiles/default/skins.xml

Will drop your skin layers into the right order of precedence. You won't need to change this unless you've renamed, removed, or added directories in the skins directory of your theme egg.

/profiles/default/viewlets.xml

will determine in what order viewlets appear in viewlet managers. You will need to edit this yourself if you want to add your own viewlets.

/profiles.zcml

When your Zope instance starts up, this file makes the profile available for Generic Setup to use.

There are three ways in which content from your content items can reach a page.

• directly from a content item
• from the catalog
• via a view component (using Python)
  

Getting content directly from a content item

A page template can pull data directly from the content item it is displaying. Here’s a snippet of the RSS template, calling the description field of a Collection content item:

<description>
    <metal:block define-slot="description">
       <tal:block content="context/Description">
          Default rss description goes here
       </tal:block>
    </metal:block>
</description>

• context refers to the current content item
• Description is the accessor of the description field

Accessors

An accessor is simply the method by which data in a field is extracted. In most cases the name of an accessor is the field name with the first letter capitalized and prefaced by 'get' (e.g., getStartTime). There's an exception to this rule. The title and description field, common to most content types, have 'Title' and 'Description' as their accessors (i.e. no 'get', but the first letter is capitalized).

Widgets

This snippet from the news item template does exactly the same thing but calls a specific display "widget" macro for the field rather than just the data.

<p class="documentDescription">
 <metal:field use-macro="python:here.widget('description',  mode='view')">
     .....
</metal:field>
</p>

Getting content from the catalog

Every content item is catalogued on creation and editing. Some of its fields are indexed for quick searching and sorting, while the values of others are stored in what's called the "brains" or "metadata" for quick access.

Pages pulling together a number of content types - a folder or collection listing for instance - often get their content from a catalog query and the brains, rather than waking up every content item in turn. You'll normally find a variable defined somewhere which holds the results of a catalog query:

folderContents here.queryCatalog(contentFilter);

Then the template will loop through the results and call values from the brains/metadata:

item_url item/getURL;
item_id item/getId;

These look pretty much like normal accessors, in fact they are the names of fields in the catalog brains/metadata. This can get confusing - if you try to access a field which isn't in the brains/metadata you'll get an error.

You can see what fields are available to you via

• Site Setup > Zope Management Interface > portal_catalog > metadata tab

If you want to understand more about the catalog, there is a useful, general overview in the Zope book, and a more Plone-specific runthrough in The Definitive Guide to Plone (this book is for Plone 2 only, but the catalog section is still relevant to Plone 3).

Getting content via Python (using a view component)

It is often more efficient to use a view to process the data from the content item (or a group of content items) and then drop it into the page template. In this case, by "view" we mean a specific component defined in ZCML.

Here’s a snippet calling a view to render the sitemap:

<ul id="portal-sitemap"
    class="navTreeLevel0 visualNoMarker"
    tal:define="view context/@@sitemap_view;">
     <tal:sitemap replace="structure view/createSiteMap" />
</ul>

• context/@@sitemap_view is assigned to a variable called (helpfully) 'view'
• createSiteMap is a method of @@sitemap_view
• @@ indicates that this is a view component

Here's the wiring in ZCML that creates @@sitemap_view:

<browser:page
     for="*"
(there’s no restriction on where I can be used)
     name="sitemap_view"
(this is my name)
     class=".sitemap.SitemapView"
(this is where you can find the code to deliver my content)
     permission="zope.Public"
(you can see me if you have the Public permission)
     allowed_interface=".interfaces.ISitemapView"
/>

In summary

• the content is processed by a Python class
• ZCML wires this class up into a component
• the template calls this component

Plone's page templates can be frustrating at first. There's no single template which seems to contain everything you need.

Content Views

Since each content type is likely to have a different combination of fields, each content type requires a separate template for display. As we saw in the templates and templating language section, these usually have _view appended to their name. You can find those for the standard Plone content types in

• [your zope instance]/Products/CMFPlone/Skins/plone_content.

main_template

Knowing about content views only gets you so far, however. It is the main template (main_template.pt) which draws the content together with the page furniture and design. You can find this in

• [your zope instance]/Products/CMFPlone/skins/plone_templates.

It is important to remember that the content view templates aren't complete in themselves, they merely provide a snippet of content which is dropped into a "slot" in the main_template - called 'main'.

If you feel unsure about slots, then have a look back at the templates and templating language section.

Around this main slot, the components - viewlets and portlets come into play - supplying the page furniture and decoration around the content. The main template simply pulls these in via viewlet managers and portlet managers.

Viewlets are so flexible that they can even be pulled into the content view. The abovecontentbody manager, for instance, is used in a number of content views, and handles, amongst other things, the presentation viewlet we looked at in previous sections.

In more detail

You might find it helpful to look at an example in context.

Have a look at:

• Products/CMFPlone/Skins/plone_templates/main_template

and

• Products/CMFPlone/Skins/plone_content/document_view

About document_view (a content view template)

1. Although document_view looks like a complete HTML page, ignore this. Just note that right at the top it calls the main_template.

metal:use-macro="here/main_template/macros/master"

The code that gets used from document_view is actually the bit between these tags:

<metal:main fill-slot="main"> …… </metal:main>

This gets dropped into a slot in the main_template:

<metal:bodytext metal:define-slot="main" 
                tal:content="nothing">
... 
</metal:bodytext>

2. Going back to the fill-slot in the document_view you’ll see a few tags calling the relevant fields from the content type – like this:

<metal:field 
       use-macro="python:here.widget('title', mode='view')">
</metal:field>

You’ll also see a few tags like calling viewlet managers which, in turn, will summon up groups of viewlets:

<div tal:replace="structure provider:plone.abovecontentbody" />

These enable you to drop extra bits of page furniture around the specific content from the fields (e.g., the presentation mode link).

About the main template

1. Jump back to main_template and you’ll see similar calls to other viewlet managers managing groups of viewlets for more page furniture:

<div tal:replace="structure provider:plone.portaltop" />

2. And calls to portlet managers to pull up the portlets defined for that particular page:

<tal:block replace="structure provider:plone.leftcolumn" />

3. You’ll also see a number of additional slots (define-slot), which could also be filled (fill-slot) from the content view template if you wanted. Here's one you could use to add a bit of css:

<metal:styleslot define-slot="style_slot" />

Jump back to your content view template and simply add an additional fill-slot (outside of the main fill-slot):

<metal:mystyleslot fill-slot="style_slot">
 ..... 
</metal:mystyleslot>

We'll go into other ways of providing styles in more detail in the next section.

I was looking for a layout product for the front page of a site I am working on, and the existing products did not meet my needs out of the box because they only showed summary views of content rather than the full view. Instead of writing viewlets for different content types from scratch, I used the existing view macros of the content types as follows, in a new folder view I called folder_full_view (this is just a code snippet):

        <tal:listing condition="folderContents">

                <div tal:repeat="item folderContents">
                <tal:block tal:define="here item/getObject;
                                       actions nothing;
                                       view here/defaultView;
                                       object_title item/pretty_title_or_id"
                           tal:on-error="nothing">                  
                   <div metal:use-macro="here/?view/macros/main"/>

                </tal:block>
                </div>

        </tal:listing>

The setting of actions to nothing is so that the action icons are not displayed for every content item. The on-error="nothing" may not be necessary for you. I have it because I allow the catalog to return results for which there is no View permission.

Similarly, for the CompositePack product, I defined a viewlet

<div class="viewlet default_view">
<tal:block on-error="nothing"
     tal:define="here nocall: context;
                 actions nothing;
                 view here/defaultView;
                 object_title here/pretty_title_or_id">
  <metal:block use-macro="context/global_defines/macros/defines" />
  <div metal:use-macro="context/?view/macros/main"/>
</tal:block>
</div>

so that complete content can be displayed in a layout.

Use these ideas at your own risk. Seems to work for me so far.

PROBLEM:

I have a custom type with an ImageField.  I'm customizing a folder listing of these types and I wanted a thumbnail of each image shown in the folder listing.  This is very straightforward using PiL (Python Imaging Library), if you know what to do.  I was also presented with the problem of working with brains rather than the object itself.

ASSUMPTIONS:

• You have PiL installed and working.
• You know how to make a custom Archetype

OVERVIEW:

When you get the folder contents for a folder listing, brains objects are returned and iterated over to produce the list.  This is of course, much more efficient than waking up each object.  The problem being, you cannot get to your Image field in a brain (that I know of).  The following is a snippet from 'folder_listing.pt' showing this.

<tal:foldercontents define="contentFilter contentFilter|request/contentFilter|nothing;

                            contentsMethod python:test(here.portal_type=='Topic', here.queryCatalog, here.getFolderContents);

                            folderContents folderContents|python:contentsMethod(contentFilter);">



	<tal:entry tal:repeat="item folderContents">

	<tal:block tal:define="item_url item/getURL|item/absolute_url;">

As you can see, while iterating over 'item' you're accessing brains-y things in a brains-y way, like 'item/getURL'.  But you'll notice that you cannot do 'item/my_image' because it's not in the brain.  What to do?! you may wail.  Well, you could wake up the objects, get the image field, and then call the image scaling on it in a pythonic way, but this is a performance hit, puts python in your TAL, whcih you should avoid.

Instead you'll just be crafty.  You already have 'item_url' and you know the name of your image field (my-image) so put those together and you'll get right at the image.  Try this in your browser:

http://full/url/to/your/object/my-image

and you should see your image! Translating this into TAL, you would go:

<img src="#" tal:attributes="src string:${item_url}/my-image" />

Now to add the image scaling bit, and this is where I went wrong.  Much of the Plone documentation about PiL assume you're working with an ATImage object, but you're not.  You're working with an AT ImageField.  An AT ImageField only defines ONE image scale size by default:

sizes = {'thumb': (80,80)}

 whereas ATImage defines a bunch:

sizes = {'large'   : (768, 768),

           'preview' : (400, 400),

           'mini'    : (200, 200),

           'thumb'   : (128, 128),

           'tile'    :  (64, 64),

           'icon'    :  (32, 32),

           'listing' :  (16, 16),

          },

To make matters worse, notice that the sizes defined for the same size key are different.  Bad dog.  No cookie.  Anyhow, what this means is that in order to access the size you want, you have to define it in your schema in advance, like so:

    ImageField(

        name='my-image',

        widget=ImageWidget(

            label="My Image",

            description="An image!",

        ),

        storage=AttributeStorage(),

        sizes= {'large'   : (768, 768),

           'preview' : (400, 400),

           'mini'    : (200, 200),

           'thumb'   : (128, 128),

           'tile'    :  (64, 64),

           'icon'    :  (32, 32),

           'listing' :  (16, 16),

          },

    ),

Ok, so now that you have defined the sizes you want in your custom type's schema, you're ready to use it in your Page Template.  Remember the way we accessed it before?

<img src="#" tal:attributes="src string:${item_url}/my-image" />

To access the sizes defined in your schema, just add the name to the end of your image, preceded by an underscore.

<img src="#" tal:attributes="src string:${item_url}/my-image_mini" />

It's that easy, and it should be.  You shouldn't have to access and therefore wake up your objects!  There are also other ways to get at PiL's image scaling, but this I found was easiest and didn't throw any bizarro "Unauthorized" or "TypeError: a float is required" errors.

Enjoy!
~Spanky

ALSO SEE:

Style sheets and JavaScript files are included in the skin section of the Plone Default theme, so the process of customizing or rewriting in general follows the concept of order of precedence described in the Skin section of this manual (i.e. placing a replacement in a higher layer in the Skin).

If you create your own style sheet, you can either put it in the custom folder of portal_skins through the web or in the skins directory of your theme on the file system.

If you like, and are feeling ambitious, you can turn your stylesheet into a resource type component by putting it in the browser directory and registering it in ZCML. Indeed, this is done for you if you create your own theme product using the paster plone3_template. There are pros and cons to the latter approach, look back at the Skin or Components section if you want to explore these further.

Resource Registries

Before the CSS and JavaScript reach the page they go through an extra step. You'll note that there are quite a few style sheets and JavaScript files available (and not all are always required). So a Registry tool picks and chooses them as required and merges only those it needs for speed and efficiency.

There's a detailed tutorial on how to use these registries in the following section.

including how to use conditions to specify that you only want a particular resource loaded in a particular context (for instance with a document view).

Registering style sheets and JavaScript

• Through the web you can add or remove style sheets and JavaScript by going to the Zope Management Interface > portal_css or portal_JavaScripts.
• On the file system, registering style sheets and JavaScript is part of the Configuration. So you'll need to look in profiles/default/jssregistry.xml and cssregistry.xml.

DTML

Some of the default Plone style sheet files have a .dtml extension, and the CSS inside is wrapped in

/* <dtml-with base_properties> */
 .......
/* </dtml-with> */

DTML is another Zope templating language, which in this case is deployed so that particular variables can be picked up from a properties sheet (base_properties.props) - for example:

#portal-column-one {
    vertical-align: top;
    width: <dtml-var columnOneWidth missing="16em">;
    border-collapse: collapse;
    padding: 0;
}

We wouldn't recommend using this technique as it is likely to be phased out, but it is as well to know that it is there. You can sometimes get caught out if you're customizing an existing style sheet and accidentally delete the top or bottom "dtml-with" statement.

 Pre-requisites: CSS knowledge

1. Go to Site Setup in your Plone site.

2. Select the kupu visual editor add-on product configuration icon, as seen below:

3. Scroll down to the paragraph styles box.

4. Add your new paragraph style in the box. Format is title|tag or title|tag|className, one per line. For example:

Smalltext|p|smalltext

5. Open your ZMI.

6. Make sure that your site is in debug mode when first making changes. This will allow you to see your changes right away. 

7. Go to http://yoursite/portal_skins/plone_styles/ploneCustom.css/manage_main.

8. Click the customize button.

9. Enter your new paragraph style where it says “add your custom stuff here”.

.smalltext {font-size: 70%;}

Note: scroll down the page for available elements. See base_properties for definitions of those elements.

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)

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

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>

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])

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.

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.

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"
 />

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.

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

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"
/>

Snippet:

<div id="portal-header"> … </div>

Name:

plone.header

Type:

viewlet

Customizing through the Zope Management Interface

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>

Snippet:

<p class="hiddenStructure"> … </p>

CSS:

invisibles.css

Name:

plone.skip_links

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.skip_links

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:

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>

Snippet:

<title> ...</title>

CSS:

none

Name:

plone.htmlhead.title

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.htmlhead.title

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:

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>

Snippet:

<link title="Go to previous item" … />

CSS:

none

Name:

plone.nextprevious.links

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.nextprevious.links

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/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>

Snippet:

<link rel="shortcut icon" … />

CSS:

none

Name:

plone.links.favicon

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.links.favicon

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/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>

Snippet:

<link rel="search" … />

CSS:

none

Name:

plone.links.search

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.links.search

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/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>

Snippet:

<link rel="author" … />

CSS:

none

Name:

plone.links.author

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.links.author

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/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>

Snippet:

<link title="Front Page" …> and <link title="Site Map" ..>

CSS:

none

Name:

plone.links.navigation

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.links.navigation

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/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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.analytics

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/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>

Snippet:

<meta .... />

CSS:

none

Name:

plone.htmlhead.dublincore

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.htmlhead.dublincore

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:

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>

Snippet:

<link rel="kss-base-url" .... />

CSS:

none

Name:

plone.htmlhead.kss-base-url

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.htmlhead.kss-base-url

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/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>

Snippet:

<link rel="alternate" title="RSS 1.0" ... />

CSS:

none

Name:

plone.links.RSS

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.links.RSS

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/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>

Snippet:

<ul id="portal-languageselector"> … </ul>

Name:

plone.app.i18n.locales.languageselector

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.app.i18n.locales.languageselector

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/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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.site_actions

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:

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>

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

Customizing through the Zope Management Interface

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

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:

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>

Snippet:

<a id="portal-logo" ...>... </a>

CSS:

public.css

Name:

plone.logo

Type:

viewlet

Customizing through the Zope Management Interface

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

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:

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>

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

Customizing through the Zope Management Interface

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

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:

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>

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

Customizing through the Zope Management Interface

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

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:

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>

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

Customizing through the Zope Management Interface

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

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:

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>

Snippet:

<ul class="contentViews"> … </ul>

CSS:

authoring.css

Name:

plone.contentviews

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.contentviews

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:

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>

Name:

plone.contentactions

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.contentactions

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:

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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.tableofcontents

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:

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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.presentation

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/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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.belowcontenttitle.keywords

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:

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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.belowcontenttitle.documentbyline

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:

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>

Snippet:

<div id="plone-lock-status" />

CSS:

public.css

Name:

plone.lockinfo

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.lockinfo

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/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>

Snippet:

<div class="reviewHistory" id="review-history">…</div>

CSS:

authoring.css

Name:

plone.belowcontentbody.workflowhistory

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.belowcontentbody.workflowhistory

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:

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>

Snippet:

<div class="contentHistory" id="content-history">…</div>

CSS:

authoring.css

Name:

plone.belowcontentbody.contenthistory

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.belowcontentbody.contenthistory

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:

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>

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

Customizing through the Zope Management Interface

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

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:

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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.belowcontentbody.relateditems

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:

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>

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

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.comments

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:

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>

Notes:

Turn this on per folder using Edit > Settings.

Snippet:

<div class="listingBar">…</div>

CSS:

public.css

Name:

plone.nextprevious

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.nextprevious

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/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>

Snippet:

<div id="portal-footer">…</div>

CSS:

public.css

Name:

plone.footer

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.footer

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:

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>

Snippet:

<div id="portal-colophon">…</div>

CSS:

public.css

Name:

plone.colophon

Type:

viewlet

Customizing through the Zope Management Interface

Use:

Site Setup > Zope Management Interface > portal_view_customizations

Go to:

plone.colophon

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:

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>