how to get started theming plone
DESCRIPTION
TRANSCRIPT
PLONE SYMPOSIUM EAST 2012
How to Get Started Theming Plone
Chrissy Wainwright
PLONE SYMPOSIUM EAST 2012
Choose Your Own Adventure
You are given a Plone 4 site without any styles. Do you:
Build a Diazo theme... go to slide 3Build a traditional Plone theme... go to slide 6Make changes in the site... go to slide 18
PLONE SYMPOSIUM EAST 2012
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
PLONE SYMPOSIUM EAST 2012
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.
PLONE SYMPOSIUM EAST 2012
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”/>
PLONE SYMPOSIUM EAST 2012
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!
PLONE SYMPOSIUM EAST 2012
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.
PLONE SYMPOSIUM EAST 2012
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
PLONE SYMPOSIUM EAST 2012
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 2012
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 2012
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/
PLONE SYMPOSIUM EAST 2012
Identify Plone Elements: Viewlets
PLONE SYMPOSIUM EAST 2012
<include package=”z3c.jbot” file=”meta.zcml” />
<browser:jbot directory=”template-overrides” layer=”.interfaces.IThemeSpecific” />
Overriding Viewlets: z3c.jbot
z3c.jbot can be used when you need to make template changes to a viewlet.
In theme/browser/configure.zcml:
PLONE SYMPOSIUM EAST 2012
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 2012
Identify Plone Elements: Portlets
PLONE SYMPOSIUM EAST 2012
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” />
PLONE SYMPOSIUM EAST 2012
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
PLONE SYMPOSIUM EAST 2012
Custom Folder (In-Site Changes)
This method is not recommended for completely theming your site! Only for making quick fixes.
ZMI > portal_skins > customZMI > portal_view_customizations
PLONE SYMPOSIUM EAST 2012
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.
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
What to look for when your changes are not showing up
Flickr: gfpeck
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
1. Make sure the theme is installed
ZMI > portal_quickinstaller
(or Site Setup > Add-Ons)
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
2. Restart your instance after certain changes * .zcml * .py * new z3c.jbot override
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
3. Turn on Development mode
ZMI > portal_cssZMI > portal_javascripts
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
4. Generic Setup - XML Files * import changes in ZMI > portal_setup > import tab
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
5. Check the custom folder
ZMI > portal_skins > customZMI > portal_view_customizations > contents
PLONE SYMPOSIUM EAST 2012
Common Stumbling Blocks
5. Skins Order
ZMI > portal_skins > properties tab
PLONE SYMPOSIUM EAST 2012
Check out
sixfeetup.com/demos