How to Get Started Theming Plone
Upcoming SlideShare
Loading in...5
×
 

How to Get Started Theming Plone

on

  • 1,765 views

 

Statistics

Views

Total Views
1,765
Views on SlideShare
1,671
Embed Views
94

Actions

Likes
5
Downloads
25
Comments
0

2 Embeds 94

http://www.scoop.it 86
https://si0.twimg.com 8

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

How to Get Started Theming Plone How to Get Started Theming Plone Presentation Transcript

  • PLONE SYMPOSIUM EAST 2012How to Get Started Theming Plone Chrissy Wainwright
  • Choose Your Own Adventure PLONE SYMPOSIUM EAST 2012You are given a Plone 4 site without any styles.Do you:Build a Diazo theme... go to slide 3Build a traditional Plone theme... go to slide 6Make changes in the site... go to slide 18
  • Diazo Theming PLONE SYMPOSIUM EAST 2012Why you would choose a Diazo theme:* You have already built a static theme* The theme needs a lot of Plone elements moved around* You want to keep the theme completely separate* You don’t have time to learn the ins and outs of Plone View slide
  • What is Diazo? PLONE SYMPOSIUM EAST 2012Diazo allows you to take a static theme (HTMLfile with CSS, JS, etc) and hook the dynamic Ploneelements into it using a set of rules. View slide
  • Diazo Rules PLONE SYMPOSIUM EAST 2012<replace css:theme=”#logo” css:content=”#portal-logo”/><after css:theme-children=”head” content=”/html/head/script” /><drop css:theme=”#column-two” if-content=”not(//*[@id=’portal-column-two’])”/><copy attributes=”class” css:content=”body” css:theme=”body”/>
  • Traditional Plone Theming PLONE SYMPOSIUM EAST 2012Why you would choose a traditional theme:* You already know how to do Plone theming* You are only making minor template and styling changes* You are stuck using an older version of Plone* You want to be able to make theme changes in-site later * * coming soon in plone.app.theming!
  • Change the Logo PLONE SYMPOSIUM EAST 2012The name of the logo image to be used can befound and changed in base_properties.propsPut your new logo in skins/images/ and makesure the name matches that in base_properties,or that it is the same filename as the current logo,which will override it.
  • Apply Styles PLONE SYMPOSIUM EAST 2012Put a file into your theme/skins/styles foldercalled ploneCustom.cssCreate new CSS files by putting them in the stylesfolder, and adding them to the CSS registry.cssregistry.xml - Generic Setup - portal_css
  • Generic Setup PLONE SYMPOSIUM EAST 2012Generic 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 2012 * 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
  • Finding Plone Templates PLONE SYMPOSIUM EAST 2012Using omelette in your buildout, you can find thetemplates you want to override.Viewlets: plone/app/layout/viewletsPortlets: plone/app/portlets/portletsOther templates: Products/CMFPlone/skins/
  • Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2012
  • Overriding Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2012z3c.jbot can be used when you need to maketemplate changes to a viewlet.In theme/browser/configure.zcml:<include package=”z3c.jbot” file=”meta.zcml” /><browser:jbot directory=”template-overrides” layer=”.interfaces.IThemeSpecific” />
  • Override Viewlets: z3c.jbot PLONE SYMPOSIUM EAST 2012Templates 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 2012
  • Overriding Portlets PLONE SYMPOSIUM EAST 2012In theme/browser/configure.zcml:<include package=”plone.app.portlets” /><plone:portletRenderer portlet=”plone.app.portlets.portlets.events. IEventsPortlet” template=”events.pt” layer=”interfaces.IThemeSpecific” />
  • Overriding Content Type Templates PLONE SYMPOSIUM EAST 2012If 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
  • Custom Folder (In-Site Changes) PLONE SYMPOSIUM EAST 2012This method is not recommended for completelytheming your site! Only for making quick fixes.ZMI > portal_skins > customZMI > portal_view_customizations
  • Custom Folder Overrides PLONE SYMPOSIUM EAST 2012In portal_skins, open the template you want tooverride (e.g. plone_content > document_view).Click the customize button. This will create acopy in the custom folder so you can now makechanges.
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 2012What to look for when your changes are notshowing up Flickr: gfpeck
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20121. Make sure the theme is installedZMI > portal_quickinstaller(or Site Setup > Add-Ons)
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20122. Restart your instance after certain changes* .zcml* .py* new z3c.jbot override
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20123. Turn on Development modeZMI > portal_cssZMI > portal_javascripts
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20124. Generic Setup - XML Files * import changes in ZMI > portal_setup > import tab
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
  • Common Stumbling Blocks PLONE SYMPOSIUM EAST 20125. Skins OrderZMI > portal_skins > properties tab
  • PLONE SYMPOSIUM EAST 2012 eck outCh .com/ demossix feetup