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

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

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

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

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

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

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

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

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=\"Lucida Grande\",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

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
css.dtml?
/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call \"REQUEST.set('portal_url', portal_url())\"> (not this either :) */
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

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

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

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

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

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

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

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Resource registries
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Advanced techniques
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

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

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

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

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

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Layers
from plone.theme.interfaces import IDefaultPloneLayer
class IThemeSpecific(IDefaultPloneLayer):
\"\"\"Marker interface that defines a Zope 3 browser layer.
If you need to register a viewlet only for the
\"example\" theme, this interface must be its layer
(in theme/viewlets/configure.zcml).
\"\"\"
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Layers
<interface
interface=\".interfaces.IThemeSpecific\"
type=\"zope.publisher.interfaces.browser.IBrowserSkinType\"
name=\"example\"
/>
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Moving viewlets
<browser:viewlet
name=\"plone.abovecontenttitle.documentactions\"
manager=\"plone.app.layout.viewlets.interfaces.IAboveContentTitle\"
class=\"plone.app.layout.viewlets.content.DocumentActionsViewlet\"
permission=\"zope2.View\"
layer=\".interfaces.IThemeSpecific\"
/>
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Overriding viewlets
<browser:viewlet
name=\"plone.footer\"
for=\"*\"
manager=\"plone.app.layout.viewlets.interfaces.IPortalFooter\"
template=\"mytheme_footer.pt\"
permission=\"zope.Public\"
layer= \".interfaces.IThemeSpecific\"
/>
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
z3c.jbot
eggs = z3c.jbot
zcml = z3c.jbot-meta
<browser:templateOverrides directory=\"templates\" />
templates/plone.app.layout.viewlets.footer.pt
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Overriding portlets
<plone:portletRenderer
portlet=\"plone.app.portlets.portlets.news.INewsPortlet\"
template=\"mytheme_news.pt\"
layer=\".interfaces.IThemeSpecific\"
/>
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Zope 3 resources
<browser:resourceDirectory
name=\"example-app-images\"
directory=\"images\"
layer=\".interfaces.IThemeSpecific\"
/>
/++resource++example-app-images/foo.jpg
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
The Future
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
FIN
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

Getting Plone Ready for the Prom - Clayton Parker 03.12.2008
Questions?
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest

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