Getting Plone Ready For The Prom
33
03.12.2008 Silicon Valley • Midwest Six Feet Up, Inc. • http://www.sixfeetup.com Getting Plone Ready for the Prom - Clayton Parker Getting Plone Ready for the Prom Plone Symposium East 2008 Clayton Parker March 12, 2008
-
Upload
clayton-parker -
Category
Technology
-
view
2.785 -
download
1
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
03.12.2008
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
Getting Plone Ready for the Prom - Clayton Parker
Getting Plone Ready for the PromPlone Symposium East 2008
Clayton ParkerMarch 12, 2008
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Who Am I?
• Plone developer since 2003• Lead Developer at Six Feet Up, Inc.• All around nice guy :)
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
What are we in for?
• Approaches to skinning Plone• Tools used• Advanced techniques
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Where to start
• Debug mode• $INSTANCE_HOME/bin/zopectl fg• $buildout/bin/instance fg• zope.conf
• debug-mode on
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
More debug modes
• portal_css• portal_javascripts• portal_kss
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Get to know Plone
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Get to know Plone
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Theories of Skinning
• Light Skinning• use base_properties
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
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-seriffontBaseSize:string=69%fontColor:string=BlackfontSmallSize:string=90%
backgroundColor:string=White
linkColor:string=#436976linkActiveColor:string=RedlinkVisitedColor:string=Purple
borderWidth:string=1pxborderStyle:string=solidborderStyleAnnotations:string=solid
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
css.dtml?
/* <dtml-with base_properties> (do not remove this :) *//* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Example in the wildbody { 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 { border: none; vertical-align: middle;}p { margin: 0 0 0.75em 0; line-height: 1.5em;}
pulled from base.css.dtml
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Building on the base
• ploneCustom.css• override plone styles
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Going all the way
• Clean the slate• Leave just authoring.css
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
TTW vs FS
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Now I’m convinced.
• DIYPloneStyle• ZopeSkel• GenericSetup
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Resource registries
• portal_css• portal_javascripts
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Resource registries
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Advanced techniques
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Viewlets
• New to Plone 3• More control over the main_template
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Using @@manage-viewlets
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Using @@manage-viewlets
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Using @@manage-viewlets
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
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). """
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Layers
<interface interface=".interfaces.IThemeSpecific" type="zope.publisher.interfaces.browser.IBrowserSkinType" name="example" />
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
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" />
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
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" />
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
z3c.jbot
eggs = z3c.jbotzcml = z3c.jbot-meta
<browser:templateOverrides directory="templates" />
templates/plone.app.layout.viewlets.footer.pt
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Overriding portlets
<plone:portletRenderer portlet="plone.app.portlets.portlets.news.INewsPortlet" template="mytheme_news.pt" layer=".interfaces.IThemeSpecific" />
Silicon Valley • MidwestSix Feet Up, Inc. • http://www.sixfeetup.com
03.12.2008Getting Plone Ready for the Prom - Clayton Parker
Zope 3 resources
<browser:resourceDirectory name="example-app-images" directory="images" layer=".interfaces.IThemeSpecific" />
/++resource++example-app-images/foo.jpg
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
The Future
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
FIN
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Questions?
03.12.2008
Six Feet Up, Inc. • http://www.sixfeetup.com Silicon Valley • Midwest
Getting Plone Ready for the Prom - Clayton Parker
Support
http://plone.org/documentationhttps://weblion.psu.edu/trac/weblion/wiki/WebDevelopmenthttp://plone.org/documentation/how-to/firefox-toolshttp://plone.org/documentation/tutorial/creating-plone-themeshttp://plone.org/documentation/tutorial/customizing-main-template-viewletshttp://plone.org/documentation/tutorial/zptProfessional Plone Development Bookhttp://www.packtpub.com/Professional-Plone-web-applications-CMS/book
