PLONE SYMPOSIUM EAST 2012How to Get Started Theming Plone Chrissy Wainwright
Choose Your Own Adventure PLONE SYMPOSIUM EAST 2012You 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
Diazo Theming PLONE SYMPOSIUM EAST 2012Why 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? PLONE SYMPOSIUM EAST 2012Diazo allows you to take a static theme (HTMLfile with CSS, JS, etc) and hook the dynamic Ploneelements into it using a set of rules.
Traditional Plone Theming PLONE SYMPOSIUM EAST 2012Why 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 PLONE SYMPOSIUM EAST 2012The name of the logo image to be used can befound and changed in base_properties.propsPut your new logo in skins/images/ and makesure the name matches that in base_properties,or that it is the same filename as the current logo,which will override it.
Apply Styles PLONE SYMPOSIUM EAST 2012Put a file into your theme/skins/styles foldercalled ploneCustom.cssCreate new CSS files by putting them in the stylesfolder, and adding them to the CSS registry.cssregistry.xml - Generic Setup - portal_css
Generic Setup PLONE SYMPOSIUM EAST 2012Generic Setup is the connection betweencontent/changes in your site and the filesystem.ZMI > portal_setup > Import/Export tabtheme/profiles/default/
Finding Plone Templates PLONE SYMPOSIUM EAST 2012Using omelette in your buildout, you can find thetemplates you want to override.Viewlets: plone/app/layout/viewletsPortlets: plone/app/portlets/portletsOther templates: Products/CMFPlone/skins/
Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2012
Overriding Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2012z3c.jbot can be used when you need to maketemplate 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 PLONE SYMPOSIUM EAST 2012Templates can now go intotheme/browser/template-overrides named byreferencing the dotted path to the file:plone.app.layout.viewlets.footer.pt
Identify Plone Elements: Portlets PLONE SYMPOSIUM EAST 2012
Overriding Content Type Templates PLONE SYMPOSIUM EAST 2012If 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) PLONE SYMPOSIUM EAST 2012This method is not recommended for completelytheming your site! Only for making quick fixes.ZMI > portal_skins > customZMI > portal_view_customizations
Custom Folder Overrides PLONE SYMPOSIUM EAST 2012In portal_skins, open the template you want tooverride (e.g. plone_content > document_view).Click the customize button. This will create acopy in the custom folder so you can now makechanges.
Common Stumbling Blocks PLONE SYMPOSIUM EAST 2012What to look for when your changes are notshowing up Flickr: gfpeck
Common Stumbling Blocks PLONE SYMPOSIUM EAST 20121. Make sure the theme is installedZMI > portal_quickinstaller(or Site Setup > Add-Ons)
Common Stumbling Blocks PLONE SYMPOSIUM EAST 20122. Restart your instance after certain changes* .zcml* .py* new z3c.jbot override
Common Stumbling Blocks PLONE SYMPOSIUM EAST 20124. Generic Setup - XML Files * import changes in ZMI > portal_setup > import tab
Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Skins OrderZMI > portal_skins > properties tab
PLONE SYMPOSIUM EAST 2012 eck outCh .com/ demossix feetup