0
PLONE SYMPOSIUM EAST 2011Plone Theming in a     Nutshell    Chrissy Wainwright
Create the Theme                                          PLONE SYMPOSIUM EAST 2011$ paster create -t plone3_themeFrom the...
Install the Theme                                            PLONE SYMPOSIUM EAST 2011Add your new theme to buildout.cfg i...
Change the Logo                                       PLONE SYMPOSIUM EAST 2011The name of the logo image to be used can b...
Apply Styles                                            PLONE SYMPOSIUM EAST 2011Put a file into your theme/skins/styles f...
Generic Setup                                          PLONE SYMPOSIUM EAST 2011Generic Setup is the connection betweencon...
Generic Setup                                             PLONE SYMPOSIUM EAST 2011* portal_actions : Action Providers : a...
Find Original Templates                                         PLONE SYMPOSIUM EAST 2011Using omelette, you can find the ...
Identify Plone Elements: Viewlets                                    PLONE SYMPOSIUM EAST 2011
Override Viewlets                                            PLONE SYMPOSIUM EAST 2011From plone/app/layout/viewlets:* vie...
Override Viewlets                                             PLONE SYMPOSIUM EAST 2011Put overrides into theme/browser:* ...
Override Viewlets: z3c.jbot                                          PLONE SYMPOSIUM EAST 2011Or use z3c.jbot!In theme/bro...
Override Viewlets: z3c.jbot                                      PLONE SYMPOSIUM EAST 2011Templates can now go intotheme/b...
Identify Plone Elements: Portlets                                    PLONE SYMPOSIUM EAST 2011
Override Portlets                                           PLONE SYMPOSIUM EAST 2011In theme/browser/configure.zcml:<incl...
Override Templates                                       PLONE SYMPOSIUM EAST 2011If the original template is found in ski...
Editing Actions                                               PLONE SYMPOSIUM EAST 2011Parts of the site that use actions:...
Editing Actions                                        PLONE SYMPOSIUM EAST 2011* ZMI > portal_actions* Export Action Prov...
Common Stumbling Blocks                                        PLONE SYMPOSIUM EAST 2011What to look for when your changes...
Common Stumbling Blocks                                      PLONE SYMPOSIUM EAST 20111. Make sure the theme is installedZ...
Common Stumbling Blocks                           PLONE SYMPOSIUM EAST 20112. Restart your instance* .zcml* .py* new z3c.j...
Common Stumbling Blocks                              PLONE SYMPOSIUM EAST 20113. Turn on Development modeZMI > portal_cssZ...
Common Stumbling Blocks                                     PLONE SYMPOSIUM EAST 20114. Generic Setup - XML Files* import ...
Common Stumbling Blocks                                       PLONE SYMPOSIUM EAST 20115. Check the custom folderZMI > por...
Common Stumbling Blocks                                      PLONE SYMPOSIUM EAST 20115. Skins OrderZMI > portal_skins > p...
PLONE SYMPOSIUM EAST 2011   eck outCh           .com/ demossix feetup
Upcoming SlideShare
Loading in...5
×

Plone Theming in a Nutshell

2,090

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,090
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Plone Theming in a Nutshell"

  1. 1. PLONE SYMPOSIUM EAST 2011Plone Theming in a Nutshell Chrissy Wainwright
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. 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
  6. 6. 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/
  7. 7. 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
  8. 8. 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/
  9. 9. Identify Plone Elements: Viewlets PLONE SYMPOSIUM EAST 2011
  10. 10. Override Viewlets PLONE SYMPOSIUM EAST 2011From plone/app/layout/viewlets:* viewlet-specific code in configure.zcml* viewlet template
  11. 11. 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
  12. 12. 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” />
  13. 13. 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
  14. 14. Identify Plone Elements: Portlets PLONE SYMPOSIUM EAST 2011
  15. 15. 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” />
  16. 16. 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
  17. 17. 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)
  18. 18. Editing Actions PLONE SYMPOSIUM EAST 2011* ZMI > portal_actions* Export Action Providers* remove extra code from actions.xml that you did not adjust
  19. 19. Common Stumbling Blocks PLONE SYMPOSIUM EAST 2011What to look for when your changes are notshowing up Flickr: gfpeck
  20. 20. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20111. Make sure the theme is installedZMI > portal_quickinstaller
  21. 21. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20112. Restart your instance* .zcml* .py* new z3c.jbot override
  22. 22. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20113. Turn on Development modeZMI > portal_cssZMI > portal_javascripts
  23. 23. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20114. Generic Setup - XML Files* import changes in ZMI > portal_setup > import tab
  24. 24. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20115. Check the custom folderZMI > portal_skins > customZMI > portal_view_customizations > contents
  25. 25. Common Stumbling Blocks PLONE SYMPOSIUM EAST 20115. Skins OrderZMI > portal_skins > properties tab
  26. 26. PLONE SYMPOSIUM EAST 2011 eck outCh .com/ demossix feetup
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×