7. Configuring and Customizing Plone through the web

The Control Panel

The most important parts of Plone can be configured in the control-panel.

  • Click on your username
  • Click “Site Setup”

We’ll explain every page and mention some of the actions you can perform here.

  1. Add-ons (later...)
  2. Calendar
  3. Configuration Registry
  4. Content Rules (we know this already)
  5. Discussion
  6. Editing
  7. Errors
  8. HTML Filtering
  9. Image Handling
  10. Language
  11. Mail
  12. Maintenance
  13. Markup
  14. Navigation
  15. Search
  16. Security
  17. Site
  18. Syndication
  19. Themes
  20. TinyMCE Visual Editor
  21. Types
  22. Users and Groups
  23. Zope Management Interface (here be dragons)

Below the links you may find information on your Plone-, Zope- and Python-Versions and an indicator as to whether you’re running in production or development mode.


  • @@manage-portlets
  • UI fit for smart content-editors
  • various types
  • portlet-configuration is inherited
  • managing
  • ordering/weighting
  • The future: will maybe be replaced by tiles



  • @@manage-viewlets
  • viewlet have no UI
  • not aimed at content-editors
  • not locally addable, no configurable inheritance.
  • usually global (depends on code)
  • will be replaced by tiles?
  • the code is much simpler (we’ll create one tomorrow)
  • live in viewlet-managers, can be nested (by adding a viewlet that contains a viewlet-manager)
  • ttw-reordering only within the same viewlet-manager
  • the code decides when it’s where and what it shows

Portlets save Data, Viewlets usually don’t. Viewlets are often used for UI-Elements.



Go to http://localhost:8080/Plone/manage

Zope is the foundation of Plone. Here you can access the inner working of Zope and Plone alike.


Here you can easily break your site so you should know what you are doing.

We only cover three parts of customization in the ZMI now. Later on when we added our own code we’ll come back to the ZMI and will look for it.

At some point you’ll have to learn what all that objects are about. But not today.

Actions (portal_actions)

  • Actions are mostly links. But really flexible links.
  • Actions are configurable ttw and through code.
  • These actions are usually iterated over in viewlets and displayed.


  • Links in the Footer (site_actions)
  • Actions-Dropdown (folder_buttons)

Actions have properties like:

  • description
  • url
  • i18n-domain
  • condition
  • permissions


These are the links at the bottom of the page:

  • Site Map
  • Accessibility
  • Contact
  • Site Setup

We want a new link to legal information, called “Imprint”.

  • Go to site_actions (we know that because we checked in @@manage-viewlets)
  • Add a CMF Actions imprint
  • Set URL to string:${portal_url}/imprint
  • Leave condition empty
  • Set permission to View
  • Save


  • Check if the link is on the page
  • Create new Document Imprint and publish

Skins (portal_skins)

In portal_skins we can change certain images, css-files and templates.

  • portal_skins is deprecated technology
  • We only do some minimal changes here.

Plone 5 will get rid of a lot of functionality that still lives in portal_skins.

We used to do this part of the training with plone.app.themeeditor which has a much nicer UI than the ZMI but also has dependencies that are incompatible with ZopeSkel and is not widely used.

Change some css

  • Go to ZMI
  • go to portal_skins
  • go to plone_styles
  • go to ploneCustom.css
  • click customize

Enter the following css:

#visual-portal-wrapper {
    margin: 0 auto;
    position: relative;
    width: 1024px;

Click ‘save’ and check results in the a different browser-tab. How did that happen?

The UI leaves a lot to be desired. In a professional context this is no-go (no version-control, no syntax-highlighting etc. pp.). But everybody uses portal_skins it to make quick fixes to sites that are already online.

Let’s add some more css to make our site a little responsive:

@media only screen and (max-width: 980px) {
   #visual-portal-wrapper {
       position: relative;
       width: auto;

@media only screen and (max-width: 768px) {
   #portal-columns > div {
       width: 97.75%;
       margin-left: -98.875%;
       clear: both;

   .searchSection {
       display: none;


CSS-Registry (portal_css)

  • go to ZMI > portal_css
  • at the bottom there is ploneCustom.css
  • Disable Development mode: The css-files are merged and have a cache-key.


The JavaScripts Registry (portal_javascripts) is very similar.

The merging function solves a big problem: we’d like to develop our CSS and JS resources in a granular way, but we’d also like to minimize HTTP requests.


At the end of a development process, a little rearranging to minimize requests can have a very nice effect. It’s often possible to reduce requests to a very small number for anonymous visitors.

Further tools in the ZMI

There are many more notable items in the ZMI. We’ll visit some of them later.

  • acl_users
  • error_log
  • portal_properties
  • portal_setup
  • portal_workflow
  • portal_catalog


You can configure and customize a lot in Plone through the web. The most important options are accessible in the plone control panel but even more are hidden away in the ZMI. The amount and presentation of information is overwhelming but you’ll get the hang of it through a lot of practice.