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.

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?
/* <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. 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. 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 I’m 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
Advanced techniques
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
FIN
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

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. 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