PLONE SYMPOSIUM EAST 2011
Plone Theming in a Nutshell
Chrissy Wainwright
PLONE SYMPOSIUM EAST 2011
Create the Theme
From the command line, use paster inbuiltout/src to create the theme.
This template does work for Plone 4, specify ‘Sunburst Theme’ as the skinbase.
$ paster create -t plone3_theme
PLONE SYMPOSIUM EAST 2011
Install the Theme
Add your new theme to buildout.cfg in the [buildout] section under eggs, zcml, and develop.
Run buildout, start instance, and install theme in ZMI > portal_quickinstaller.
PLONE SYMPOSIUM EAST 2011
Change the Logo
The name of the logo image to be used can be found and changed inskins/styles/base_properties.props
Put your new logo in skins/images/ and make sure the filename matches what is inbase_properties.
PLONE SYMPOSIUM EAST 2011
Apply Styles
Put a file into your theme/skins/styles folder called ploneCustom.css
Create new CSS files by adding them to the CSS registry.
cssregistry.xml - Generic Setup - portal_css
PLONE SYMPOSIUM EAST 2011
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/
PLONE SYMPOSIUM EAST 2011
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
PLONE SYMPOSIUM EAST 2011
Find Original Templates
Using omelette, you can find the templates you want to override.
Viewlets: plone/app/layout/viewlets
Portlets: plone/app/portlets/portlets
Other templates: Products/CMFPlone/skins/
PLONE SYMPOSIUM EAST 2011
Identify Plone Elements: Viewlets
PLONE SYMPOSIUM EAST 2011
Override Viewlets
From plone/app/layout/viewlets: * viewlet-specific code in configure.zcml * viewlet template
PLONE SYMPOSIUM EAST 2011
Override Viewlets
Put overrides into theme/browser: * configure.zcml - update relative paths (manager, class) - add template=”... - add layer=”.interfaces.IThemeSpecific” * viewlet template
PLONE SYMPOSIUM EAST 2011
<include package=”z3c.jbot” file=”meta.zcml” />
<browser:templateOverrides directory=”template-overrides” layer=”.interfaces.IThemeSpecific” />
Override Viewlets: z3c.jbot
Or use z3c.jbot! In theme/browser/configure.zcml:
PLONE SYMPOSIUM EAST 2011
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
PLONE SYMPOSIUM EAST 2011
Identify Plone Elements: Portlets
PLONE SYMPOSIUM EAST 2011
Override 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” />
PLONE SYMPOSIUM EAST 2011
Override 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
PLONE SYMPOSIUM EAST 2011
Editing Actions
Parts of the site that use actions: * personal bar (login, preferences, etc) * main navigation Home link * document actions (print, send) * site actions (contact, accessibility, etc)
PLONE SYMPOSIUM EAST 2011
Editing Actions
* ZMI > portal_actions * Export Action Providers * remove extra code from actions.xml that you did not adjust
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
What to look for when your changes are not showing up
Flickr: gfpeck
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
1. Make sure the theme is installed
ZMI > portal_quickinstaller
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
2. Restart your instance * .zcml * .py * new z3c.jbot override
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
3. Turn on Development mode
ZMI > portal_cssZMI > portal_javascripts
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
4. Generic Setup - XML Files * import changes in ZMI > portal_setup > import tab
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
5. Check the custom folder
ZMI > portal_skins > customZMI > portal_view_customizations > contents
PLONE SYMPOSIUM EAST 2011
Common Stumbling Blocks
5. Skins Order
ZMI > portal_skins > properties tab
PLONE SYMPOSIUM EAST 2011
Check out
sixfeetup.com/demos