Plone Theming in a Nutshell
Upcoming SlideShare
Loading in...5
×
 

Plone Theming in a Nutshell

on

  • 2,130 views

A where-is-what reference for Plone theming (for developers familiar with Plone)

A where-is-what reference for Plone theming (for developers familiar with Plone)

Statistics

Views

Total Views
2,130
Slideshare-icon Views on SlideShare
2,130
Embed Views
0

Actions

Likes
2
Downloads
35
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Plone Theming in a Nutshell Plone Theming in a Nutshell Presentation Transcript

    • PLONE SYMPOSIUM EAST 2011Plone Theming in a Nutshell Chrissy Wainwright
    • Create the Theme PLONE SYMPOSIUM EAST 2011$ paster create -t plone3_themeFrom the command line, use paster inbuiltout/src to create the theme.This template does work for Plone 4, specify‘Sunburst Theme’ as the skinbase.
    • Install the Theme PLONE SYMPOSIUM EAST 2011Add your new theme to buildout.cfg in the[buildout] section under eggs, zcml, and develop.Run buildout, start instance, and install theme inZMI > portal_quickinstaller.
    • Change the Logo PLONE SYMPOSIUM EAST 2011The name of the logo image to be used can befound and changed inskins/styles/base_properties.propsPut your new logo in skins/images/ and makesure the filename matches what is inbase_properties.
    • Apply Styles PLONE SYMPOSIUM EAST 2011Put a file into your theme/skins/styles foldercalled ploneCustom.cssCreate new CSS files by adding them to the CSSregistry.cssregistry.xml - Generic Setup - portal_css
    • Generic Setup PLONE SYMPOSIUM EAST 2011Generic Setup is the connection betweencontent/changes in your site and the filesystem.ZMI > portal_setup > Import/Export tabtheme/profiles/default/
    • Generic Setup PLONE SYMPOSIUM EAST 2011* portal_actions : Action Providers : actions.xml* portal_css : Stylesheet Registry : cssregistry.xml* portal_javascripts : Javascript Registry : jsregistry.xml* portal_types : Types Tool : types/[type].xml* @@manage-viewlets : Viewlet Settings : viewlets.xml
    • Find Original Templates PLONE SYMPOSIUM EAST 2011Using omelette, you can find the templates youwant to override.Viewlets: plone/app/layout/viewletsPortlets: plone/app/portlets/portletsOther templates: Products/CMFPlone/skins/
    • Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2011
    • Override Viewlets PLONE SYMPOSIUM EAST 2011From plone/app/layout/viewlets:* viewlet-specific code in configure.zcml* viewlet template
    • Override Viewlets PLONE SYMPOSIUM EAST 2011Put overrides into theme/browser:* configure.zcml - update relative paths (manager, class) - add template=”... - add layer=”.interfaces.IThemeSpecific”* viewlet template
    • Override Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2011Or use z3c.jbot!In theme/browser/configure.zcml:<include package=”z3c.jbot” file=”meta.zcml” /><browser:templateOverrides directory=”template-overrides” layer=”.interfaces.IThemeSpecific” />
    • Override Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2011Templates can now go intotheme/browser/template-overrides named byreferencing the dotted path to the file:plone.app.layout.viewlets.footer.pt
    • Identify Plone Elements: Portlets PLONE SYMPOSIUM EAST 2011
    • Override Portlets PLONE SYMPOSIUM EAST 2011In theme/browser/configure.zcml:<include package=”plone.app.portlets” /><plone:portletRenderer portlet=”plone.app.portlets.portlets.events. IEventsPortlet” template=”events.pt” layer=”interfaces.IThemeSpecific” />
    • Override Templates PLONE SYMPOSIUM EAST 2011If the original template is found in skins: * put a copy in your theme/skins/ folder * use the exact same name * copy any associated .metadata files * ex: Products/CMFPlone/skins/plone_content/ document_view.pt
    • Editing Actions PLONE SYMPOSIUM EAST 2011Parts of the site that use actions:* personal bar (login, preferences, etc)* main navigation Home link* document actions (print, send)* site actions (contact, accessibility, etc)
    • Editing Actions PLONE SYMPOSIUM EAST 2011* ZMI > portal_actions* Export Action Providers* remove extra code from actions.xml that you did not adjust
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 2011What to look for when your changes are notshowing up Flickr: gfpeck
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20111. Make sure the theme is installedZMI > portal_quickinstaller
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20112. Restart your instance* .zcml* .py* new z3c.jbot override
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20113. Turn on Development modeZMI > portal_cssZMI > portal_javascripts
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20114. Generic Setup - XML Files* import changes in ZMI > portal_setup > import tab
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20115. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
    • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20115. Skins OrderZMI > portal_skins > properties tab
    • PLONE SYMPOSIUM EAST 2011 eck outCh .com/ demossix feetup