PLONE SYMPOSIUM EAST 2012How to Get Started Theming Plone    Chrissy Wainwright
Choose Your Own Adventure                                             PLONE SYMPOSIUM EAST 2012You are given a Plone 4 sit...
Diazo Theming                                         PLONE SYMPOSIUM EAST 2012Why you would choose a Diazo theme:* You ha...
What is Diazo?                                          PLONE SYMPOSIUM EAST 2012Diazo allows you to take a static theme (...
Diazo Rules                                          PLONE SYMPOSIUM EAST 2012<replace css:theme=”#logo” 	  css:content=”#...
Traditional Plone Theming                                                PLONE SYMPOSIUM EAST 2012Why you would choose a t...
Change the Logo                                            PLONE SYMPOSIUM EAST 2012The name of the logo image to be used ...
Apply Styles                                            PLONE SYMPOSIUM EAST 2012Put a file into your theme/skins/styles f...
Generic Setup                                          PLONE SYMPOSIUM EAST 2012Generic Setup is the connection betweencon...
Generic Setup                                              PLONE SYMPOSIUM EAST 2012 * portal_actions : Action Providers :...
Finding Plone Templates                                          PLONE SYMPOSIUM EAST 2012Using omelette in your buildout,...
Identify Plone Elements: Viewlets                                    PLONE SYMPOSIUM EAST 2012
Overriding Viewlets: z3c.jbot                                          PLONE SYMPOSIUM EAST 2012z3c.jbot can be used when ...
Override Viewlets: z3c.jbot                                      PLONE SYMPOSIUM EAST 2012Templates can now go intotheme/b...
Identify Plone Elements: Portlets                                    PLONE SYMPOSIUM EAST 2012
Overriding Portlets                                           PLONE SYMPOSIUM EAST 2012In theme/browser/configure.zcml:<in...
Overriding Content Type Templates                                       PLONE SYMPOSIUM EAST 2012If the original template ...
Custom Folder (In-Site Changes)                                        PLONE SYMPOSIUM EAST 2012This method is not recomme...
Custom Folder Overrides                                        PLONE SYMPOSIUM EAST 2012In portal_skins, open the template...
Common Stumbling Blocks                                        PLONE SYMPOSIUM EAST 2012What to look for when your changes...
Common Stumbling Blocks                                      PLONE SYMPOSIUM EAST 20121. Make sure the theme is installedZ...
Common Stumbling Blocks                                           PLONE SYMPOSIUM EAST 20122. Restart your instance after ...
Common Stumbling Blocks                              PLONE SYMPOSIUM EAST 20123. Turn on Development modeZMI > portal_cssZ...
Common Stumbling Blocks                                    PLONE SYMPOSIUM EAST 20124. Generic Setup - XML Files * import ...
Common Stumbling Blocks                                       PLONE SYMPOSIUM EAST 20125. Check the custom folderZMI > por...
Common Stumbling Blocks                                      PLONE SYMPOSIUM EAST 20125. Skins OrderZMI > portal_skins > p...
PLONE SYMPOSIUM EAST 2012   eck outCh           .com/ demossix feetup
Upcoming SlideShare
Loading in...5
×

How to Get Started Theming Plone

1,511

Published on

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

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

No notes for slide

How to Get Started Theming Plone

  1. 1. PLONE SYMPOSIUM EAST 2012How to Get Started Theming Plone Chrissy Wainwright
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2012
  13. 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. 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. 15. Identify Plone Elements: Portlets PLONE SYMPOSIUM EAST 2012
  16. 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. 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. 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. 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. 20. Common Stumbling Blocks PLONE SYMPOSIUM EAST 2012What to look for when your changes are notshowing up Flickr: gfpeck
  21. 21. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20121. Make sure the theme is installedZMI > portal_quickinstaller(or Site Setup > Add-Ons)
  22. 22. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20122. Restart your instance after certain changes* .zcml* .py* new z3c.jbot override
  23. 23. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20123. Turn on Development modeZMI > portal_cssZMI > portal_javascripts
  24. 24. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20124. Generic Setup - XML Files * import changes in ZMI > portal_setup > import tab
  25. 25. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
  26. 26. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Skins OrderZMI > portal_skins > properties tab
  27. 27. PLONE SYMPOSIUM EAST 2012 eck outCh .com/ demossix feetup
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×