Document Actions

What controls what you see

This tutorial breaks down the main display elements in a Plone site, and shows you how to control and customize the appearance of each element.

Introduction

About Plone site roles, structure, and presentation

NOTE: Most of the screen shots in this tutorial were taken using Firefox with the web developer extension, which lets you do things like outline block elements, outline table cells, view ID and CLASS usage, and even edit CSS real-time on the page. Invaluable for skin developers!

Before we start: About roles

Plone has the ability to recognize various user roles. An assigned role (usually one of Anonymous, Member, Reviewer, or Manager, and possibly a few more) determines what the user can see or do on the site:

Anonymous users generally are not given the ability to add or edit content, and therefore will not see those options when visiting the site.
When a Member logs in, his or her view of the site will change to include the elements needed to add and edit content, as well as change preferences.
The role of Reviewer is similar to Member, but with the added responsibility of approving or rejecting new content that has been submitted for publishing.
Managers can do it all: they are given complete control of the site.

The Structure

This image depicts the basic structure of a Plone site from the viewpoint of a logged in user. Plone does a great job of separating structure, presentation, and content.

logged in structure

The Presentation

Below you see the presentation of a Plone site, with outlines around all of its block elements. We'll go through each element and explain where to find the templates and CSS that control them.

Plone Block elements outlined

Note:: You should be able to do most (if not all) of your modifications through CSS style sheets, without having to modify any templates.
Note:: Plone is designed so that any CSS customization made in ploneCustom.css (located in [site]/portal_skins/plone_styles) will take precedence. So when you modify any CSS elements, move them into ploneCustom.css, and leave the original style sheets alone.
Note:: To determine which CSS is being used, look at the template code and search for class= and id=. The name in "quotes" after them is the CSS element that is pulled from the CSS file.

Breaking It All Down

A generic look at the presentation elements of a Plone site

We'll take each element and establish the location of the template and CSS definition that control its presentation.

We'll follow this pattern:

[object]: [image_name]
- Located: [site]/[location]
Note:
This is the path in the ZMI starting at your Plone site. In the example below, the [site] is named demo.
Template: [template_name]
- Located: [site]/[location]
CSS: [css_class and/or css_id]
- Located: [site]/[location]/[file_name]
Note:
The last part, [file_name], is the name of the file that contains the relevant CSS style definition.
ECMA: (javascript) [function_name]
- Located: [site]/[location]/[file_name]
Note:
The last part, [file_name], is the name of the file that contains the relevant ECMAScript file.

Additional information:

This section will have some tips or tricks or just useful info.

Note:: Not all of the possible CSS classes or IDs associated with each element may be listed.

Plone 3 Visual Customization

In Plone v3, the majority of the visual templates listed in this tutorial have been moved to the portal view customizations ([site]/portal_view_customizations) tool. Clicking the Registrations tab (the default view), and then clicking the name of one of the templates within this tool (such as plone.footer) brings you to a screen that displays the default template content, and presents the option to create custom versions of the template by clicking the Customize button.

In addition, Plone 3 includes a Manage Portlets function on each page, through which you can control what portlets appear in an object view, and in what order.

The Logo

Editing the default logo template

Image: logo.jpg
- Located: [site]/portal_skins/plone_images
Template:
In Plone v2.x: global_logo
- Located: [site]/portal_skins/plone_templates
In Plone v3.x: plone.logo

Located: [site]/portal_view_customizations

CSS: #portal-logo and #portal-logo a
In Plone v2.x:
- Located: [site]/portal_skins/plone_styles/plone.css
In Plone v3.x:

Located: [site]/portal_skins/plone_styles/public.css

Changing the logo

In Plone v2.x:

Click the custom folder
- Located: [site]/portal_skins
Upload/add an image
Click base_properties
- Located: [site]/portal_skins/plone_styles
Click the Customize button
- A copy of the template will be moved into the custom folder
  - Located: [site]/portal_skins/custom
Change the logoName field to the name of your new, uploaded image.
If you have issues with disappearing CSS styles, you may need to add the extension of your uploaded file in the id field (i.e., newlogo.jpg).

Note:: To return to base_properties once it has been created the custom folder: navigate to [site]/portal_skins/custom, click base_properties, and then click the Properties tab.

In Plone v3.x:

Click the custom folder
- Located: [site]/portal_skins
Upload/add an image
Navigate to [site]/portal_view_customizations
Under the Registrations tab, click plone.logo
At the bottom of the template view page, click Customize
Change the src of the portal-logo to the name of your new, uploaded image.
The new logo template will be located at [site]/portal_view_customizations/zope.interface.interface-plone.logo

Note:: To see the change, make sure you refresh your browser's cache. For additional information, see Change the Logo.

The Search Box

Editing the default search box

In Plone v2.x:

Template: global_searchbox
- Located: [site]/portal_skins/plone_templates
CSS: #portal-searchbox and input.searchButton
- Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:

Template: plone.searchbox
- Located: [site]/portal_view_customizations
CSS: #portal-searchbox and input.searchButton
- Located: [site]/portal_skins/plone_styles/public.css

The "3 As"

Editing the text size style sheet switcher (Plone 2.x)

This applies only to Plone v2 sites; Plone 3 incorporates text size into its accessibility features.

Images: textsize_small.gif, textsize_normal.gif, textsize_large.gif, and textsize_huge.gif
- Located: [site]/portal_skins/plone_images
Template: global_siteactions
- Located: [site]/portal_skins/plone_templates
CSS: ploneTextSmall.css, ploneTextLarge.css, and ploneTextHuge.css
Note
All of the CSS for each A is in its respective file
- Located: [site]/portal_skins/plone_styles
ECMA: setActiveStyleSheet(title, reset)
- Located: [site]/portal_skins/plone_ecmascript/plone_javascript.js
Note:
It may be the case that this file cannot be edited through the ZMI and must be altered directly on the file system. This is because the content_type is "application/x-javascript" for JavaScript objects. In Zope, you cannot edit this type of content directly in the browser.
A possible workaround would be to rename the file by appending a different extension (as in adding a .dtml to make the file name plone_javascript.js.dtml) so that you can make changes via the ZMI. However, it would be a good idea to revert to the proper name after making your changes, as we're not sure what leaving this object with a different file extension this might break.

Additional Information:

To disable the display of the 3 As:
- Click on /[site]/portal_actions
Uncheck Visible for all the Actions with Category of site_actions
Click Save at the bottom of the form.

Notes for Plone v3:

The AAA switch itself is no longer included in the default Plone v3 skin. Controls for changing text size are made available in the site Accessibility control panel:
[site]/accessibility-info]


The JavaScript function for text size in Plone v3 is called:
setBaseFontSize();
Its acceptable arguments are:
(['largeText'|''|'smallText'],1)
... where '' denotes "normal size".


            
        
        
            
                
                    
                    The Navigation Tabs
                
        
                Editing the default navigation tabs
            
                
                    
 
In Plone v2.x:
Template: global_sections
Located: [site]/portal_skins/plone_templates
CSS: #portal-globalnav, #portal-globalnav li, #portal-globalnav li a, #portal-globalnav li.selected a, and #portal-globalnav li a:hover
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:
Template: navigation.pt
Located: [site]/portal_view_customizations
CSS: #portal-globalnav, #portal-globalnav li, #portal-globalnav li a, #portal-globalnav li.selected a, and #portal-globalnav li a:hover
Located: [site]/portal_skins/plone_styles/public.css

 
 Additional Information:
To disable the tabs:
In Plone v2.x:
Click on [site]/portal_actions

De-select the Visible? check box for all the Actions with the Category of portal_tabs
Click Save at the bottom of the form
In Plone v3.x:

TBD

                
            
        
        
            
                
                    
                    The Personal Bar
                
        
                Editing the default appearance of the user personal bar
            
                
                    
 
In Plone v2.x:
Template: global_personalbar
Located: [site]/portal_skins/plone_templates
CSS: #portal-personaltools, #portal-personaltools .portalUser, #portal-personaltools .portalNotLoggedIn, #portal-personaltools li, and #portal-personaltools li a
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:
Template: plone.personal_bar
Located: [site]/portal_view_customizations
CSS: #portal-personaltools, #portal-personaltools .portalUser, #portal-personaltools .portalNotLoggedIn, #portal-personaltools li, and #portal-personaltools li a
Located: [site]/portal_skins/plone_styles/public.css

 
 Additional Information:
 The items that appear in the personal bar come from a few places. To disable most of them:
In Plone v2.x:
Click [site]/portal_membership

Click the Actions tab
Uncheck Visible? for everything you don't want to be displayed
Click Save at the bottom of the form
In Plone v3.x:
Click [site]/portal_actions

Click the User object
Click the name of the object you want to disable (join, undo, etc.)

  
Uncheck Visible?
Click Save Changes at the bottom of the form
 
  To disable join in Plone v2.x:
Click [site]/portal_registration

Uncheck Visible? 
Click Save
  To disable undo in Plone v2.x:
Click [site]/portal_undo

Uncheck Visible?
Click Save

                
            
        
        
            
                
                    
                    The Path Bar
                
        
                Editing the default appearance of the path ( or "breadcrumb") bar
            
                
                    
 
In Plone v2.x:
Template: global_pathbar
Located: [site]/portal_skins/plone_templates
CSS: #portal-breadcrumbs
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:
Template: plone.path_bar
Located: [site]/portal_view_customizations
CSS: #portal-breadcrumbs
Located: [site]/portal_skins/plone_styles/public.css


                
            
        
        
            
                
                    
                    The Middle
                
        
                Editing the default appearance of the main content areas
            
                
                    
The main content section, in the middle of the top and bottom sections, is comprised of three main areas: left_slots, main_content, and right_slots
 
Template: main_template
Located: [site]/portal_skins/plone_templates (tabled skin) or [site]/portal_skins/plone_tableless (tableless skin, Plone v2.x only)
CSS: ploneColumns.css
Located: [site]/plone_skins/plone_styles (tabled skin) [site]/plone_skins/plone_tableless (tableless skin, Plone v2.x only)

Note: the plone_tableless skin is not used in Plone 3.x and later.
 
 Additional Information:
 The main_template, as its name implies, is the main control for the structure of the displayed pages.  This is where all the sections of the page are defined.  This main template pulls in information and structure from all the other templates.

                
            
        
        
            
                
                    
                    Portlets
                
        
                Editing the default appearance of portlets on each side of the main content area
            
                
                    
 Portlets are the parts of the page that get displayed in the left
(left_slot) and right (right_slot) columns. Each portlet has its own
template.
Templates: portlet_calendar, portlet_events, portlet_favorites, portlet_login, portlet_navigation, portlet_news, portlet_recent, portlet_related, and portlet_review
Located: [site]/portal_skins/plone_portlets
CSS: .portlet, .portlet h4, .portlet h5, .portlet h6, .portletBody, .portletDetails, .portletMore, .portletContent, .portletClose, .portlet .even, .portlet .odd, .portlet input, .portlet ul, and .portlet li
Located: [site]/portal_skins/plone_styles/plone.css

 Note:
The Calendar slot has additional CSS
CSS: .dayPopup, .date, .ploneCalendar, .ploneCalendar a, .ploneCalendar a:hover, .ploneCalendar th, .ploneCalendar td, .ploneCalendar .weekdays td, .ploneCalendar .event, .ploneCalendar .todayevent, and .ploneCalendar .todaynoevent
Located: [site]/portal_skins/plone_styles/plone.css


 Additional Information:
 To control which slots are displayed and where:
In Plone v2.x:
Navigate to the root of your Plone site

Click the Properties tab at the top.  You should see:
 
Each line in left_slots and right_slots is an entry for a portlet
Deleting any line from left_slots or right_slots will remove that portlet
Moving any line from left_slots to right_slots or vice versa will change the side of the page on which the portlet appears
Reordering the lines will change the order in which the portlets appear
Remember to click Save Changes

 Note
Here is a how-to on creating a static portlet.
Note 
This can also be done in any other folder in your Plone site in order to diplay or hide different portlets in different locations. If either  left_slots or right_slots do not appear in the ZMI, you can add them:

At the bottom of the Properties page, enter either left_slots or right_slots for Name
Select a Type value of strings
Enter the name and path above for the appropriate portlet as a Value
Click Add



In Plone v3.x:
Click Manage Portlets
To remove a portlet from either the left or right side, click the red X icon to the right of its name
To add a portlet to either side, select its name from the Add portlet drop-down menu
To edit the behavior of some (not all) portlets, click its name and edit its settings


Navigation portlet in Plone 3.x:
In Plone v3 sites with default configurations, the left_slots section is hidden on the front page, due to the default Navigation portlet configuration settings on the front-page object.  To enable the display of the Navigation portlet at the site home page:
Click Manage Portlets
Click the Navigation portlet
Under Start Level, change the portlet start level value from 1 to 0
Click Save

                
            
        
        
            
                
                    
                    Document Actions
                
        
                Editing the default appearance of the document actions section
            
                
                    
 
In Plone v2.x: 
Images: extedit_icon.gif, mail_icon.gif, print_icon.gif, site_icon.gif, and rss.gif
Located: [site]/portal_skins/plone_images
Template: document_actions
Located: [site]/portal_skins/plone_content
CSS: .documentActions, .documentActions ul, .documentActions li, and .documentActions a
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:
Images: extedit_icon.gif, mail_icon.gif, print_icon.gif, site_icon.gif, and rss.gif
Located: [site]/portal_skins/plone_images
Template: see: Document Actions Now Use Zope 3 Viewlets
CSS: .documentActions, .documentActions ul, .documentActions li, and .documentActions a
Located: [site]/portal_skins/plone_styles/public.css

 
Additional Information:
 To disable the document actions icons:
In Plone v2.x:
Navigate to [site]/portal_actions

Uncheck Visible? for all the Actions with the Category of document_actions
Click Save at the bottom of the form
In Plone v3.x:
Navigate to [site]/portal_actions
Click the name of the object you wish to disable (rss, sendto, etc.)
De-select the Visible? check box
Click Save Changes

 

                
            
        
        
            
                
                    
                    Content Tabs
                
        
                Editing the default appearance of the user action content tabs
            
                
                    
 
In Plone v2.x:
Template: global_contentviews
Located: [site]/portal_skins/plone_templates
CSS: .contentViews, .contentViews li, .contentViews li a, .contentViews .selected a, .contentViews li a:hover, and .actionItems li
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:
Template: plone.contentviews
Located: [site]/portal_view_customizations
CSS: .contentViews, .contentViews li, .contentViews li a, .contentViews .selected a, .contentViews li a:hover, and .actionItems li
Located: [site]/portal_skins/plone_styles/authoring.css

 
 
 Additional Information:
 The tabs can be disabled; however, they are defined in a few areas and are content-dependent.
To disable the Contents tab:
In Plone v2.x:
Navigate to [site]/portal_actions
  Note
You will see two actions with the name Contents and the ID folderContents, but the categories are different: category object controls whether it shows up for content other than Folder, and Category folder controls whether it shows up when you're viewing a Folder.
Uncheck Visible? 
Click Save at the bottom of the form
In Plone v3.x:
Navigate to [site]/portal_actions
Click object
Click folderContents (Contents), or the name of any other tab object you wish to disable (Syndication, Rules, Sharing, etc.)
De-select the Visible? check box
Click Save Changes
 
 The rest of the tabs in Plone v2 are different for each content type.  As an example, we'll disable them for a document:
 Note
The others are basically the same.
Navigate to [site]/portal_types


 Note
You'll see all the different content types listed.  
Click on Document 
Click  the Actions tab at the top  
Uncheck Visible? next to the name of any tab you don't want displayed for document objects
Click Save at the bottom of the form
 Note
A common change requested by Plone users and administrators is to modify the text case of tabs (e.g., change the text so that it appears in Title Case lettering instead of in all lowercase). This is easily accomplished by changing the value of the textTransform property from lowercase to none in base_properties.

                
            
        
        
            
                
                    
                    The Content Menu
                
        
                Changing the appearance of the user actions and content menus
            
                
                    

In Plone v2.x:
Template: global_contentmenu
Located: [site]/portal_skins/plone_templates
CSS: .contentActions, .contentActions ul, .contentActions li, .contentActions ul, .contentActions li, .menuPosition, .actionMenu li, .actionMenu li a, .actionMenu li a:hover, .actionMenu,  .actionSeperator a, .actionSingular, and .actionItems li
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:
Template: plone.contentactions
Located: [site]/portal_view_customizations
CSS: .contentActions, .contentActions ul, .contentActions li, .contentActions ul, .contentActions li, .menuPosition, .actionMenu li, .actionMenu li a, .actionMenu li a:hover, .actionMenu,  .actionSeperator a, .actionSingular, and .actionItems li
Located: [site]/portal_skins/plone_styles/authoring.css

 
 Additional Information:
To disable a content type from the Add New Item menu site-wide:
Navigate to [site]/portal_types

Click on the content type you wish to disable
Uncheck Implicitly addable? 
Click Save
Voilà! The content type will no longer be displayed in the Add New Item menu.
 The states displayed in the States menu are controlled via [site]/portal_workflow


                

            
        
        
            
                
                    
                    Content Types
                
        
                Changing the default appearance of Plone's default content types
            
                
                    
All Plone v2 content types are associated with at least two templates: one for viewing, and one for editing. Plone v3 content types are associated with at least a viewing template.
 Note:
The viewing templates use a lot of the CSS that redefines HTML
tags. The editing forms use all of the CSS associated with forms.  All of these styles are defined in a single style sheet:

In Plone v2.x: [site]/portal_skins/plone_styles/plone.css
In Plone v3.x: [site]/portal_skins/plone_styles/public.css

 Plone comes equipped with 8 content types out of the box:
Document
  
Templates:
In Plone v2.x: document_view and document_edit_form
In Plone v3.x: document_view
Located: [site]/portal_skins/plone_content
CSS: .documentDescription, .discreet, and all the .stx


Event
  
Templates:
In Plone v2.x: event_view and event_edit_form

In Plone v3.x: event_view
Located: [site]/portal_skins/plone_content
CSS: .documentDescription


File
  
Templates:
In Plone v2.x: file_view and file_edit_form


In Plone v3.x: file_view

Located: [site]/portal_skins/plone_content
CSS: .documentDescription and .discreet


Folder
  
Templates:
In Plone v2.x: folder_contents, folder_listing, and folder_edit_form



In Plone v3.x: folder_tabular_view, folder_summary_view, folder_listing, and folder_edit_form
Located: [site]/portal_skins/plone_templates and [site]/portal_skins/plone_content
CSS: .link-parent, .hiddenLabel, .standalone, .documentEditable * .standalone, .listing, .noborder, .documentEditable * .noborder, .state-expired, .context, .documentEditable * .context and much more.


Image
  
Templates:

In Plone v2.x: image_view and image_edit_form

In Plone v3.x: image_view and image_view_fullscreen
Located: [site]/portal_skins/plone_content
CSS: .documentDescription


Link
  
Templates:
In Plone v2.x: link_view and link_edit_form

In Plone v3.x: link_view
Located: [site]/portal_skins/plone_content
CSS: .documentDescription 
 News Item
  
Templates:
In Plone v2.x: newsitem_view and newsitem_edit_form

In Plone v3.x: newsitem_view
Located: [site]/portal_skins/plone_content
CSS: .documentDescription, .discreet, and all the .stx


Collection
A Collection is an automatically-updated, stored search that culls and displays site items matching specified criteria.

 Note:
In versions prior to Plone v3, Collections are called Topics or Smart Folders. The legacy name "topic" remains in the v3 Collection template names.


Templates:
In Plone v2.x: topic_view, topic_edit_form, topic_criteria_form, and topic_subtopics_form

In Plone v3.x: atct_topic_view, and atct_topic_subtopics

Located:

In Plone v2.x: [site]/portal_skins/plone_3rdParty/CMFTopic

In Plone v3.x: [site]/portal_skins/ATContentTypes
CSS: .documentDescription, .listing, and .even


                
            
        
        
            
                
                    
                    The Footer
                
        
                Changing the default appearance of the page footer
            
                
                    
 
In Plone v2.x:
Template: footer
Located: [site]/portal_skins/plone_templates
CSS: #portal-footer
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x:

Template: plone.footer
Located: [site]/portal_view_customizations
CSS: #portal-footer
Located: [site]/portal_skins/plone_styles/public.css

 

                
            
        
        
            
                
                    
                    The Colophon
                
        
                Changing the default appearance of the page colophon (also known as the copyright or printer's mark)
            
                
                    
Colophon
 
 
In Plone v2.x:
Template: colophon
Located: [site]/portal_skins/plone_templates
CSS: #portal-colophon, #portal-colophon ul, #portal-colophon ul li, #portal-colophon ul li a, and #portal-colophon ul li
Located: [site]/portal_skins/plone_styles/plone.css

In Plone v3.x (no images by default):
Template: plone.colophon
Located: [site]/portal_view_customizations

CSS: #portal-colophon, #portal-colophon ul, #portal-colophon ul li, #portal-colophon ul li a, and #portal-colophon ul li
Located: [site]/portal_skins/plone_styles/public.css



                

            
        
        
            
                
                    
                    The Header
                
        
                Changing the default appearance of the page header
            
                
                    
The header section pulls in the CSS and ecmascript files.  There isn't anything visible on the screen from the header.
In Plone v2.x:
Template: header
Located: [site]/portal_skins/plone_templates

In Plone v3.x:

Template: plone.header
Located: [site]/portal_view_customizations