How to Get Started Theming Plone

PLONE SYMPOSIUM EAST 2012

How to Get Started
Theming Plone
Chrissy Wainwright

Choose Your Own Adventure

You are given a Plone 4 site without any styles.
Do you:

Build a Diazo theme... go to slide 3
Build a traditional Plone theme... go to slide 6
Make changes in the site... go to slide 18

Diazo Theming

Why you would choose a Diazo theme:
* You have already built a static theme
* The theme needs a lot of Plone elements
moved around
* You want to keep the theme completely
separate
* You don’t have time to learn the ins and
outs of Plone

What is Diazo?

Diazo allows you to take a static theme (HTML
file with CSS, JS, etc) and hook the dynamic Plone
elements into it using a set of rules.

Diazo Rules

<replace css:theme=”#logo”
css:content=”#portal-logo”/>

<after css:theme-children=”head”
content=”/html/head/script” />

<drop css:theme=”#column-two”
if-content=”not(//*[@id=’portal-column-two’])”/>

<copy attributes=”class” css:content=”body”
css:theme=”body”/>

Traditional Plone Theming

Why you would choose a traditional theme:
* You already know how to do Plone theming
* You are only making minor template and
styling changes
* You are stuck using an older version of Plone
* You want to be able to make theme changes
in-site later *

* coming soon in plone.app.theming!

Change the Logo

The name of the logo image to be used can be
found and changed in base_properties.props

Put your new logo in skins/images/ and make
sure the name matches that in base_properties,
or that it is the same filename as the current logo,
which will override it.

Apply Styles

Put a file into your theme/skins/styles folder
called ploneCustom.css

Create new CSS files by putting them in the styles
folder, and adding them to the CSS registry.

cssregistry.xml - Generic Setup - portal_css

Generic Setup

Generic Setup is the connection between
content/changes in your site and the filesystem.

ZMI > portal_setup > Import/Export tab

theme/profiles/default/

Generic Setup

* portal_actions : Action Providers : actions.xml
* portal_css : Stylesheet Registry : cssregistry.xml
* portal_javascripts : Javascript Registry :
jsregistry.xml
* portal_types : Types Tool : types/[type].xml
* @@manage-viewlets : Viewlet Settings :
viewlets.xml

Finding Plone Templates

Using omelette in your buildout, you can find the
templates you want to override.

Viewlets: plone/app/layout/viewlets

Portlets: plone/app/portlets/portlets

Other templates: Products/CMFPlone/skins/

Identify Plone Elements: Viewlets

Overriding Viewlets: z3c.jbot

z3c.jbot can be used when you need to make
template changes to a viewlet.

In theme/browser/configure.zcml:

<include package=”z3c.jbot” file=”meta.zcml” />

<browser:jbot
directory=”template-overrides”
layer=”.interfaces.IThemeSpecific” />

Override Viewlets: z3c.jbot

Templates can now go into
theme/browser/template-overrides named by
referencing the dotted path to the file:

plone.app.layout.viewlets.footer.pt

Identify Plone Elements: Portlets

Overriding Portlets

In theme/browser/configure.zcml:

<include package=”plone.app.portlets” />

<plone:portletRenderer
portlet=”plone.app.portlets.portlets.events.
IEventsPortlet”
template=”events.pt”
layer=”interfaces.IThemeSpecific” />

Overriding Content Type Templates

If the original template is found in skins:
* put a copy in your theme/skins/ folder
* use the exact same name
* copy any associated .metadata files
* ex: Products/CMFPlone/skins/plone_content/
document_view.pt

Custom Folder (In-Site Changes)

This method is not recommended for completely
theming your site! Only for making quick fixes.

ZMI > portal_skins > custom
ZMI > portal_view_customizations

Custom Folder Overrides

In portal_skins, open the template you want to
override (e.g. plone_content > document_view).

Click the customize button. This will create a
copy in the custom folder so you can now make
changes.

Common Stumbling Blocks

What to look for when your changes are not
showing up

Flickr: gfpeck


1. Make sure the theme is installed

ZMI > portal_quickinstaller

(or Site Setup > Add-Ons)


2. Restart your instance after certain changes
* .zcml
* .py
* new z3c.jbot override


3. Turn on Development mode

ZMI > portal_css
ZMI > portal_javascripts


4. Generic Setup - XML Files
* import changes in
ZMI > portal_setup > import tab


5. Check the custom folder

ZMI > portal_skins > custom
ZMI > portal_view_customizations > contents


5. Skins Order

ZMI > portal_skins > properties tab


eck out
Ch
.com/ demos
six feetup

How to Get Started Theming Plone

More Related Content

What's hot (20)

Similar to How to Get Started Theming Plone (20)

More from cdw9 (8)

Recently uploaded (20)

How to Get Started Theming Plone