Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics
What’s changed?
Tutorial on Plone.org will get you started
Plone 4 has a new theme:        Sunburst
Plone 4 also includes•  Plone Classic –       •  Plone Default –   The default Plone 3      A barebones template   theme  ...
Updates to main_template.pt•  Defines on the html tag have been modified•  Some new defines have been added to the   body ...
Updates to template variables•  Many global template variables are no longer   available   Good news: speed!   Bad news:...
Moved viewlet managers / macros•  Document title, description,   abovecontenttitle, belowcontenttitle,   abovecontentbody,...
Review all your custom templates  to see whether your theme is             affected
Update the “based-on” declarations     in Generic Setup profiles•  Skin paths (skins.xml) and viewlet managers   (viewlets...
Update the theme specific interface•  Subclass the interface from Plone Classic   Theme (not IDefaultPloneLayer) in browse...
But, but …•  What if I want my theme to be compatible   with Plone 3 and Plone 4?•  Why are my viewlets showing up all ove...
Preserving Plone 3 compatibility•  Add a dependency on plonetheme.classic – so   imports don’t fail in your Plone 3 sites•...
Plone 3 compatibility (cont.)•  In configure.zcml:  <includeDependencies package="." />•  In profiles/default/metadata.xml...
Viewlet changes•  plone.personal_bar – in plone.portalheader   instead of plone.portaltop•  plone.site_actions – in plone....
Controlling viewlets•  Use viewlets.xml to hide duplicate viewlets•  Show them again on uninstall•  Use conditional zcml t...
Conditional ZCML Example<!-- Plone 3 condition check--><configure zcml:condition="not-installed plone.app.upgrade">   <bro...
Adjust to the personal bar in Plone 4•  Has the .actionMenu class – dropdown   behavior and green styles•  Is structured a...
TinyMCE in addition to Kupu•  May need to define new styles for TinyMCE   editor•  Kupu had:   .kupu-html body•  TinyMCE h...
CSS changes•  .documentContent and #region-content are   gone – use #content, #content-core, or other   selectors•  .docum...
Styling overlays•  Target .pb-ajax and its children
Questions?
Upcoming SlideShare
Loading in...5
×

Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics

2,384

Published on

Basic steps to make a Plone 3 theme usable in Plone 4 and solutions to more advanced issues you may encounter during the upgrade process.

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

  • Be the first to like this

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

No notes for slide

Transcript of "Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics"

  1. 1. Upgrading a Plone 3 Theme for Plone 4: Beyond the Basics
  2. 2. What’s changed?
  3. 3. Tutorial on Plone.org will get you started
  4. 4. Plone 4 has a new theme: Sunburst
  5. 5. Plone 4 also includes•  Plone Classic – •  Plone Default – The default Plone 3 A barebones template theme with no styling
  6. 6. Updates to main_template.pt•  Defines on the html tag have been modified•  Some new defines have been added to the body tag•  Viewlet managers formerly in content area have been moved to main_template•  New slot called "content-core" has been added for the content body
  7. 7. Updates to template variables•  Many global template variables are no longer available  Good news: speed!  Bad news: you must define them to use them NameError: name templateId is not defined•  Examples: template_id, toLocalizedTime, portal, isAnon, member . . . many more (see docs on Plone.org)
  8. 8. Moved viewlet managers / macros•  Document title, description, abovecontenttitle, belowcontenttitle, abovecontentbody, belowcontentbody, relateditems - out of content templates and into main•  Keywords in belowcontent, not in belowcontenttitle•  Contenthistory a link in documentbyline, not in belowcontentbody
  9. 9. Review all your custom templates to see whether your theme is affected
  10. 10. Update the “based-on” declarations in Generic Setup profiles•  Skin paths (skins.xml) and viewlet managers (viewlets.xml) should be based on “Plone Classic Theme” instead of “Plone Default” <order manager="plone.portaltop" skinname="UCLA Default Theme" based- on="Plone Classic Theme">
  11. 11. Update the theme specific interface•  Subclass the interface from Plone Classic Theme (not IDefaultPloneLayer) in browser/ interfaces.pyfrom plonetheme.classic.browser.interfaces import IThemeSpecific as IClassicThemeclass IThemeSpecific(IClassicTheme): """theme-specific layer"""
  12. 12. But, but …•  What if I want my theme to be compatible with Plone 3 and Plone 4?•  Why are my viewlets showing up all over?•  What’s with the personal bar?•  How do I deal with the new visual editor, TinyMCE?•  Where are the CSS selectors I was using?•  My overlays are whack!
  13. 13. Preserving Plone 3 compatibility•  Add a dependency on plonetheme.classic – so imports don’t fail in your Plone 3 sites•  In setup.py: install_requires=[ setuptools, # -*- Extra requirements: -*- plonetheme.classic, ],
  14. 14. Plone 3 compatibility (cont.)•  In configure.zcml: <includeDependencies package="." />•  In profiles/default/metadata.xml: <dependencies> <dependency>profile- plonetheme.classic:default</dependency> </dependencies>
  15. 15. Viewlet changes•  plone.personal_bar – in plone.portalheader instead of plone.portaltop•  plone.site_actions – in plone.portalfooter instead of plone.portalheader•  plone.path_bar – in plone.abovecontent instead of plone.portaltop•  plone.abovecontent viewlet manager comes before plone.contentviews
  16. 16. Controlling viewlets•  Use viewlets.xml to hide duplicate viewlets•  Show them again on uninstall•  Use conditional zcml to register viewlets as needed for Plone 3 or Plone 4
  17. 17. Conditional ZCML Example<!-- Plone 3 condition check--><configure zcml:condition="not-installed plone.app.upgrade"> <browser:viewlet name="plone.personal_bar” manager="plone.app.layout.viewlets.interfaces.IPortalTop" . . . /></configure><!-- Plone 4 condition check--><configure zcml:condition="installed plone.app.upgrade"> <browser:viewlet name="plone.personal_bar” manager="plone.app.layout.viewlets.interfaces.IPortalHeader" . . . /></configure>
  18. 18. Adjust to the personal bar in Plone 4•  Has the .actionMenu class – dropdown behavior and green styles•  Is structured as definition list (dl) rather than unordered list (ul)•  May need to write new styles, to:  Render the options inline (old-fashioned way)  Coordinate with your site design (avoid the green)•  Includes Site Setup link – hurray!
  19. 19. TinyMCE in addition to Kupu•  May need to define new styles for TinyMCE editor•  Kupu had: .kupu-html body•  TinyMCE has: body.mceContentBody
  20. 20. CSS changes•  .documentContent and #region-content are gone – use #content, #content-core, or other selectors•  .documentEditable comes later, after abovecontent viewlet and status messages•  #content ul and #content li a override styles for .configlets – use #content ul.configlets and #content ul.configlets li a
  21. 21. Styling overlays•  Target .pb-ajax and its children
  22. 22. Questions?
  1. A particular slide catching your eye?

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

×