Your SlideShare is downloading. ×
0
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
How to Get Started Theming Plone
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,467

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,467
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

×