Hidden Elements

« Return to page index

Plone Theme Reference

1. Skip Links

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

 

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

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>

2. HTML Head Title

The page title in the HTML head.

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>

3. Next Previous Links

Provides next/previous links in the HTML head.

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

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>

4. Favicon Link

The favicon link in HTML head.

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>

5. Search Link

The search link in HTML head.

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>

6. Author Link

The author link in the HTML head.

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>

7. Navigation Link

The navigation link in the HTML head.

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

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>

8. Analytics

Google analytics code snippet.

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

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>

9. Dublin Core Metadata

The Dublin Core metadata in the HTML head.

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>

10. KSS Base Url

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

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

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>

11. RSS Link

The RSS link in the HTML head.

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

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>