Skip to main content

Toolbar for Plone

Project description

plone.app.toolbar installs a new content editing toolbar for Plone.

Motivation

  • Move the admin toolbar currently found in the content of a page (when
    logged in) to a separate, encapsulated, bar at the top of the page.
  • Make it so themer’s do not need to handle or manage admin specific UI,
    unless it is something they are are intentionally doing

Installation

To install toolbar drop following lines to your buildout.cfg:

[buildout]
extends = http://dist.plone.org/release/4.3rc1/versions.cfg
versions = versions
parts = instance

[instance]
recipe = plone.recipe.zope2instance
user = admin:admin
http-address = 7000
eggs =
    Pillow
    Plone
    plone.app.widgets[archetypes]
    plone.app.toolbar

[versions]
plone.app.jquery = 1.8.3

Above version pins are for Plone version 4.3rc1 or higher.

Make sure you install the “Plone Toolbar” profile when creating your Plone site or include plone.app.toolbar:default profile in your metadata.xml..

To start developing plone.app.toolbar you can find buildout at buildout.deco repository.:

https://github.com/plone/buildout.deco/blob/master/toolbar.cfg

Diazo rules

First we need to copy the toolbar’s HTML code:

<before theme-children="/html/body"
    content="//div[@data-iframe='plone-toolbar']" />

Then, in case we are not copying all resources from Plone (content) into the theme we have to include the toolbar’s resources and its dependencies as well:

<before theme-children="/html/head">
    <link rel="stylesheet" type="text/css"
        href="++resource++plone.app.widgets.css"/>
    <link rel="stylesheet" type="text/css"
        href="++resource++plone.app.toolbar_init.css"/>
    <link rel="stylesheet" type="text/css"
        href="++resource++plone.app.toolbar.css"/>
    <script type="text/javascript"
        src="++resource++plone.app.jquery.js"></script>
    <script type="text/javascript"
        src="++resource++plone.app.toolbar_init.js"></script>
    <script type="text/javascript"
        src="++resource++plone.app.toolbar.js"></script>
    <script type="text/javascript"
        src="++resource++plone.app.widgets.js"></script>
</before>

Also, in order to correctly support updating a page after using Edit, you must ensure that the element #portal-column-content exists within your theme. In short, as with Plone’s default theme, this element should correspond to the main content column. It will be repopulated with updated content after an edit action takes place via the toolbar. A rule similar to this is needed - in this case, the entire element is placed into the theme:

<replace css:theme-children="#content article"
    css:content="#portal-column-content" />

For the technically minded, the element of #portal-column-content will be repopulated with HTML corresponding to the same element ID from a response body returned after an edit takes place.

The above rules and consideration should be enough so that your theme will support plone.app.toolbar.

Project details


Release history Release notifications

History Node

1.4.0

This version
History Node

1.3.0

History Node

1.2

History Node

1.1

History Node

1.0

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
plone.app.toolbar-1.3.0.tar.gz (649.5 kB) Copy SHA256 hash SHA256 Source None Jul 21, 2013

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page