Getting Plone Ready For The Prom

download Getting Plone Ready For The Prom

of 33

  • date post

    18-Nov-2014
  • Category

    Technology

  • view

    2.777
  • download

    1

Embed Size (px)

description

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.

Transcript of Getting Plone Ready For The Prom

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 css.dtml? /* (do not remove this :) */ /* (not this either :) */ Six Feet Up, Inc. http://www.sixfeetup.com Silicon Valley Midwest
  • 11. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Example in the wild body { font: &dtml-fontBaseSize; ; 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. 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. 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. 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. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008 Now Im convinced. DIYPloneStyle ZopeSkel GenericSetup Six Feet Up, Inc. http://www.sixfeetup.com Silicon Valley Midwest
  • 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. 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. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008