Your SlideShare is downloading. ×
How to Get Started Theming Plone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

How to Get Started Theming Plone

1,402
views

Published on

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,402
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PLONE SYMPOSIUM EAST 2012How to Get Started Theming Plone Chrissy Wainwright
  • 2. 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
  • 3. 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
  • 4. 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.
  • 5. Diazo Rules PLONE SYMPOSIUM EAST 2012<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”/>
  • 6. 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!
  • 7. 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.
  • 8. 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
  • 9. 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/
  • 10. Generic Setup PLONE SYMPOSIUM EAST 2012 * 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
  • 11. 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/
  • 12. Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2012
  • 13. 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” />
  • 14. 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
  • 15. Identify Plone Elements: Portlets PLONE SYMPOSIUM EAST 2012
  • 16. Overriding Portlets PLONE SYMPOSIUM EAST 2012In theme/browser/configure.zcml:<include package=”plone.app.portlets” /><plone:portletRenderer portlet=”plone.app.portlets.portlets.events. IEventsPortlet” template=”events.pt” layer=”interfaces.IThemeSpecific” />
  • 17. 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
  • 18. 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
  • 19. 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.
  • 20. Common Stumbling Blocks PLONE SYMPOSIUM EAST 2012What to look for when your changes are notshowing up Flickr: gfpeck
  • 21. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20121. Make sure the theme is installedZMI > portal_quickinstaller(or Site Setup > Add-Ons)
  • 22. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20122. Restart your instance after certain changes* .zcml* .py* new z3c.jbot override
  • 23. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20123. Turn on Development modeZMI > portal_cssZMI > portal_javascripts
  • 24. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20124. Generic Setup - XML Files * import changes in ZMI > portal_setup > import tab
  • 25. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
  • 26. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Skins OrderZMI > portal_skins > properties tab
  • 27. PLONE SYMPOSIUM EAST 2012 eck outCh .com/ demossix feetup