Getting Plone Ready For The Prom

1,595 views
1,545 views

Published on

Your Plone instance can dance and sing. Now you need to pretty it up. Ever wondered about how to stylize Plone's look and rearrange the layout? Ever contemplated interacting with Plone's stylesheets or going with a full face-lift? Six Feet Up's Senior Developer Clayton Parker will be your Beauty Specialist and lead you through the makeover of your Plone site referring to several Plone fashion models. Some of the topics touched on will include a review of the various philosophies to reskinning Plone, beauty tips for augmenting the site layout via viewlets, training on when to use Zope 3 resources, and help with registering your customizations with the resource registries. The presentation will also go over how to use base properties to create your site's very special look. Some common Plone fashion faux-pas will be unveiled as well, such as using the custom folder or bloating your site's HTML.

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

No Downloads
Views
Total views
1,595
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Getting Plone Ready For The Prom

  1. 1. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Getting Plone Ready for the Prom Plone Symposium East 2008 Clayton Parker March 12, 2008 Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  2. 2. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Who Am I? • Plone developer since 2003 • Lead Developer at Six Feet Up, Inc. • All around nice guy :) Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  3. 3. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 What are we in for? • Approaches to skinning Plone • Tools used • Advanced techniques Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  4. 4. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Where to start • Debug mode • $INSTANCE_HOME/bin/zopectl fg • $buildout/bin/instance fg • zope.conf • debug-mode on Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  5. 5. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 More debug modes • portal_css • portal_javascripts • portal_kss Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  6. 6. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Get to know Plone Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  7. 7. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Get to know Plone Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  8. 8. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Theories of Skinning • Light Skinning • use base_properties Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  9. 9. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 base_properties title:string=Plone's color, font, logo and border defaults plone_skin:string=Plone Default logoName:string=logo.jpg fontFamily:string=quot;Lucida Grandequot;,Verdana, Lucida, Helvetica, Arial, sans-serif fontBaseSize:string=69% fontColor:string=Black fontSmallSize:string=90% backgroundColor:string=White linkColor:string=#436976 linkActiveColor:string=Red linkVisitedColor:string=Purple borderWidth:string=1px borderStyle:string=solid borderStyleAnnotations:string=solid Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  10. 10. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 css.dtml? /* <dtml-with base_properties> (do not remove this :) */ /* <dtml-call quot;REQUEST.set('portal_url', portal_url())quot;> (not this either :) */ Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  11. 11. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Example in the wild body { font: &dtml-fontBaseSize; <dtml-var fontFamily>; background-color: &dtml-backgroundColor;; color: &dtml-fontColor;; margin: 0; padding: 0; } table { font-size: 100%; } a{ color: &dtml-linkColor;; background-color: transparent; } img { pulled from border: none; base.css.dtml vertical-align: middle; } p{ margin: 0 0 0.75em 0; line-height: 1.5em; } Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  12. 12. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Building on the base • ploneCustom.css • override plone styles Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  13. 13. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Going all the way • Clean the slate • Leave just authoring.css Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  14. 14. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 TTW vs FS Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  15. 15. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Now I’m convinced. • DIYPloneStyle • ZopeSkel • GenericSetup Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  16. 16. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Resource registries • portal_css • portal_javascripts Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  17. 17. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Resource registries Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  18. 18. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Advanced techniques Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  19. 19. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Viewlets • New to Plone 3 • More control over the main_template Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  20. 20. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Using @@manage-viewlets Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  21. 21. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Using @@manage-viewlets Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  22. 22. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Using @@manage-viewlets Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  23. 23. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Layers from plone.theme.interfaces import IDefaultPloneLayer class IThemeSpecific(IDefaultPloneLayer): quot;quot;quot;Marker interface that defines a Zope 3 browser layer. If you need to register a viewlet only for the quot;examplequot; theme, this interface must be its layer (in theme/viewlets/configure.zcml). quot;quot;quot; Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  24. 24. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Layers <interface interface=quot;.interfaces.IThemeSpecificquot; type=quot;zope.publisher.interfaces.browser.IBrowserSkinTypequot; name=quot;examplequot; /> Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  25. 25. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Moving viewlets <browser:viewlet name=quot;plone.abovecontenttitle.documentactionsquot; manager=quot;plone.app.layout.viewlets.interfaces.IAboveContentTitlequot; class=quot;plone.app.layout.viewlets.content.DocumentActionsViewletquot; permission=quot;zope2.Viewquot; layer=quot;.interfaces.IThemeSpecificquot; /> Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  26. 26. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Overriding viewlets <browser:viewlet name=quot;plone.footerquot; for=quot;*quot; manager=quot;plone.app.layout.viewlets.interfaces.IPortalFooterquot; template=quot;mytheme_footer.ptquot; permission=quot;zope.Publicquot; layer= quot;.interfaces.IThemeSpecificquot; /> Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  27. 27. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 z3c.jbot eggs = z3c.jbot zcml = z3c.jbot-meta <browser:templateOverrides directory=quot;templatesquot; /> templates/plone.app.layout.viewlets.footer.pt Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  28. 28. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Overriding portlets <plone:portletRenderer portlet=quot;plone.app.portlets.portlets.news.INewsPortletquot; template=quot;mytheme_news.ptquot; layer=quot;.interfaces.IThemeSpecificquot; /> Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  29. 29. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Zope 3 resources <browser:resourceDirectory name=quot;example-app-imagesquot; directory=quot;imagesquot; layer=quot;.interfaces.IThemeSpecificquot; /> /++resource++example-app-images/foo.jpg Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  30. 30. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 The Future Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  31. 31. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 FIN Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  32. 32. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Questions? Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
  33. 33. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Support http://plone.org/documentation https://weblion.psu.edu/trac/weblion/wiki/WebDevelopment http://plone.org/documentation/how-to/firefox-tools http://plone.org/documentation/tutorial/creating-plone-themes http://plone.org/documentation/tutorial/customizing-main-template-viewlets http://plone.org/documentation/tutorial/zpt Professional Plone Development Book http://www.packtpub.com/Professional-Plone-web-applications-CMS/book Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

×