Plone Theming in a Nutshell

2,191
-1

Published on

A where-is-what reference for Plone theming (for developers familiar with Plone)

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,191
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Plone Theming in a Nutshell

  1. 1. PLONE SYMPOSIUM EAST 2011Plone Theming in a Nutshell Chrissy Wainwright
  2. 2. Create the Theme PLONE SYMPOSIUM EAST 2011$ paster create -t plone3_themeFrom the command line, use paster inbuiltout/src to create the theme.This template does work for Plone 4, specify‘Sunburst Theme’ as the skinbase.
  3. 3. Install the Theme PLONE SYMPOSIUM EAST 2011Add your new theme to buildout.cfg in the[buildout] section under eggs, zcml, and develop.Run buildout, start instance, and install theme inZMI > portal_quickinstaller.
  4. 4. Change the Logo PLONE SYMPOSIUM EAST 2011The name of the logo image to be used can befound and changed inskins/styles/base_properties.propsPut your new logo in skins/images/ and makesure the filename matches what is inbase_properties.
  5. 5. Apply Styles PLONE SYMPOSIUM EAST 2011Put a file into your theme/skins/styles foldercalled ploneCustom.cssCreate new CSS files by adding them to the CSSregistry.cssregistry.xml - Generic Setup - portal_css
  6. 6. Generic Setup PLONE SYMPOSIUM EAST 2011Generic Setup is the connection betweencontent/changes in your site and the filesystem.ZMI > portal_setup > Import/Export tabtheme/profiles/default/
  7. 7. Generic Setup PLONE SYMPOSIUM EAST 2011* 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
  8. 8. Find Original Templates PLONE SYMPOSIUM EAST 2011Using omelette, you can find the templates youwant to override.Viewlets: plone/app/layout/viewletsPortlets: plone/app/portlets/portletsOther templates: Products/CMFPlone/skins/
  9. 9. Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2011
  10. 10. Override Viewlets PLONE SYMPOSIUM EAST 2011From plone/app/layout/viewlets:* viewlet-specific code in configure.zcml* viewlet template
  11. 11. Override Viewlets PLONE SYMPOSIUM EAST 2011Put overrides into theme/browser:* configure.zcml - update relative paths (manager, class) - add template=”... - add layer=”.interfaces.IThemeSpecific”* viewlet template
  12. 12. Override Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2011Or use z3c.jbot!In theme/browser/configure.zcml:<include package=”z3c.jbot” file=”meta.zcml” /><browser:templateOverrides directory=”template-overrides” layer=”.interfaces.IThemeSpecific” />
  13. 13. Override Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2011Templates can now go intotheme/browser/template-overrides named byreferencing the dotted path to the file:plone.app.layout.viewlets.footer.pt
  14. 14. Identify Plone Elements: Portlets PLONE SYMPOSIUM EAST 2011
  15. 15. Override Portlets PLONE SYMPOSIUM EAST 2011In theme/browser/configure.zcml:<include package=”plone.app.portlets” /><plone:portletRenderer portlet=”plone.app.portlets.portlets.events. IEventsPortlet” template=”events.pt” layer=”interfaces.IThemeSpecific” />
  16. 16. Override Templates PLONE SYMPOSIUM EAST 2011If 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
  17. 17. Editing Actions PLONE SYMPOSIUM EAST 2011Parts of the site that use actions:* personal bar (login, preferences, etc)* main navigation Home link* document actions (print, send)* site actions (contact, accessibility, etc)
  18. 18. Editing Actions PLONE SYMPOSIUM EAST 2011* ZMI > portal_actions* Export Action Providers* remove extra code from actions.xml that you did not adjust
  19. 19. Common Stumbling Blocks PLONE SYMPOSIUM EAST 2011What to look for when your changes are notshowing up Flickr: gfpeck
  20. 20. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20111. Make sure the theme is installedZMI > portal_quickinstaller
  21. 21. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20112. Restart your instance* .zcml* .py* new z3c.jbot override
  22. 22. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20113. Turn on Development modeZMI > portal_cssZMI > portal_javascripts
  23. 23. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20114. Generic Setup - XML Files* import changes in ZMI > portal_setup > import tab
  24. 24. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20115. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
  25. 25. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20115. Skins OrderZMI > portal_skins > properties tab
  26. 26. PLONE SYMPOSIUM EAST 2011 eck outCh .com/ demossix feetup

×