Upload
cdw9
View
1.862
Download
5
Embed Size (px)
DESCRIPTION
Citation preview
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