Home

Plone 3 Theming

1. As you can see there s a way to copy any HTML node and get its XPath expression When you paste what s now on your clipboard you will see id content 292 Download at Boykma Com Chapter 15 and that s the XPath expression that uniquely identifies that part of the page You probably recognize this from our original rules xml file That s the node you re looking for in the Plone source and you use the same approach to find the node you want to replace in your theme html You don t have to teach yourself XPath just arm yourself with Firebug and make use of its built in support for these expressions _ Deliverance has implemented support for CSS like syntax that is amp content instead of id content which is certainly easier to remember The XPath based syntax works equally well in both XDV and Deliverance though Let s go over the available rules next Rules Overview Luckily what goes in the rule file is very simple there are only four types of rules and you ll get the hang of them quickly The rules are e Replace e Append prepend e Copy e Drop Let s look at what they do and show some real world examples of how they are used lt replace gt It replaces an element in the theme with content from the site Real world examples A useful thing to do is to carry over the lt title gt and lt base gt tags from Plone so the theme will have the right pag
2. 166 Download at Boykma Com Chapter 8 If this variable was defined in the lt dt gt tag it would not be usable inside lt dd class portletItem gt as it would be out of scope and only available inside the lt dt gt lt dt gt tags tal condition statement A conditional is one of the first concepts you learn in programming It allows you to test if something is or is not true and act upon the result of that condition For example If it s hot out we ll go swimming If it s not we ll stay home We use the tal define expression as follows to tell us if the condition will be true or false lt div tal define blazing hot python False gt lt p tal condition blazing hot s gt We ll go swimming lt p gt lt p tal condition not blazing hot gt We ll stay home lt p gt lt div gt In this example the variable blazing_hot will evaluate as false because we are expressly setting the Python Boolean value for false In Python any string that s not empty such as will evaluate to true Empty tuples lists and dictionaries as well as strings the number 0 the Boolean False and the value None all will resolve to false As a result the final output is We 11 stay home In the following statement the tal define sets the variable blazing_hot to resolve as true lt div tal define blazing hot python True gt lt p tal condition blazing hot gt We ll go swimming lt p gt lt p tal cond
3. Download at Boykma Com Preface Questions You can contact us at quest ions packtpub comif you are having a problem with any aspect of the book and we will do our best to address it 6 Download at Boykma Com Theming Plone 3 An Overview For those of you who are unfamiliar with Plone or this is your first introduction to it Plone is a content management system CMS A CMS is a tool that enables webmasters to manage their web sites content easily through the web TTW Plone provides additional support by auto generating navigation elements making content searchable allowing for multilingual content handling permissions and security and much much more In comparison to other CMS platforms Plone is extremely stable secure and is actively working toward increased adoptability One of the most common needs with a CMS web site is the ability to change the look and feel As with any framework building a design around a CMS introduces special challenges With Plone the process of separating content from presentation is not entirely straightforward By the end of this book you will have the knowledge to create your own robust Plone themes and understand where the line is drawn between content and presentation Specifically this book is geared toward web designers with little or no knowledge of Plone who need to theme a Plone web site This chapter will explore the origins of Plone as well as analyze the current
4. input searchButton background color transparent background image none border 0 padding 1px searchGadget padding 3px 0px We then apply some light styling to the livesearch drop down menu to give it a white background color and no borders LSIEFix background color fff LSRow border 0px legend livesearchLegend background color fff 214 Download at Boykma Com Chapter 10 As seen above we also disabled the background magnifying glass image on the search button that Plone usually gives us input searchButton and instead do not use a background image at all Additionally we removed the background color and the border around that button plus a little padding We want to render an actual image as the search button To do so we must modify the viewlet that renders the searchbox By now you should be beginning to get familiar with the procedure find the ZCML for the viewlet and find the Python class code and template Then copy them to our theme product and modify each to fit our requirements Open configure zcml and common py found in mybuildout buildout cache eggs plone app layout some version number plone app layout The configure zcml file gives us the following code lt The search box gt lt browser viewlet name plone searchbox manager interfaces IPortalHeader class common SearchBoxViewlet permission zope2 View gt Aga
5. At the same time we must also hide the default searchbox viewlet provided by Plone Notice how the new viewlet is assigned to the skinname Guria Theme for the Plone Theming Book and the hidden viewlet is hidden also from the Guria Theme for the Plone Theming Book skinname This skinname comes from the profiles zcml file in our theme The format is like this because we are extending base Plone and we don t want to remove any of the power from Plone Default There are other viewlets that have been manipulated here in viewlets xml and we ll get to those momentarily It s worth noting that insert before or insert after syntax may not work this is fixed in later versions of Plone 3 x and you might have to reorder the viewlets by hand using the manage viewlets tool http localhost 8081 mysite manage viewlets We re not going to worry about ordering of viewlets in this case Moreover there is some jeopardy in moving viewlets into the IPortalTop viewlet manager The point of keeping viewlets in IPortalHeader is that we have Skip to Content and Skip to Navigation links that have to be at the top of the page when viewed ina text or voice browser for accessibility reasons If we move any viewlet to IPortalTop and place it above IPortalHeader those useful links are not at the topmost part of the page This in turn weakens the accessibility of the Plone site It might make more sense to create a new viewlet manager directly bel
6. Download at Boykma Com Chapter 5 Once the profile is imported or the product is reinstalled the new profile steps will be processed The key is to only insert the pieces that are different from the base profile not rewrite the entire profile Be vigilant here as including more information than you actually want can cause unexpected behavior when your profile is installed or more likely can force you to duplicate and maintain too much of Plone s own base profile The point is that it s easy to insert the wrong XML code and thus to create problems with your GenericSetup so be thoughtful as you write this code and watch for traceback errors in your terminal window when you import your steps Moving portal actions configurations into a filesystem product The best way to understand how to use GenericSetup in practice is to have a practical example In this case assume that through the ZMI we have added some portal_tabs to our site Contents Properties Security Ownership Interfaces Find cMF Action Category at Dogwoodinitiative Dogwoodinitiative portal_actions portal tabs Help CMF Action Add Type Name Last Modified Position index_html Home 2008 08 15 16 39 bc heroes BC Heroes 2008 07 30 15 21 climate Climate 2008 07 30 15 21 democracy Democracy 2008 07 30 15 21 first nations First Nations 2008 07 30 15 22 communities Communities 2008 07 30 15 22 lands and forests Lands and Forests 2008
7. Download at Boykma Com Making Manual TTW Changes or What Not to Do A special tool was created to manage CSS stylesheets JavaScripts and KSS stylesheets called Resource Registries http plone org documentation tutorial working with resourceregistries which consists of portal_css portal_javascripts and portal_kss in the ZMI These registries give the option of consolidating multiple style or JavaScript files into a single cached file which causes them to load faster when a site is in production Putting your portal_css or portal_javascripts into debug mode turns off this merging Resource Registries solve an important problem how do we develop our style and JavaScript sources in a granular way in which each source does only what it needs to do without creating a proliferation of downloads to the browser which has a terrible performance impact In addition to merging sources so that the browser sees fewer downloads these registries also provide cache control and compression services Resource Registries also allow you to add reorder and enable or disable CSS or JavaScript files at the click of a button Reordering of resource files is important in determining how your product renders in much the same way that skin layer orders are important You can optionally provide conditional statements for these files for example only use this stylesheet if you are in the home page section or only use this stylesheet if the
8. install the theme We want to make some changes first However we will point out some caveats along the way in case you installed the theme prematurely Altering the theme product s structure Several modifications have been made to the theme product s structure to shorten folder names and change the default behavior Again this is mostly a personal preference Let s take a look at these changes and how they were achieved Renaming the theme In our theme product you will see a file named profiles zcml located at mybuildout src plonetheme guria plonetheme guria profiles zecml The code looks like this lt configure xmlns http namespaces zope org zope xmlns genericsetup http namespaces zope org genericsetup i18n_domain plonetheme guria gt lt genericsetup registerProfile name default title Guria Theme for the Plone Theming Book directory profiles default description Extension profile for the Guria Theme for the Plone Theming Book Plone theme provides Products GenericSetup interfaces EXTENSION Ja lt configure gt 183 Download at Boykma Com Creating Installing and Tweaking our Theme If you named your theme in a way that was less descriptive you could alter the title Naming your theme product properly is important because you may have different types of products used for a given web site for example a policy product for content that might be used in tandem with your theme
9. Webpage DOM Color Analyzer Dom Inspector Firebug Resample Last Location Add Color to Favorites Clear Status Bar Copy rgb 78 118 84 Copy rgb 31 46 33 Copy 4E7654 Copy 4E7654 Copy R 78 G 118 Options gt Help gt You can automate copying the selected color in either RGB or Hexadecimal format by turning on the Auto Copy option under the Options menu 34 Download at Boykma Com Chapter 2 ars b oO GREEN ABOUT GREEN COLLAR JOBS MEDIA ROOM GET INVOLVED RESOURCES Pi oo CU Bimet Benian Matita laaa beder HG Color Picker Eyedropper 3 Palette Browser Our goal SIGN UP WEER aga DOM Color Analyzer to build an inclusive green SEE economy strong enough to Firebug lift people out of poverty Zoom gt TELL A F DONATE Resample Last Location N JoNus Add Color to Favorites i Clear Status Bar Change Eyedropper Shortcut Copy rgb 78 118 84 oe PR Copy rgb 31 46 33 Color Picker gt ay econ Don t Change the Cursor for Eyedropper v Outline Hovered Elements Ci R 78 G 118 SPY I 8 v Show Page Context Menu Options B v Enable Panning Show Hex Codes in Lowercase Y Enabled Hide Copy rgb R G B Auto Copy Copy rgb R G B iv Copy RRGGBB Statusbar Format Copy RRGGBB Additionally you can capture the entire color palette of that site and save it for future reference
10. What is Plone really The following is an overview of Plone e Plone is an open source CMS Plone is a downloadable content management system that is built on the powerful and free Zope application server Plone is easy to set up extremely flexible and provides tools for managing the content of large web sites extranets intranets government and educational sites and even social networking sites Plone is licensed under the GNU General Public License the same license used by Linux This gives you the right to use Plone without a license fee and to improve upon the product e Plone has the tools you need Plone provides numerous out of the box and add on tools that make working with content easier These include kupu the powerful visual editor built into Plone and PloneFormGen a tool for creating quick and easy forms Plone also includes the ability to integrate with other open source tools databases page compositors e commerce solutions and more Plone may not have as many add ons as frameworks like Drupal but you can feel secure in knowing that the popular add ons for Plone are generally quite stable and thoroughly vetted by the community 9 Download at Boykma Com Theming Plone 3 An Overview Plone is easy to install You can install Plone by going to http plone org products plone and downloading the Plone installer that is the right option for you Simply run the installer follow the README txt and yo
11. pauleveritt wordpress com a long time ago and was further enhanced by Ian Bicking http www ianbicking org who is its current maintainer Along the way Deliverance got more powerful and expanded beyond the initial goals and started handling cases that were not included in the original scope 282 Download at Boykma Com Chapter 15 Long story short a new implementation of the same basic approach was started called XDV This is a stripped down pure XSLT implementation of the Deliverance concept and can be compiled down and used directly inside a web server such as Apache IIS or nginx pronounced Engine X as a standard XSLT transform without any extra software running This does not mean that XDV is somehow better than the original Deliverance implementation or that it makes it obsolete they are different tools with slightly different goals sharing the same basic approach We ll get to an overview of which approach is appropriate for what cases in a moment The final piece of this puzzle is the add on called collective xdv http pypi python org pypi collective xdv which takes XDV and packages it up to make it very convenient for use with Plone ss The collective namespace is a common pattern in Plone add ons It K denotes software that is managed collectively by the Plone community and not necessarily by the Plone Foundation Why do you need to know all this It s useful to keep in mind that
12. Download at Boykma Com Chapter 5 Changing base_properties Good web designs typically use a limited color palette and design elements such as border styles and font styles may appear in several places in a page In implementation this means that a limited set of CSS attributes often appear many times in a site s stylesheets However separately entering those attributes over and over again in a set of stylesheets would be error prone and make for difficult maintenance It would also make it impossible for style elements furnished in different add on products to share these attributes The CMF s solution to this problem is to share information on commonly used attributes in named properties in a Zope property sheet A property sheet is basically just a collection of named properties in a single object Using a shared property sheet with properties such as borderStyle stylesheets can include references by name to those properties rather than fixed specifications Also any third party product that needs to use a site s common border style can do the same thing dramatically increasing the likelihood that a third party s add on will fit in with your site The actual name of the base property sheet on the filesystem is base properties props and it can be found in parts plone CMFPlone skins plone_ styles It can also be found in the ZMI in portal_skins plone_styles A quick examination of this file shows that it contains information
13. from a repository other code here instance eggs other eggs here plonetheme mytheme this tells buildout that you ll be using your theme with Plone 69 Download at Boykma Com Create and Install a Theme Product zcml other zcml slugs here plonetheme mytheme this tells zope that your product exists These sections may not follow exactly each other in the buildout cfg file so be careful to add your code in the right place Since we have made changes to your buildout you now need to rebuild your buildout with the following command for these changes to be read by Zope You should be in your buildout s directory when you run this command It might be named zinstance or similar depending on how your buildout is set up Just make sure you re above the bin directory bin buildout You may use the following command to run buildout offline if you don t need any new external components it s a good bit faster bin buildout o Advanced users may optionally want to look into the eggtractor egg http pypi python org pypi buildout eggtractor to cut down on some of the boilerplate needed in buildout cfg when adding new eggs to the src directory Similarly in cases where you have modified your ZCML adding an egg y you can often avoid rerunning your buildout by including an egg called plone reload http pypi python org pypi plone reload i in your buildout and going to http loca
14. lt div gt The python here tag fragment will render an entire image tag complete with width and height attributes The structure syntax allows us to insert it without having it HTML escaped 175 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language Order of operations In TAL the logic in which operations occur is fairly intuitive It generally occurs in the following order define condition repeat content or replace attributes omit tag Think of it this way you can t attach an attribute value that hasn t yet been defined or proven to exist As you get used to how page templates are constructed you ll see that they follow this general order of operations Built in names in TALES The following is a list of the names that are always available to TALES expressions in Zope and which you may often see in your page templates These are considered reserved words You can read more about these here http wiki zope org ZPT TALESSpecification13 nothing a special value used to represent a non value for example void None Nil NULL default a special name for the contents data of a tag This is usually only used in tricky bits of code options the keyword arguments passed to a template These are generally available when a template is called from methods and scripts rather than from the Web repeat the repeat variables See the tal repea
15. lt a tal attributes class string audience selected audience audience id href audience url title audience description tal content audience title s gt Link Name lt a gt lt li gt lt ul gt lt span gt 124 Download at Boykma Com Chapter 6 Write the GenericSetup steps to create the new CMF action category Next we need to create a file called actions xm1 and place that in our theme product s profiles default folder We will populate it with the following code lt xml version 1 0 gt lt object name portal_ actions meta_type Plone Actions Tool xmlns i18n http xml zope org namespaces il18n gt lt object name audience navigation meta_type CMF Action Category purge False gt lt property name title gt Audience Navigation lt property gt lt object name example meta_type CMF Action gt lt property name title gt Example Audience lt property gt lt property name description gt The description of the audience is available on mouseover in the audience navigation viewlet lt property gt lt property name url_expr gt string globals view navigationRootUr1 example lt property gt lt property name icon_expr gt lt property gt lt property name available expr gt lt property gt lt property name permissions gt lt element value View gt lt property gt lt property name visible gt True lt property gt lt object gt lt object gt
16. For testing against Internet Explorer IE provides a tool called the Web Developer Toolbar for debugging It is available for both IE6 and IE7 as an add on and can be downloaded here http www microsoft com downloads details aspx FamilyId E59C3964 672D 4511 BB3E 2D5E1DB91038 amp displaylang en Web Developer Toolbar will no longer be the tool of choice for IE8 however instead use the developer tools included with IE8 GS To use the developer tools in IE8 press Shift F12 or click the Developer Tools icon in the command bar to begin using the tool For IE6 and IE7 Web Developer Toolbar provides several features for exploring and understanding web pages These features enable you to e Explore and modify the document object model DOM of a web page e Locate and select the specific elements on a web page e Selectively disable the Internet Explorer settings e View HTML object class names IDs and details such as link paths tab index values and access keys 22 Download at Boykma Com Chapter 2 e Outline tables table cells images or selected tags e Validate HTML CSS WAI and RSS web feed links e Display image dimensions file sizes path information and alternate ALT text e Immediately resize the browser window to a new resolution e Selectively clear the browser cache and saved cookies Choose from all objects or those associated with a given domain e Display a fully featured design r
17. In Plone there are two main ways of enabling a custom browser layer interface The first is to use the mechanism of plone theme often referred to as IThemeSpecific This package which ships with Plone by default allows us to link a browser layer with a particular theme skin in portal_skins not to be confused with a skin layer When a theme is installed in portal_skins as the default theme the layer is in effect This is useful for products that install a whole new theme in Plone It s sort of like applying a name tag to your theme product Other types of Plone products make use of a plone browserlayer package which is similar to plone theme and allows layer installation to be additive Themes do not have this functionality 113 Download at Boykma Com Working with Zope 3 Components The IThemeSpecific interface mentioned above is provided with a Plone theme product by default through plone theme and located in your interfaces py file found in plonetheme mytheme browser from plone theme interfaces import IDefaultPloneLayer class IThemeSpecific IDefaultPloneLayer Marker interface that defines a Zope 3 browser layer nun What the previous code says is that the interface ThemeSpecific is based on an interface named IDefault PloneLayer defined in another section of the Zope Plone stack and is able to use all of the functionality that IDefaultPloneLayer provides In practice what this means is that
18. OUR NEW DIRECTIONS s rship a L nology yement x a AN y i bd Eg Inspect Edit img lt a img new age banner lt div header top lt div portal header lt div portal top lt div visual al wrapper lt body secti front page lt Q eo Console HTML CSS Script DOM Net YSlow Options v Style Layout DOM Options Vv lt html Lang en us xml Lang en us xmLns http www w3 org 1999 xhtmL gt img base cac y1463 css line 21 gt lt head gt border medium none y lt body class section front page template document_view kssActive dir ltr gt vertical align middle y lt div id visual portal wrapper gt V lt div id portal top gt Inherited from a img new directions homepage banner y lt div id portal header gt Ballitt fo_lon vision gt lt div id siteactions wrapper gt al y1463 css line 17 gt lt p class hiddenStructure gt sens iv ide color 184688 gt lt div id portal searchbox gt gt lt a id portal logo href http bullitt org accesskey 1 gt y lt div id header top gt Inherited from body section front page gt lt a id img urban ecology class homepage banner href http bullitt pody base cac y1463 css Jine 7 gt lt a id img leadership civic engagement class homepage banner href Toter 555555 gt lt a id img ecosystem services class homepage banner href http bu font family Helvetica Lucida y lt a id img new directions class homepa
19. tal attributes statement First let s look at an example of a tal attributes expression that is used for img src or href to change a class lt img src doesn t matter because it will be subbed out dynamically tal attributes sre string http google com logo jpg gt In this example the src attribute is being assigned the string http google com logo 4jpg which is the image that will render Multiple attributes In this example we have more than one attribute and separate them via semi colons lt img src doesn t matter because it will be subbed out dynamically tal attributes sre string http google com logo jpg alt string Google s Logo width string 40px gt Not including the semi colons will cause a traceback error and the page will not render Nothing dynamic is really happening in these examples we re just pulling in an image src that is explicitly defined right in our page template 165 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language tal define statement This type of expression defines a variable that we can use later in our page templates If you recall we mentioned that XHTML forces us to use well formed pages with correct nesting Using tal define we can define a variable that is within the scope specific to a part of a page but not usable outside of that scope For example here we see a simple variable definition lt p tal defi
20. Customizing the resource Since we have already created a theme product in the previous chapter added it to our buildout and installed it we will start with Step 4 Note that most of these steps are taken care of by the boilerplate that is generated for you but it s worth looking at the code that handles these steps Don t worry if you don t understand everything we cover here we re going through it to give you an idea of the architecture of your theme product Most themers won t need to make changes to these parts of the generated code Register the filesystem directory view To register this product as a filesystem directory view or basically provide a hook into the folders contained within your filesystem product the init__ py file in the root of your filesystem product must be modified so that Plone can see it This happens automatically as long as you answered yes to creating a Zope 2 product when you ran the plone3_theme recipe and you should def initialize context Tnitializer called when used as a Zope 2 product We must ensure that this package is a Zope 2 product If it is in the magical Products namespace for example a traditional product placed in the Products directory of a Zope instance then this happens automatically If we are using an egg based product in a different namespace which is what the plone3_theme recipe does we add the following code to the package s configure zcml file This boilerpl
21. In addition the Related Items pop up window should be checked to verify that the text is readable On dark backgrounds it can be hard to read so you may wish to style that window to have a lighter background color This window can be found on the Categorization button you see when you edit a piece of content and the class is popup 277 Download at Boykma Com Deploying and Contributing Themes e Another easy to forget task is to verify that any styles that need to be added to the visual editor are indeed added via Site Setup or that this is addressed via a kupu xml or similar file in your theme s profiles default directory Feel free to check out this theme for an example on what the xm1 file might look like http plone org products webcouturier hosting theme You may even want to put comments in your CSS file as a reminder to set these styles up for the end user e It s not always necessary to test how a web site prints out as typically Plone defaults to suppressing the left and right columns in print mode However if there are viewlets that you want suppressed that Plone doesn t know about by default you should print out a page and make sure it looks acceptable In cases where you are working on something like a magazine or newspaper web site this is especially critical You can adjust print css dtm1 if there are elements that need to be hidden You may also wish to test the presentation mode that is available
22. because they were picking up the dark brown color of the background I then adjusted the columns a bit to control the padding margins and background colors for portal column one the left column portal column two the right column and portal column content the middle column portal column one and portal column two both pick up the widths defined in base_properties props kkkkkk Kk RR kk COLUMNS portal columns margin top 5px padding 5px background color fff portal column one background color 9d8d6b portal column one visualPadding padding 0em Oem Oem Oem 200 Download at Boykma Com Chapter 10 portal column two background color fff portal column two visualPadding padding 0em portal column content padding 0em Here we are just establishing some basic padding background colors and default widths The first column should be the width of the logo or 195 pixels Although we do not have a second column visible because we removed the right hand column in the previous chapter we can set a default width in case we choose to add right hand portlets at a later time Rather than doing this in our stylesheet we can do this in our base properties file as seen here columnOneWidth string 195px columnTwoWidth string 195px This design does not lend itself well to having right hand portlets as it is quite skinny and specifical
23. directory Within its cssregistry xml file is a much larger listing of XML that defines exactly what CSS files will be loaded when a base Plone site is installed This means that since your site uses base Plone and has its own profiles the profiles are additive This is where snapshots come in handy 91 Download at Boykma Com Making Manual TTW Changes or What Not to Do Taking snapshots When working with GenericSetup it s important to know what your site s profile looks like before you start making changes This is especially important if you are trying to resolve a GenericSetup conflict Before making any changes to your site s profile you should always make a snapshot of your site that will give you an opportunity to evaluate the XML at various points in time using the diff command It is very important to take a snapshot before making changes so that you can backtrack to the original profile if you need to Click on the Create a Snapshot button The site will appear to spin for a while and will actually never stop spinning due to an annoying but harmless flaw in this area It s possible that this might be fixed by the time you re reading this Wait for about 30 seconds then click on the Snapshots tab again and you will see a snapshot You may have better luck doing this with Firefox due to the fact that Firefox does not timeout as often This is due primarily to how your Apache may be configured Firefox is als
24. gt CSS page gsub 7 lt phpl gt 18 gt m gt Diff WHTML open curl sF uploaded_file 4 type text html http Convert Character Selection to Entitie validator w3 org check r do liol Convert Character Selection to Entiti io lt lt page io close_write while line io gets line gsub lt titles amp lt base href http validator w3 org gt OG URL Escape Line Selection e Decode Entities in Line Selection URL Unescape Line Selection line gsub Line Yd Column Yd Y i do Documentation for Tag lt a href txmt open Line 168co lumn 2 to_i 1 gt 8 lt a gt Encrypt Line Selection ROT 13 a end insert Entity puts line Insert Open Close Tag With Current end O insert Close Tag end Open Document in Running Browser s G Validate Syntax W3C Refresh Running Browser s l Entire D E Strip HTML Tags from Document Sel nput Entire Document G Wrap Each Selected Line in Open Clos f Add Persistent Include Output Show as HTML Update Document G Help Persistent Includes Insert Anchor O Insert CSS Link s Activation Key Equivalent BJ Ov Insert Flash Movie Swf a Insert Image With Dimensions ly Scope Selector text html trl Filter List 41 Download at Boykma Com Skinner s Toolkit There s even a Zope Plone TextMate suppor
25. homeTable ul padding 0 5em 0 7em lem lem homeTable tbody tr td ul li margin 0 homeTable ul li a homeTable ul li a hover 234 Download at Boykma Com Chapter 11 homeTable ul li a visited color amp dtml fontColor homeTable p margin 0 padding 0 5em 0 3em 0 3em 2 5em p orangeText color cd8c04 Then we add these styles to the visual editor On our web site go to the visual editor s configlet found at http localhost 8080 mysite kupu_library_tool kupu_config At the bottom of the page is a Styles box where you can insert new styles that you want to provide to your site s content administrators We will insert the following styles homeTable Table with brown headers in the Tables area and Orange Text p orangeText in the Styles area Then press Save Styles Tables Enter a list of class names to be made available in the table drawer homeTablelTable with brown headers plain Subdued grid invisiblel Invisible grid listinglFancy listing grid listinglFancy grid listing met ertical listinglFancy vertical listing y Styles Enter a list of styles to appear in the style pulldown Format is title tag or title tag className one per line Heading h2 0 Subheading h3 range Text plorangeText Literallpre Discreet p discreet Pull quote div pullquote I i HTML Filter Please use the Plone HTML filter control panel to set filtering opt
26. href attribute to each site_action s list item anchor tag lt ul id portal siteactions tal define accesskeys python sitemap 3 accessibility O contact 9 tal condition view site actions i18n domain plone gt lt li tal repeat saction view site actions tal attributes id string siteaction saction id gt lt a href tal define title saction title id saction id accesskey python accesskeys get id i18n attributes title i18n translate tal content title tal attributes href saction url title title accesskey accesskey gt Site action lt a gt lt li gt lt ul gt If there are no visible site_actions defined in the ZMI in portal_actions nothing will render as the condition resolves to false 168 Download at Boykma Com Chapter 8 tal content statement Next we look at the tal content expression In our first example we see that our tal content expression outputs the value of the variable myvariable inside the current tag replacing the current contents Let s take this expression lt p tal define myvariable string hello world gt This text will render lt strong tal content myvariable gt This is invisible lt strong gt lt p gt It in turn becomes lt p gt This text will render lt strong gt hello world lt strong gt lt p gt How this works in Plone A simple example of a tal content expression would also be lt title tal
27. http www copperriver org illustrates how slices might be used The original Adobe Photoshop document is here COPPER RIVER WATERSHED PROJECT TOUR OUR WATERSHED Photos maps and information 16 8 17 Ea Mg Bas ABOUT US PROGRAMS EVENTS GET INVOLVED DONATE BUY FISH 25 5 FAE You are here Home INFORMATION FOR Z Our Tribes Ges Lorem ipsum dolor sit amet consectetuer adipiscing elit Aliquam imperdiet lacus f Our Businesses Sar TN i vitae neque placerat elementum Aliquam erat volutpat Suspendisse lobortis nibh i GuniGommerciahtishers S aconsequat tristique magna arcu viverra metus vel bibendum nisl velit et urna Sed tincidunt odio Donec sed dolor vitae pede venenatis dignissim Nullam dapibus i Our Local Leaders i Vestibulum condimentum ligula sit amet ante Visitors NEWS EVENTS If you look closely you can see a few key slices the Go button next to the search field has been sliced as has the Tour Our Watershed map and the gradation on the top navigation which will be tiled horizontally Below the orange navigation is a long slice that spans from the left hand shadow over to the right hand shadow This image can be used to tile the length of the page Additionally the entire Information For box has been sliced in this case for the final implementation the text overlaying this slice was hidden and replaced with rendered text If you look at the finished web site you can
28. important background color fff documentActions li le background color fff gend background color transparent 199 Download at Boykma Com General Styling and Templating Changes We have a brown background for our site but not because we have defined it in our stylesheet Instead we are relying on Plone s default styling found in CMFPlone s base css and base properties props files body font amp dtml fontBaseSize lt dtml var fontFamily gt background color amp dtml backgroundColor color amp dtml fontColor margin 0 padding 0 The code that we did add in our stylesheet above sets the width of the wrapper around the content of the site and gives it some basic padding and margin settings The auto settings for the margin left and margin right properties center the web site in the browser I also did some minor styling to the h1 header to give it a brown background color and white text plus some padding I added a dotted border below the h2 heading and lastly I added some padding around the content in the center of the page and a white background color I use the important declaration to override the important declaration found in Plone s default public css stylesheet located at mybuildout parts plone CMFPlone skins plone_ styles I made the background color behind the document actions print email white as well and disabled the background color for legend areas
29. keeping the original markup instead of having to redo the design in a way that makes Plone happy e Let the theme work standalone without introducing any additional markup It should look like a standard HTML page with CSS JS and images About the future of theming in Plone For the upcoming versions of Plone we are ninety nine percent sure that we ll use a variant of what is described here It will probably change slightly in how it integrates into the product and what knobs are available to deploy a theme in a standard way but the fundamental approach will be the same What we are offering you with the collective xdv package is a way to make use of the likely future standard of theming today We ll keep this document updated as Plone progresses with newer versions and if you re reading this documentation in a book or another printed version always check at http plone org theming to view the latest version of this document Is XDV ready for serious deployments Currently the plone org web site itself is using XDV for its theme so it s battle tested and ready for serious high traffic sites Background and history Before starting let us explain briefly the history of XDV and the reason it exists When people talk about this new approach to theming they will often refer to the general approach as Deliverance based The original Deliverance project http deliverance openplans org was started by Paul Everitt http
30. likely make numerous small check ins until all of your code is safe in Subversion Hardy command line users control their svn repositories with svn command lines But there are excellent graphical interfaces available for Subversion on every major platform Many of these integrate with Explorer on Windows or Finder on OS X The Subversion bundle that ties into TextMate makes it extra helpful to keep your projects in sync Generally if you are not using Leopard OS X you will need to install the Subversion client http subversion tigris org getting html Macintosh users who have MacPorts can also install it by typing the following into a terminal window sudo port install subversion 54 Download at Boykma Com Chapter 3 MacPorts is an optional tool for Mac OS X that makes installing UNIX _ software easy and can be found here http www macports org amp It s wonderful but should not be needed by most theme development GA level OS X users We can use it to install GCC Python Python modules Subversion and other UNIX based tools The MacPorts Plone kit is extremely out of date however and should not be used Alternately Subversion support for OS X users is provided by the XCode tools However it only provides support for Version 1 5 and above and you need to have a local version of Subversion that matches the version of your Subversion repository Up to date copies of XCode are available for fr
31. lt property name available expr gt lt property gt lt property name permissions gt lt property name visible gt True lt property gt lt object gt lt object name climate meta_type CMF Action gt lt property name title gt Climate lt property gt lt property name description gt lt property gt lt property name url_expr gt lt property gt lt property name icon_expr gt lt property gt lt property name available expr gt lt property gt lt property name permissions gt lt property name visible gt True lt property gt lt object gt lt object gt lt object gt That s it Next time you install your product those items will be added to your web site However to minimize the risk involved in installing a product and having your GenericSetup clash with other GenericSetup steps it s usually best to go into portal_setup manage_snapshots tool and create a snapshot Then select the theme product that you re working on choose the actions option and import it into your web site The process is the same for all of the other XML files in your theme product 94 Download at Boykma Com Chapter 5 Skin layer customization the old fashioned way In addition to being able to alter many of the basic settings on a site via portal_actions users can also modify certain page templates images stylesheets JavaScripts and so on through the ZMI How Plone interprets these changes depend
32. portals and custom applications The Zope community consists of hundreds of companies and thousands of developers all over the world who work on building the platform and other Zope applications Zope and Plone are both written in Python an easy to learn widely used and supported open source programming language The security benefits available with Python as well as the cleanliness of code are great advantages for Plone By default Plone stores its contents in Zope s built in transactional object database the ZODB There are products and techniques however that allow sharing of information with other sources such as relational databases LDAP and more WSGI support is also now available with Plone which means even greater integration with other web applications WSGI is the basis of what makes Deliverance one of the possibilities in the future of theming for Plone possible Read the last chapter for more exciting information on Deliverance and collective xdv Plone runs on Windows Linux BSD Mac OS X UNIX Solaris and other platforms Double click installers are available for all platforms For full information and to download Plone see http plone org products plone Books about Plone Plone currently has approximately 8 books available several of which are out of date but a few of which are extremely helpful None of the books are specifically geared towards themers although sections of each are relevant e Released
33. 07 30 15 22 follow the money Follow the Money 2008 07 30 15 23 Rename Cut Copy Delete Import Export Select All Up Down by 1 v Top Bottom re r On AMF WN Fk To extract those to the filesystem it helps to see the necessary syntax first Go to portal_setup in the ZMI click on the Export tab select the actions option and export that selected step It will export a large file that contains all of the portal_actions information not just the information pertaining to the portal_tabs In this case we want to add the following CMF actions to the portal_tabs area BC Heroes e Climate 93 Download at Boykma Com Making Manual TTW Changes or What Not to Do You want to extract only the relevant information from that file into a new file named actions xm1 to be placed in the profiles default folder of your theme product lt xml version 1 0 gt lt object name portal actions meta_type Plone Actions Tool xmlns i18n http xml zope org namespaces i18n gt lt action provider name portal_actions gt lt object name portal_ tabs meta_type CMF Action Category gt lt property name title gt lt property gt lt object name bc heroes meta_type CMF Action gt lt property name title gt BC Heroes lt property gt lt property name description gt lt property gt lt property name url_expr gt lt property gt lt property name icon_expr gt lt property gt
34. 2008 ro group or Once we have added a few folders we need to adjust the settings of the navigation portlet Click on the Manage portlets link on the bottom right of the screen while on the home page or go to http localhost 8080 mysite manage portlets 193 Download at Boykma Com Creating Installing and Tweaking our Theme The navigation portlet has been added to the site by default Click on the Navigation portlet link You will see the following screen amp vedaw log out SITEMAP ACCESSIBILITY CONTACT SITESETUP Cas This portlet display a navigation tree Modify portlet Title The title of the navigation tree Leave blank for the default translated title Root node You may search for and choose a folder to act as the root of the navigation tree Leave blank to use the Plone site root search Search results gt parent About Us about us 3 browse gt parent lt Sponsorships amp Donations sponsorships donations gt browse gt parent Methodology methodology browse gt parent Activities amp Intervention activities intervention parent Users Members 3 browse gt parent News news 3 browse b parent Upcoming Events events update selection JT Include top node Whether or not to show the top or root node in the
35. 6Edition ZPT stx The objective of using a templating language is to output dynamic content while minimizing the amount of code in page templates Ideally templating languages should play nicely with tools that designers might use to theme around a web site In other words a tool like Dreamweaver should ignore code even if it cannot output the dynamic results An extra benefit is that if some basic best practices are followed designers should know what output is expected even if they don t understand the templating language itself Plone s page templating language TAL does all of these things Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language About ZPT ZPT is an invention of Zope Corporation and is based on XHTML which is HTML that conforms to stricter XML standards XHTML requires code to be well formed for example lt img gt lt span gt lt span gt and so on and it requires that code to be properly nested and always in lowercase form XHTML also allows you to create different sets of markup tags for new purposes For example you can create blocks of code using a syntax such as lt tal block gt lt tal block gt or lt metal block gt lt metal blocks to create better structured page templates CMFPlone s main_template pt is a good example of this code in action though it can also be found in any zpt or pt file The goal of TAL is to be a templating language that
36. 9 I then removed the highlighted code below from plonetheme guria plonetheme guria profiles default cssregistry xml lt stylesheet title id resource plonetheme guria stylesheets main css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt And replaced it with the following lt stylesheet title id guria css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt This in effect tells our theme product that we will be using a stylesheet named guria css or more correctly guria css dtm1 as we ll see ina moment This stylesheet does not yet exist so we have to create it I wanted the option of making use of the DTML behavior provided by Plone so that I could use certain base properties provided to us via the base_properties props file also located in our skins guria_styles folder DTML essentially allows us to use property sheet variables and apply changes on a more global scale The easiest way to create this new stylesheet is to go to your mybuildout buildout cache eggs Plone some version number Products CMFPlone skins plone_styles ploneCustom css and copy the contents of that file into a new stylesheet named guria css dtml in your theme s guria_styles folder located in the skins directory at mybuildout plonetheme guria plonetheme guri
37. 91 CodeSense 45 Collage 246 collection portlet 250 collective flowplayer about 264 features 264 265 collective skinny 249 collective xdv adding to Plone setup 285 collective xdv add on 281 Colorzilla about 34 features 34 palette accessing 36 palette capturing 35 common conventions for using stylesheets about 104 base Plone stylesheets overriding 105 bloat controlling 105 106 DTML support 105 file locations 105 CSS 21 CSS Plone site styling 229 CSS Edit about 42 CodeSense 45 features 44 Milestones interface 45 Selector Builder 45 starting 42 Validation inspector 45 CSSManager 247 CSS styling 229 custom browser layer interface about 113 enabling ways 113 plone browserlayer package 114 plone theme mechanism 113 custom theme product creating 181 182 folders adding 193 installing 188 191 installing ways 188 structure altering 183 viewlets customizing 192 web site content customizing 191 195 custom theme product structure folder names shortening 184 185 images adjusting 186 187 stylesheets adjusting 186 187 theme renaming 183 184 D debugging tools about 253 GloWorm 253 Pdb 255 traceback 255 default home page display changing basic page template using for home page view 236 237 CSS styles used 233 235 home page view rendering 237 Pyhton code using for home page view rendering 237 239 visual editor used 233 235 298 Download at Boykma Com Deliverance about 252 deplo
38. CMFPlone will give you a sense of all of the different things that could be styled Generally this boils down to the overall portlet styling header footer and so on individual link items link items in hover state and sub navigation The CSS here can be a little convoluted so you may find yourself fighting with it At this point if you install the theme it should look something like this don t forget to reorder your viewlets by hand if you need to However since we disabled the right hand portlets earlier in the chapter what you see might be slightly different TEN gt SITEMAP ACCESSIBILITY CONTACT Welcome to Plone fin USERS Congratulations You have successfully installed fm NEWS Plone fi EVENTS Also available in presentation mode fm TEST FOLDER If you re seeing this instead of the web site you were expecting the hh owner of this web site has just installed Plone Do not contact the Plone Team or the Plone mailing lists about this Send this Print this 231 Download at Boykma Com General Styling and Templating Changes Summary In this chapter we have learned how to e Change the logo e Modify the portal_actions ona site e Modify various viewlets and portlets and the templates that are used to render a Plone site e Do basic CSS styling You should now have a real world understanding of viewlets portlets and CSS and how they tie together Next we will look at how we
39. CSSManager 247 drop downs enabling webcouturier drop downmenu used 245 246 FS Dump 249 Products EasyAsPilE 248 qPloneSkinDump 250 static portlet 250 tableless styling Plone Tableless used 247 Adobe Fireworks about 20 features 20 Adobe Photoshop about 18 Index features 18 19 images slicing 19 layers panel 18 show hide functionality 18 B base_properties about 99 advantage 100 browser layer 113 browser pages about 113 121 customizing 121 directive attributes 124 enabling 126 GenericSetup steps writing 125 new CMF action category creating 125 page template creating 124 Python class creating 122 123 registering 123 simple browser view creating 121 viewlet registering in theme product 125 browser resources about 118 images overriding 120 images using as 118 120 registering with ZCML 118 stylesheet customizing 121 stylesheet declaring 120 stylesheets using as 120 121 browsers about 21 Firefox 24 Internet Explorer 22 Safari tools 36 Download at Boykma Com buildout about 14 50 overview 49 buildout filestructure about 58 directories 59 buildout filestructure directories bin 59 buildout cache downloads 60 buildout cache eggs 59 develop eggs 60 parts 59 products 60 src 60 var 60 C Cascading Style Sheets See CSS cheese shop See Python Package Index classic portlets about 155 using in theme product 155 157 CMF action categories folder buttons category 85 CMFPlone
40. Calendar E Collection gf Content Rules Errors B HTML Filtering Language EJ Mail f Maintenance Markup a Navigation Q Search amp Security Site G Themes B Types 2 Users and Groups Ue Visual editor Zope Management Interface HTML Filter settings a Up to Site Setup Plone filters HTML tags that are considered security risks Be aware of the implications before making changes below By default only tags defined in XHTML are permitted In particular to allow embed as a tag you must both remove it from Nasty tags and add it to Custom tags Although the form will update immediately to show any changes you make your changes are not saved until you press the Save button Tags Attributes Styles Nasty tags These tags and their content are completely blocked when a page is saved or rendered IT embed r ea IM script l Remove selected items Add Nasty tags Stripped tags These tags are stripped when saving or rendering but any content is preserved button fieldset form input label legend link noscript lobject loptgroup arie hr alia d a ood loption On this panel remove object and embed from the Nasty Tags list Also remove object and param from the Stripped Tags list Finally add embed to the Custom Tags list and scroll to the bottom of the screen and click the Save button 3 With these changes made you should be able to cli
41. Com 12 Add on Tools and Theming Tips Now that we ve looked at how to build a Plone theme we ll take a look at some Plone products that can be used to make your web site even more impactful and manageable We ll also briefly cover some useful tips to be aware of when theming a Plone site Popular add on Plone products One of the best things about open source development is the proliferation of products to solve common use cases Plone themers are fortunate to have a solid set of tools available to them to solve these use cases Enabling drop downs using webcouturier dropdownmenu As most themers know a lot of clients desire drop down menus In the past this required coding HTML strings and the use of a product by Quintagroup named qPloneDropDownMenu This product is still the recommended drop down menu product for Plone 2 5x but for 3 x the real star is Denys Mishunov s product webcouturier dropdownmenu The joy of this product is that you install it and it works instantly The product works by subclassing the globalsections viewlet via the following code found in the browser configure zcml file of the webcouturier dropdownmenu product lt Override global sections viewlet gt lt browser viewlet name plone global_ sections Download at Boykma Com Add on Tools and Theming Tips manager plone app layout viewlets interfaces IPortalHeader class dropdown DropdownMenuViewlet layer interfaces IDropdownSp
42. Download at Boykma Com Chapter 6 Reference any eggs you are developing here one per line e g develop src my package develop src plonetheme mytheme If you want Zope to know about any additional eggs list them here This should include any development eggs you listed in develop eggs above e g eggs buildout eggs plone eggs my package eggs buildout eggs plone eggs plonetheme mytheme If you want to register ZCML slugs for any packages list them here e g zcml my package my other package zcml plonetheme mytheme Assuming these lines are in place in your buildout cfg file when you next run your buildout and you must for these changes to be recognized and restart Zope it should automatically make your theme product available for installation in portal_quickinstaller located in the ZMI in your Plone site And for lucky individuals working with Plone 3 3 and above or for anyone using buildout eggtractor you won t have to worry about this slug at all As you can see ZCML is a human readable language that merely registers items so that Zope can see them There s no magic involved here just a lot of hand shaking Zope 3 browser layers and resources The idea of a single global namespace with customization possible by ID only has been supplanted in Zope 3 by the notion of named resources being registered for a context type This means that the HTML that renders when a view called view
43. In this book you will learn how to create flexible powerful and professional Plone themes It is a step by step tutorial on how to work with Plone themes It also provides a more holistic look at how a real world theme is constructed We look at the tools required for theming a web site The book covers major topics such as configuring the development environment creating a basic theme product add on tools and skinning tricks integrating multimedia with Plone and configuring your site s look and feel through the Zope Management Interface ZMI Finally the book takes a close look at the thrilling and greatly simplified future of theming Plone sites What this book covers In Chapter 1 we will take a look at how theming has become more complex with the newest release of Plone and how this impacts themers We will also compare other popular CMS platforms with Plone In Chapter 2 we will take a look at the recommended tools that are needed for theming We will also take a look at the browser add ons that are available for inspecting a web site s CSS JavaScript color palette and more Download at Boykma Com Preface In Chapter 3 we will configure the development environment We will also learn some of the jargon associated with Plone 3 development In Chapter 4 we will learn how to create a vanilla theme product and install it In Chapter 5 we will learn how to expose a theme product to a filesystem We will take a look at th
44. Installed Products Product Version at Install time Product version Uninstall Reinstall e We could go to Site Setup Add on Products at http localhost 8080 mysite prefs install products form SiteMap Accessibility Contact Site Setup J Search Site A Search 7 only in current section Home Users News Events amp admin Logout You are here Home Fo SheSetop Add Remove Products Plone Configuration Up to Site Setup Add on Products This is the Add on Products install section you can add and remove products in the lists below gt To make new products show up here put them in the directory opt mybulldout parts Instance Products on the file system and restart i Calendar the server process Ej Collection Products available for install Y Content Rules Errors FT CMFPlacefulWorkflow 1 2 1 Product Description B HTML Filtering IT amp Marshall 1 0 0 Language Product Description e I B NuPlone 0 9 3 f Maintenance Product Description Markup FT B Scrawl 1 0 final E Product Description Navigation F amp Working Copy Support Iterate 1 0 ey Search Product Description Securi a ig F B OpenID Authentication Support 1 0 b1 G Site Product Description f Themes x Guria Theme for the Plone Theming Book 0 1 B Types gt Install 189 Download at Boykma Com Creating Installi
45. Site Setup Bearchsite R searen FT only in current section Home Users News Events Example Video Folder amp vedaw Log out You are here Home Example Video Folder Contents View Edit Rules Sharin i i i i Sub types Actions w Display Y Add new w State Published w May 2009 Mo Tu We Th Fr Sa Su Example Video Folder by vedaw last modified May 28 2009 04 02 PM i 2 3 45 67 8 9 10 Navigation P4A Video Example Cat Yodeling ene 11 12 13 14 15 16 17 P4A Video Example 18 19 20 21 22 23 24 Time 00 06 Pos ay by vedaw 25 26 27 28 29 30 31 Type Video He is a short description More Manage portlets Manage portlets a Comments 0 comment s Cat Yodeling sted Today by vedaw I can haz cheezburger More ia Comments 0 comment s History Send this Print this The Plone CMS Open Source Content Management System is 2000 2009 by the Plone Foundation et al Plone and the Plone logo are registered trademarks of the Plone Foundation Distributed under the GNU GPL license Powered by Plone Valid XHTML Valid CSS Section 508 WCAG Plone4Artists Video also makes it possible to link to remote files so that you can reduce the load on your disk space or bandwidth For example if you wish to display a video from YouTube blip tv or Google Video on your site you can You can copy t
46. This can be especially helpful if you are creating a new web site based on a specific existing color palette To capture the palette right click and select the Webpage Dom Color Analyzer option The inspector will display the full palette and choosing the Save as colorzilla palette option will save it for future reference arr U GREEN ABOUT GREEN COLLARJOBS MEDIAROOM GET INVOLVED RESOURCES PARTNERS ma ALL Manaan a E Our goal to build an inclusive green economy strong enough to lift people out of poverty gt rd Analyze DOM Color Analysis Results hittp greenforall orgs w save as colorzilia paletie msave in web services permaiink mexpand all s collapse all rgb 222 232 244 DEEBFS 35 Download at Boykma Com Skinner s Toolkit To access the palette again right click to pull up the menu and choose Palette Browser eA ColorZilla Color Picker _ greenforall ry 5 Thumbnails kJ Favorites History l Hues and Bright U so GOGH 92 Hues and Satur System CSS Col Os 41 W3C Named Co Ov 75 Web Colors by Web Named Col OR 63 Web Safe Colors OG 75 WebCollective OB les ev los X Named Colors v greenforall Hex 3F4B41 Add to Favorites CSS rgb 63 75 65 Name Selecting the palette will allow you to click on the individual colors in the palette and get the color values for eac
47. V Validation inspector 45 validation tools about 38 Jigsaw s validator 38 vanilla theme product creating 63 version control 54 viewlet managers 129 viewlets about 112 127 129 bread crumbs 128 class based versus template based viewlets 133 135 class based viewlets 133 classes 129 colophon 129 contact actions 128 content views 128 document actions 128 footer 128 hiding within viewlet manager 139 140 navigation 128 non template based viewlet overriding 142 146 page templates 129 Page templates combined with classes 129 personal bar 128 pulling into Plone templates 129 130 registering in viewlet manager 135 137 reordering within viewlet manager 137 139 searchbox 128 showing within viewlet manager 139 140 site actions 128 template based viewlets 133 unhiding within viewlet manager 139 140 utility navigation 128 viewlet template overriding 140 141 viewlets Plone site customizing 211 W webcouturier dropdownmenu 246 Web Developer Toolbar about 22 features 22 23 warnings 24 WebKitDeveloperExtras 37 WordPad about 46 features 46 RTF supporting 46 WSGI 252 X XCode 55 XDV about 282 283 activating 288 adding to Plone instance 285 history 282 testing 290 working 290 291 XDV activating HTML adding 288 289 rule files adding 288 289 theme transform enabling 289 XDV adding to Plone setup about 285 buildout running 287 collective xdv adding 286 287 platform notes 286 Y YSl
48. YOU CAN DO COMMUNITY ABOUT 1SKY WASHINGTON SOLUTIONS 1 WASHINGTON Take Action Washington will m et JOIN THE ACTION TEAM the challenge of climate change As a young because of you your 2 h family your friends and your neighbors It will happen but we must start now Contact your legislators and urge them to pass our solutions bills Learn moreaboutthe mae i inspect Clear Profile Clear i D HTML css JS XHR Images Flash Console HTML CSS Script DOM Net gt Iskywa org Iskywa org 7KB gt event registration cache 1skywa org 15 KB gt jquery cachekey2249 js 1skywa org 31KB gt base cachekey2602 css 1skywa org 9KB gt collage cachekey0801 cs 1skywa org 2KB gt onenwTemplate cacheke 1skywa org 3KB gt homestyle cachekey9111 1skywa org 894 b gt ploneCustom cachekey3 1skywa org 112b gt tilegif 1skywa org 49b gt logo jpg 1skywa org 6 KB I Iskywa org 37 KB Askywa org 3KB Finally Firebug provides excellent error reporting DOM explorer and lots more Generally speaking Firebug plus Web Developer Toolbar for Firefox are two tools that are essential for Plone web site development and it s recommended that these two tools be in the toolkit of every Plone themer 30 Download at Boykma Com Chapter 2 YSlow Another essential add on for Firefox is the wonderful YSlow YSlow analyzes web pages and
49. ZCML and GenericSetup profiles Worse they needed to learn how to work with Python classes and understand the difference between Zope 2 and Zope 3 templates and how to use them in their skin products The complexity involved in skinning a site doubled if not tripled and the theme development time increased The positive side of this was a dramatic increase in the robustness reusability and flexibility of theme components Once learned the Plone theming framework provides tremendous leverage for web design professionals And much of the Plone theme framework is unit testable which is amazing While there is a lot to know it s worth stating that theming for Plone is a challenging but exhilarating experience Even better it has encouraged the Plone community to spend some real time focusing on the theming needs of the Plone users meaning that the road forward will be easier to tread It s also important to mention that community resources are available if you have questions or problems In particular themers should be aware of e The Plone users email list that can be found at http plone org support lists e The Plone forums found at http plone org support forums e The IRC chat channel that can be accessed at http plone org support chat You should always feel that no question is too stupid to ask and someday you might even be able to answer someone else s questions It s how most of us have arrived in the community
50. Zope will recognize them as templates In this case you only need to copy the file into your skins plonetheme_mytheme_custom_templates folder and save it with the appropriate extension These items will appear in the portal_skins without the pt extension In some cases there may need to be a metadata file associated with that page template This is not usually necessary with simple templates CSS JavaScript or image resources It usually becomes crucial to supply extra information when working with cpt controller page template files which are used when validation on a page template is required An example here would be a page template for a form that can be submitted where the page template needs to know if success or failure was achieved when the form is submitted The metadata file contains important information that ensures that the form can submit completely and thus should be preserved in your filesystem product Similarly you may be working with standard Python scripts or you may be working with cpy controller Python scripts that involve validation Again the metadata file should be captured in addition to the Python script itself In the case of Python scripts you should also be careful to extract the information that generally precedes the Python script this includes the name of file the context and so on An example is the following script 102 Download at Boykma Com Chapter 5 Script Py
51. a basic page template for a home page view 236 Using Python code to render a home page view 237 Sectional styling 240 Applying Internet Explorer fixes 242 Summary 244 Chapter 12 Add on Tools and Theming Tips 245 Popular add on Plone products 245 Enabling drop downs using webcouturier dropdownmenu 245 Collage 246 v Download at Boykma Com Table of Contents Tableless styling using Plone Tableless 247 CSSManager 247 Products EasyAsPilE 248 collective skinny 249 FS Dump 249 qPloneSkinDump 250 Collection and static portlets 250 Sectional theming 250 themetweaker themeswitcher 251 Non Plone specific products for theming 251 sIFR 252 Rules based theming 252 Debugging tools and tips 253 GloWorm 253 About tracebacks and Pdb the Python debugger 255 Running more than one operating system at a time 255 Summary 256 Chapter 13 Plone and Multimedia 257 Flash integration 257 Embedding Flash and other media in a page 258 Embedding Flash in a page template 262 Plone add ons for multimedia 263 collective flowplayer 264 Slideshow Folder 266 Plone4Artists Video 268 Other products to watch out for 271 Plone4ArtistsAudio 271 Plumi 272 Summary 272 Chapter 14 Deploying and Contributing Themes 273 Deploying your theme on a server 273 Maintaining an orderly deployment 274 Documentation 275 Configuration 275 Quality assurance 277 Deploying a theme for public use 279 Summary 280 vi Download at Boykma Com Table
52. an ID and click the button below to create a new Plone site Id mysits No special characters or spaces Title My test site Description 4 Extension Profiles You normally don t need to select anything here unless you have specific reasons and know what you are doing Leave it blank if you want a default Plone site SympaSignup SympaSignup Uninstall Profile Vertical Response Signup Vertical Response Signup Uninstall X J Add Plone Site NOTE You may only use ASCII characters for Id Title and Description in this form You can change the values later from the Plone UI but during creation of a Plone site characters outside the A Z and numbers range are not allowed There are three ways to install your theme product e You could optionally choose the theme product from the Extension Profiles list as seen in the previous screenshot e We could proceed to the portal_quickinstaller tool located in the ZMI at http localhost 8080 mysite portal_quickinstaller manage_installProductsForm 188 Download at Boykma Com Chapter 9 Fr Install T Contents Plone QuickInstaller Tool at mysite portal quickinstaller Installable Products Product Name Version I CMFPlacefulWorkflow 1 2 1 FT Marshall 1 0 0 M NuPlone 0 9 3 F Scrawl 1 0 final HF Working Copy Support Iterate 1 0 FT OpenID Authentication Support 1 0 b1 M Guria Theme for the Plone Theming Book 0 1 Install
53. and over again as it can have unexpected consequences and GenericSetup clashes that may be difficult to resolve JS About a theme product s architecture Next let s take a look at the pieces that comprise a theme product The areas in the shaded boxes are the concepts we will cover in this chapter In the case of configuration settings and skin layers CMF elements you can make changes manually TTW or through a filesystem product In the case of Zope 3 components and programming languages changes can generally only be achieved through filesystem development with some exceptions that we ll cover in the next chapter To make things easier we re going to look at the items that can be changed easily in both places first Theme Product Component Architecture etc Python classes and interfaces plone app layout plone app portlets etc ZCML configuration files Configuration Settings Skin Layers Zope 3 Components Programming Templating CMF Action Categories Stylesheets Browser Views Languages Generic Setup Profiles Javascripts Viewlets XML XML KSS Portlets Python Images Templates Non Zope 3 Templates lone app layout ZCM p P P app ay Tal Metal Macros plone app portlets 81 Download at Boykma Com Making Manual TTW Changes or What Not to Do Changing your site via CMF action categories On your Plone site s home page you will notice
54. are using must have a second extension of dtml for example mystylesheet css dtm1 this marks it for DTML processing Second it must additionally contain DTML code that connects it to the property sheet lt dtml with base properties gt do not remove this lt dtml call REQUEST set portal_url portal url gt not this either YOUR CSS RULES START HERE YOUR CSS RULES STOP HERE lt dtml withs gt The real advantage of using base_properties is that it s easy to make global changes to your site The important point to note here is that when extracting the base_properties file from the custom folder make sure the file is named correctly base_properties props and that you cut paste the relevant values into place one at a time The base_properties props file should be placed in your theme product in skins plonetheme_mytheme_styles 100 Download at Boykma Com Chapter 5 Modifying images using the custom folder You can modify Plone provided images such as the logo jpg provided with Plone by going to the portal_skins folder choosing the appropriate images skin layer often plone_images locating the desired image and then selecting the Customize option You can also add new images to the custom folder and use CSS to style with those images Eventually those images will need to be extracted using File Save As to your theme product s images folder These images are not
55. as follows bin buildout n New terms and important words are shown in bold Words that you see on the screen in menus or dialog boxes for example appear in the text like this Within the site_actions category you will find the menu options that correspond to the top navigation on a default Plone installation By default these include Site Map Accessibility Contact and Site Setup Ge Warnings or important notes appear in a box like this Q Tips and tricks appear like this Reader feedback Feedback from our readers is always welcome Let us know what you think about this book what you liked or may have disliked Reader feedback is important for us to develop titles that you really get the most out of To send us general feedback simply send an email to feedback packtpub com and mention the book title via the subject of your message If there is a book that you need and would like to see us publish please send us a note in the SUGGEST A TITLE form on www packtpub com or email to suggest packtpub com 4 Download at Boykma Com Preface If there is a topic that you have expertise in and you are interested in either writing or contributing to a book see our author guide on www packtpub com authors Customer support Now that you are the proud owner of a Packt book we have a number of things to help you to get the most from your purchase Downloading the example code for the book Visit
56. as follows class PathBarViewlet common PathBarViewlet Moving to a new viewlet manager and adjusting the dividers nun def render self return self index index ViewPageTemplateFile path_bar pt Next we copy the path_bar pt file found in plone app layout to our browser folder and alter it to use amp raquo instead of amp rarr and amp laquo instead of amp larr lt div id portal breadcrumbs i118n domain plone gt lt span id breadcrumbs you are here i18n translate you are here gt You are here lt span gt lt a il8n translate tabs home tal attributes href view navigation root url gt Home lt a gt lt span tal condition view breadcrumbs class breadcrumbSeparator gt lt tal ltr condition not view is rtl gt amp raquo lt tal ltr gt 222 Download at Boykma Com Chapter 10 lt tal rtl condition view is_ rtl gt amp laquo lt tal rtl gt lt span gt lt span tal repeat crumb view breadcrumbs tal attributes dir python view is rtl and rtl or ltr gt lt tal last tal define is last repeat crumb end gt lt a href tal omit tag not crumb absolute_url tal condition python not is last tal attributes href crumb absolute_url tal content crumb Title gt crumb lt a gt lt span class breadcrumbSeparator tal condition not is last gt lt tal ltr condition not view is rtl gt amp raquo lt tal ltr gt lt tal rtl condition view is rtl
57. border 1 gt lt object classid clsid d27cdb6e ae6d 1l1icf 96b8 444553540000 codebase http download macromedia com pub shockwave cabs flash swflash cab version 9 0 0 0 width 667 height 451 id flash intro align middle gt lt param name allowScriptAccess value sameDomain gt lt param name allowFullScreen value false gt lt param name wmode value transparent gt lt param name movie value intro swf gt lt param name quality value high gt lt param name bgcolor value a8ac69 gt lt embed src intro swf quality high bgcolor a8ac69 width 667 height 451 name intro align middle allowScriptAccess sameDo main allowFullScreen false type application x shockwave flash wmode transparent pluginspage http www macromedia com go getflashplayer gt lt object gt lt div tal replace structure provider plone belowcontent gt lt tal content macro gt lt metal content gt lt body gt lt html gt Meanwhile the intro swf file lives in the portal _skins resourcemedia_ images folder just like any other skin layer element This means that if you are working on the filesystem the file would go in mybuildout src plonetheme mytheme plonetheme mytheme skins mytheme_images or similar In this fashion you can easily insert multimedia into a page template Plone add ons for multimedia Now that we understand the basics of how to insert multimedia code into ou
58. caption goes here Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nis ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit preesent luptatum zzril delenit augue duis dolore te Aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat email this page print this page Powered by Plone Copyright 2009 180 Download at Boykma Com Chapter 9 This theme was created by me for use by a charity group in India called Guria http www guriaindia org dedicated to ending human trafficking and prostitution The finished site is currently in development and is generously hosted free of charge by the talented folks at Six Feet Up sixfeetup com Additionally most of the code and lessons learned come courtesy of similar themes created by the staff at ONE Northwest in Seattle Washington The design for this theme was created with the assumption that most of the tasks described in previous chapters would need to be present in this theme In fact the only task not covered here is the creation
59. cases that need to be solved you should 5 Theme locally and test as you go Download at Boykma Com Deploying and Contributing Themes 6 Check the theme into Subversion This is actually an incremental process something you do as you go from stage to stage during the theming process while being careful not to check in broken code The objective here is to be able to roll back to an earlier version if needed 7 Install the theme onto the web site and do final configuration 8 Take the site live Let s look now at the work involved in testing and actually deploying the theme Maintaining an orderly deployment Generally speaking anything we do locally to configure our theme needs to get reproduced on the finished live site You could for example keep a running list of any manual changes you ve made and make the same changes manually twice which can be a time consuming process This typically should only be for the addition of content manipulation of viewlets or enabling and applying a custom view Obviously it is not ideal to do many manual modifications but it s good to keep a record of them so that you can apply them when the time is right It is generally recommended that all functionality that can be handled within the theme product be done there in order to avoid rework Your work environment might dictate how appropriate that is however For example in my office Project Managers typically manage areas such a
60. dogwood FF onenw default FE rockaway a i v 39 Download at Boykma Com Skinner s Toolkit Rather than opening the entire buildouts folder or even the plonetheme copperriver folder generally you only want to open the structure closest to the files you need in order to keep performance snappy in this case mybuildout rockaway src plonetheme copperriver plonetheme copperriver e808 8 copperriver css dtml copperriver copperriver css dtml Y I copperriver __init__ py This file is based on the ploneCustom css dtml file shipped Vi browser with Plone 5 init__ py E configure zcml copperriver_logo pt interfaces py path_bar pt searchbox pt viewlet pt viewlets py YOUR CSS RULES START HERE 2 configure zcml gt profiles body 2 profiles zcml background color 143941 setuphandlers py lt dtml with base_properties gt do not remove this lt dtml call REQUEST set portal_url portal_url gt not this either es gt copperriver_images v E copperriver_styles color cc6633 2 base_properties props text transform uppercase i Sees homestyle css dtm gt copperriver_templates h2 text transform uppercase document action sendto text transform Lowercase Line 337 Column 2 3 XML Q vy TabSize 4 As you can see it opens the entire project in a clean interface with an easily navig
61. events press room publications f ENVIRONMENTAL BearchSie COUNCIL Tjonly in current section Take Legal Action Eg Inspect Clear Profile Edit div features slot lt div lt div content lt div region content d lt div lt td portal column con lt tr lt tbody lt tablet Q Console HTML CSS Script DOM Net Options Style Layout DOM lt span id contentTopRight gt ha z lt a name documentContent gt gt lt dl id kssPortalMessage class portalMess info style display none gt lt div id viewlet above content gt y lt div id content gt y lt div gt lt div id features slot onmouseout gt lt div id feature images gt gt lt div id feature captions gt 7 ae A a documentContent public css line 58 gt lt hl class documentFirstHeading gt fY font size 110 gt lt p class documentDescription gt v dimmi ain nig features slot wec css line 232 height 305px position relative width 459px Inherited from div region content documentContent documentContent wec css line 341 color 666666 Ps O While an element is selected you can click in the right side of the pane and change the CSS that is active for example change the position to absolute or you can right click to add a new property to that page element and type in the details Right clicking also gives you the option t
62. gt plone ae F plone app linkintegrity 1 0 5 py2 4 egg Pie gt plone app openid 1 0 1 py2 4 eqq vi F plone app portlets 1 0 6 py2 4 egg Pie J EGG INFO gt E F plone gt i plone app redirector 1 0 5 py2 4 egg gt a plone app viewletmanager 1 0 py2 4 egq PasteScript PasteScript is a pluggable command line front end that includes commands to set up package file layouts Specifically it allows you to create file layouts for packages It is not necessary to install PasteScript but it is necessary to install ZopeSkel if your Plone installer does not do this for you and it does if you are using the newer installers ZopeSkel ZopeSkel is a powerful set of PasteScript templates that allows you to use the paster command to generate common Plone boilerplate and skeleton products Don t confuse paster templates with page templates which we ll talk about later Paster templates are not templates you edit but rather templates that allow you to create a Python product such as a theme product Paster Installing ZopeSkel automatically installs the paster command that uses PasteScript to create setuptools based packages including a skeleton theme product Using a simple command you can create a new theme product in less than a minute Now that we ve had some introduction to the basic terminology for Plone let s build our development environment 53 Download at Boykma Com Setting up your Development
63. gt lt a href http localhost 8081 themingbook accessibility info accesskey 0 title Accessibility gt Accessibility lt a gt lt li gt lt li id siteaction contact class plain gt lt a href http localhost 8081 themingbook contact info accesskey 9 title Contact gt Contact lt a gt lt li gt lt li id siteaction plone_ setup class last action gt lt a href http localhost 8081 themingbook plone_ control panel accesskey _title Site Setup gt Site Setup lt a gt lt li gt lt ul gt Even if the first last plain code seems a bit tricky it establishes a pattern that you ll find very useful any time you need CSS selectors applied to the beginning and or end of a set of repeated elements You may want to read the template code again to see how this might be applied in other scenarios 213 Download at Boykma Com General Styling and Templating Changes Adjusting the searchbox display Next we want to adjust the look and feel of the searchbox Plone by default gives us a search only in this section option that is useful but may not lend itself well to a design We provide some basic styling and positioning to the searchbox and also suppress the search by section feature xkkkkkk SEARCHBOX portal searchbox position relative z index 20 opacity 1 padding 0px 0px 0px 5px margin right 0px margin top 40px float right searchSection display none
64. happen consistently A viewlet that is in the wrong place can look like a CSS error So it helps to compare the order of viewlets on the production site against your local instance using manage viewlets before attempting any CSS fixes GenericSetup can be a touchy thing to work with and sometimes it s just faster to make a few changes by hand instead of trying to sort through your viewlets xml and make it work as desired Or you can export the viewlets xm1 step from your working local version and include the relevant bits in your theme product Ordering of viewlets for themes should be handled through the code as much as possible In addition for publicly available themes make sure that it is backwards compatible for all versions of Plone 3 This really only affects how you subclass your viewlets in viewlets py as discussed in Chapter 7 Customizing Viewlets and Portlets and at http plone org documentation tutorial customizing main template viewlets overriding a class viewlet Another fairly time consuming task can be portlet configuration This is technically a content related issue but you should verify that all the portlets on the site are styled correctly and also that static and collection portlets display as expected It s not uncommon especially in a team scenario for products to be installed after the theme product This in turn can affect how the site displays In this case you should always check the order of the skin
65. in February 2009 is a community written book Practical Plone 3 which is intended for integrators and individuals new to Plone It contains several chapters geared towards themers plus a wealth of other information for integrators e Martin Aspeli s developer s guide Professional Plone Development 2007 While it is geared towards developers some of the technical information in this book is pertinent to themers 11 Download at Boykma Com Theming Plone 3 An Overview e The defacto Plone book The Definitive Guide to Plone by Andy McKay It is woefully out of date but is relevant for giving a broad understanding of Plone and the templating language used by Plone A rewrite to this book was released in 2009 and written by Redomino and Andy McKay e Philipp von Weitershausen published Web Component Development with Zope 3 in 2007 It is a helpful book conceptually but geared specifically towards pure Zope 3 development not Plone e Plone Live which had regular updates for years but is now languishing since the Plone 3 release The information it contains is still valid however e Content Management with Plone Handbook for Authors and Editors available in English and German updated for Plone 3 This book is intended for end users and not generally helpful to themers e James Cameron Cooper s Building Websites with Plone 2002 Mostly out of date and not especially relevant to themers Theming and other CMS fr
66. including deleting any slideshow settings It will not delete any content though For information on limitations and ways to customize this add on you can visit http plone org products slideshowfolder You can also view the demo video there All in all it s a lightweight easy to use product that provides an attractive slideshow for end users and well worth checking out Plone4Artists Video The most commonly recognized Plone multimedia products were created by a team of individuals known as Plone4Artists specifically by Nate Aune and Rocky Burt Plone4Artists is described as an initiative to assemble a Plone products bundle with features commonly required for artist community web sites These features include enhanced audio video and other multimedia management Plone4Artists Video is an add on product for Plone that lets you add videos to your Plone site It supports the uploading of video files or embedding of videos that are already hosted on popular video sharing sites such as YouTube and Google Video Essentially you upload a video file using the default Plone File type via the Add menu on your Plone site Plone4Artists Video then subtypes that file in order to display it in ways that are appropriate to video Because Plone4Artists Video does not add new kinds of content types it makes it easier to upgrade your Plone site in the future Home Users News Events P4A Video Example You are here Hame gt P4A Video Examp
67. is invoked on a page may be different from the HTML that is rendered when the same view is invoked on a folder or other content object The amp e designation looks like a pair of eyeballs hence a view You do not have to use the eeview designation if you do not wish to it s really just a visual cue This same view may also be registered for a browser layer A Zope 3 browser layer is similar in purpose to a CMF skin layer but is implemented differently Technically speaking a skin layer is a simple container of templates and resources whereas a browser layer is a marker interface that is applied to the request upon traversal through the object database In a sense a browser layer contains browser resources though it s not really a container Views and templates browser resources viewlets and portlet renderers which are all special types of views can 117 Download at Boykma Com Working with Zope 3 Components be registered to this layer as browser resources An example of a browser resource is a special page view that can be used on the home page and optionally in important sections of your Plone site A browser resource could also be a CSS file or even an image that can be used in various areas of your site depending on the context The browser layer technology allows you to use bits and pieces of your code in more than one context and keeps your ZCML registrations from applying to all of the Plone sites on a give
68. is also an option for using a few built in tools Clicking on the Tools drop down list provides an error log called JSLint which allows all of the JavaScript to be analyzed all in one step as well as a dump of all of the JavaScript and CSS that is loaded on the page The Printable View option is used to send the overall Performance Grade to other members of the team in a more readable fashion YSlow is an essential tool and should always be used during the site optimization process 33 Download at Boykma Com Skinner s Toolkit Colorzilla Another handy add on for Firefox is an advanced color picker named ColorZilla found at https addons mozilla org en US firefox addon 271 After installation ColorZilla displays in the lower left Firefox status bar Clicking on the color picker icon will allow you to mouse over any pixel in your Firefox window and display the RGB and Hexadecimal value for that pixel EM R 78 G 118 B 84 4E7654 AX 0 AY 0 img You can then take those values and use them in your stylesheets as necessary If it is awkward to select the specific pixel you want ColorZilla also provides the ability to zoom into a selection in your window Right click on the color picker to access the Zoom menu and the contents of your browser will enlarge or shrink based on your selection uy G R E E N ABOUT GREEN COLLAR suas FOR ALL Color Picker Eyedropper Palette Browser
69. layers in portal_skins You will generally want to make the theme product s layers appear just below custom in the portal_skins Properties tab You should also check the order of your JavaScript and CSS files and make sure that they are being found by your theme Again this can affect the display of your site You can check this by visiting the portal_javascripts and portal_css areas If a file is not found a yellow box will display a warning Finally remember to check your theme into Subversion and then clean out the custom folder and portal view customizations in the ZMI rolling any of those files into your theme product if necessary If more than one person is working on the site or if you re dealing with a migration scenario you may get a little out of sync here so it s always best to be careful when rolling these items into your theme product This may involve doing a diff comparison of an item in the custom folder to the files in your theme product to see where differences occur Also be careful of accidentally rolling older files into the theme product and overwriting your newer code particularly in the case of migrations 276 Download at Boykma Com Chapter 14 Quality assurance Not surprisingly the most time consuming part of working on a theme is often the browser testing stage While it s not possible to test against all browsers it s good to follow the A List recommendations found here http dev
70. main ones you will see What does TAL look like in practice As mentioned before TAL is found in any zpt or pt file such as in CMFPlone s page templates and in templates associated with viewlets and portlets The easiest way to understand what TAL looks like is to see an example The following expression renders a bit of dynamic content that may not be immediately obvious lt p tal content sString Yes we can gt Barack Obama s campaign slogan lt p gt The output becomes lt p gt Yes we can lt p gt In other words Barack Obama s campaign slogan is a placeholder for dynamic content something that you might see if you view this code in Dreamweaver but the final output is the string expression Unlike other languages such as PHP ColdFusion or ASP it s not what s inside of the tag that is important it s what the tags do that is important Let s look at this in the context of Plone One of the first page templates most themers are confronted with is the logo pt page template As we discussed in the previous chapters the logo is a viewlet found in the plone app layout package If we open the logo pt page template found in that package we see the following code lt a metal define macro portal_ logo id portal logo accesskey 1 tal attributes href view navigation_root_url 118n domain plone gt lt img src logo jpg alt tal replace structure view logo tag gt lt a gt At first blush thi
71. objects that needed the boilerplate as well in the form of slots and macros They are now browser layer resources so that they are more reusable This means that boilerplate code is needed to hook them up In Plone 3 viewlets may be comprised of the following e Page templates e Classes e Page templates combined with classes Let s now look at how these viewlets are pulled into Plone s templates This happens in a file known as main template located in your buildout in buildout cache eggs Plone version egg Products CMFPlone skins plone_templates or in the ZMI inside of your Plone site in portal_skins plone_templates In the past moving elements around on a page involved making changes to the main_template pt and working with lengthy TAL templating statements This often produced upgrade problems and messy code In Plone 2 5 for example the following code controlled the rendering of the portal_header section in main_template pt lt div id portal top i18n domain plone gt lt div id portal header gt lt p class hiddenStructure gt lt a accesskey 2 tal attributes href string current_ page _url documentContent i18n translate label skiptocontent gt Skip to content lt a gt lt a accesskey 6 tal attributes href string current_ page_url portlet navigation tree i18n translate label_ skiptonavigation gt Skip to navigation lt a gt 129 Download at Boykma Com Customizing Viewlets a
72. of what you need to know and less of what you don t Packt is a modern yet unique publishing company which focuses on producing quality cutting edge books for communities of developers administrators and newbies alike For more information please visit our website www Packt Pub com Download at Boykma Com PACKT PUBLISHING Practical Plone 3 ISBN 978 1 847191 78 6 Paperback 592 pages A Beginner s Guide to Building Powerful Websites 1 Geta Plone based website up and running quickly without dealing with code 2 Beginner s guide with easy to follow instructions and screenshots 3 Learn how to make the best use of Plone s out of the box features 4 Customize security look and feel and many other aspects of Plone Professional Plone Development ISBN 978 1 847191 98 4 Paperback 420 pages Building robust content centric web applications with Plone 3 an open source Content Management System AA 4 1 Plone development fundamentals 2 Customizing Plone Professional Plone Development 3 Developing new functionality 4 Real world deployments Martin Aspeli Please check www PacktPub com for information on our titles Download at Boykma Com PACKT PUBLISHING Building Websites with Plone ISBN 1 904811 02 7 Paperback 416 pages An in depth and comprehensive guide to the Plone content management system 1 A comprehensive guide for Plone website administrators and developers 2 Desig
73. of your buildout you should see an buildout cache eggs directory Within that directory you should find an egg named plone app layout with a version number attached If you drill into that folder you will find most of the pieces and parts that make up Plone s interface 133 Download at Boykma Com Customizing Viewlets and Portlets Open the default Plone configure zcml file located in yourbuildout buildout cache eggs plone app layout plone app layout viewlets Here is what the default configure zcm1 file says about the logo viewlet for example lt The logo gt lt browser viewlet name plone logo manager interfaces IPortalHeader class common LogoViewlet permission zope2 View gt The code tells us that the Plone logo formally called plone logo is managed by the IPortalHeader viewlet manager its class is LogoViewlet and the logo is available to all users with the View permission If we look in the plone app layout viewlets directory we also see a file named logo pt which is the page template used for rendering the logo Even though there is the logo pt file involved because a class is specified in configure zcml1 the plone logo viewlet can be thought of as class based This is a good example of a viewlet that uses a class and a template but is still considered class based because the derived class takes responsibility for the rendering details Conversely if we look at the p
74. page template called audiences pt from zope component import getMultiAdapter from zope import schema from zope formlib import form from zope interface import implements from plone portlets interfaces import IPortletDataProvider from Products Five browser pagetemplatefile import ViewPageTemplateFile class TAudienceNavigationPortlet IPortletDataProvider portlet title schema TextLine title u Title for the portlet default u Information for required True def audiences self Return obj with attributes id url title description selected str selected or unselected nun audiences current url self context absolute_url for action in self data audiences append id action id NUET action url title action title selected current_url startswith action url and selected or unselected description action description return audiences def header self 122 Download at Boykma Com Chapter 6 return self data portlet_title class Renderer base Renderer render ViewPageTemplateFile audiences pt Add the interface for our browser page In our theme product in browser interfaces py we need to insert the following code from plone theme interfaces import IDefaultPloneLayer class IThemeSpecific IDefaultPloneLayer Marker interface that defines a Zope 3 browser layer nun class IAudienceNavigationLayer ID
75. page to work with classes that may be protected or have other security issues The code within the browser page is not subject to the same restrictions as restricted Python in a template or a Python script Interfaces describe the methods and attributes that an object provides They describe what a component can do but not how Adapters provide ways to adapt the behavior of an object to a new interface A browser layer meanwhile is just a marker interface that is applied to the request upon traversal A Zope 3 browser resource is a multi adapter on the context and the request and when the request is marked with a particular interface the component architecture may find a more specific adapter in a view registered for that particular layer A marker interface is simply a flag that says I have a special purpose Views and so on attach to that flagged item and respond appropriately when they are called Marker interfaces don t explicitly provide any functionality they just provide a hook to functionality defined elsewhere What this means is that you can customize items in a Plone theme and override other items that would normally take precedence by assigning them to your theme product Moreover you can be very specific about how these items are applied in your theme This is referred to as exposing items to the browser layer but you can think of it as a different way of overriding or using resources in Plone other than as skin layer items
76. place and suppress it in the first location or else it will display twice CMFPlone s viewlets xm1 tells us the following lt xml version 1 0 gt lt order manager plone portaltop skinname Plone Default gt lt viewlet name plone header gt lt viewlet name plone personal_bar gt lt viewlet name plone app i18n locales languageselector gt lt viewlet name plone path bar gt lt order gt lt order manager plone portalfooter skinname Plone Default gt lt viewlet name plone footer gt 139 Download at Boykma Com Customizing Viewlets and Portlets lt viewlet name plone colophon gt lt order gt lt object gt snip In our own theme product s profiles viewlets xml1 we would alter the code to look like this where yourtheme is your theme product s skin name as defined in the profiles zcml file lt xml version 1 0 gt lt order manager plone portalfooter skinname yourtheme based on Plone Default gt lt viewlet name plone personal_bar gt lt order gt lt hidden manager plone portaltop skinname yourtheme gt lt viewlet name plone personal_ bar gt lt hidden gt lt object gt As you can see we first want to show the viewlet in the new viewlet manager using the order manager syntax Then we want to suppress the original viewlet that was registered for plone portaltop through Plone Default using the hidden manager syntax It s wort
77. portal self portal_ state portal logoName portal restrictedTraverse base properties logoName self logo_tag portal restrictedTraverse logoName tag self portal title self portal_state portal_title This code tells us that Plone is looking at a page template named logo pt which in turn fetches logoName from the base_properties props file Based on that information it looks up logoName in the object database and generates something called a logoName and a logo_tag attribute that will contain the actual img tag for the image complete with height and width attributes The actual image file is found through restrictedTraverse which is a security conscious that is restricted way of finding something in the object database When you encounter this in code you may generally assume that the object is being sought in a skin layer which is indeed where the image belongs If we then look at the logo pt file shipped with plone app layout we see that it reads as follows lt a metal define macro portal_ logo id portal logo accesskey 1 tal attributes href view navigation_root_url i118n domain plone gt lt img src logo jpg alt tal replace structure view logo tag gt lt a gt At first blush it looks as though it s actually looking for a file named logo jpg but that s not the case Instead the TAL statement here is doing a tal replace and rendering the view s logo_tag attribute We know from the abov
78. portlets Most portlets in Plone follow some basic styling they have a portletHeader a portletItem a portletFooter and so on This means that we can write some basic CSS to handle the display of these items BASE PORTLET STYLES portlet border none background color bcb29c margin bottom 0em margin top 0px portlet a color fff important portletHeader background color 807554 important border none text transform uppercase color fff padding 5em 5em 5em 1em portletHeader a background color 807554 border none text transform uppercase color fff managedPortlet portletHeader managedPortlet portletHeader a color 000 portletHeader a color fff portletFooter border none portletItem background color none border none 224 Download at Boykma Com Chapter 10 Much of this code can be grabbed from CMFPlone s portlets css stylesheet located at mybuildout buildout cache eggs Plone some version number Products CMFPlone skins plone_styles We only override some of the borders adjust some background colors and font colors and adjust the padding We also have to force the link color in order to override an important declaration in Plone s portlets css file Similarly we have to force the color of the header to override another important declaration on the portletHeader The most important thing to be awa
79. product This text is what you see in the portal_quickinstaller at http localhost 8080 mysite portal quickinstaller manage_installProductsForm where mysite is the name of your Plone site You can also see this name if you install your theme product via Site Setup Add on Products found at http localhost 8080 mysite prefs_ install products form If you change your XML here and your theme product is already installed you ll need to start or restart your Zope instance using bash opt mybuildout bin instance fg Shortening folder names Next we look at the folder structure of our theme product The standard Plone 3 theme produces folders with names like plonetheme_guria_custom_images plonetheme guria custom templates and plonetheme guria styles While there is nothing wrong with keeping this structure it can be cumbersome to type or tab through especially when checking items into Subversion However you might want to keep the existing folder names to help you distinguish which items of base Plone you modified This can make migrations easier If you choose this route you probably want to create additional folders for non base Plone items I personally prefer the shorter folder names and don t worry too much about the migration issues In the case of this theme product I opted to make the folder names shorter First I altered the names of the folders in the skins folder to guria_images guria_ styles and guria_ templ
80. rigorously follows standards for usability and accessibility including US Section 508 and the W3C s AAA rating for accessibility Plone is protected The nonprofit Plone Foundation http plone org foundation was formed in 2004 to promote the use of Plone around the world and to protect the Plone Intellectual Property and trademarks Plone has planned development and supports contributors The Plone team development keeps a close eye on the future of Plone gives considered thought to new features and presents a unified front This is different from a CMS such as Drupal which has more sprawl in its development processes especially in terms of add on products As of this writing the biggest developments in Plone include dramatically lowering the bar on theming making the page compositing experience much simpler and enabling through the web creation of content types Ultimately the focus for Plone 4 and 5 is on integrators and themers which is right where the focus needs to be in order to have an adoptable CMS 10 Download at Boykma Com Chapter 1 e Upgrades are easy Upgrades are less frequent and releases are carefully coordinated to make the transition easier For anyone who has suffered a painful upgrade you ll appreciate this fact more than anything Technical overview Plone sits on top of the Zope technology stack Zope is an open source application server for building content management systems intranets
81. section that looks like this extends http dist plone org release 3 3 versions cfg extends versions cfg versions versions It may also have a URL in the extends section similar to the commented out first line depending on whether you pull the Plone configuration from the network or locally 2 To add collective xdv to our setup we need some slightly different versions of a couple of the packages so we extend the base configuration with a version list from the Good Py service Change this part of the configuration so that it looks like this extends versions cfg http good py appspot com release collective xdv 1 0 versions versions 286 Download at Boykma Com Chapter 15 y Good Py is a web application hosted on Google App Engine that GA aims to help manage known good version sets of Python packages http good py appspot com What happens here is that the dependency list for collective xdv specifies some new versions for you via the Good Py URL This way you don t have to worry about getting the right versions as buildout will handle it for you 3 The next step is to add the actual collective xdv add on to the eggs section of buildout cfg Look for the section that looks like this eggs Plone This section might have additional lines if you have other add ons already installed Just add the collective xdv ona separate line like this eggs Plone collective xdv Runnin
82. state of theming in Plone Background The origin of Plone is one of community lore In 1999 founders Alexander Limi and Alan Runyan had a fortuitous meeting on zope the IRC channel dedicated to Zope development Zope is the framework upon which Plone is built The two of them forged an online friendship based on a mutual love of Zope Python and music Download at Boykma Com Theming Plone 3 An Overview These two men with too much time on their hands and the encouragement of Paul Everitt one of the founders of Zope Corporation built a CMS named after an electronica band with questionable musical talent In the process they also gathered a thriving community of people around them They continue to work in the service of Plone today and to grow the ranks around them The last year or so has brought tremendous change to Plone as we have moved from the Zope 2 architecture to the mixed implementation of Zope 2 and Zope 3 Don t worry too much yet about what this means suffice it to say that when Plone 3 was released the ground shifted underneath the feet of Plone users worldwide This shift not only brought a lot of power to the table but also introduced a lot of fear particularly in the hearts of themers Most of this fear is exaggerated and this book aims to quell much of this fear The theming process for Plone may be complex at the moment but it s still possible to generate beautiful high impact themes Plone is useful f
83. stylesheets While this is a quick way of suppressing stylesheets it can feel a little less elegant a little unusual too However it s worth noting that this is the cleanest way of suppressing stylesheets If you attempt to suppress stylesheets by altering the boilerplate code using GenericSetup it suppresses them across your entire Plone site not just within your own theme product This means that you can t easily layer themes on top of each other if one theme product out of them uses the stylesheets mentioned above and one does not Again don t worry too much about this For new users to Plone and CSS you likely want to say False Or if you always prefer to build on top of the stylesheets that Plone provides you rather than starting from scratch you might want to say False This is purely a personal preference though it s worth stating that the Plone s stylesheets are quite robust include_doc determines whether certain documentation will be included with your product This can be helpful especially when you re first getting used to the theming process It s important to type True or False with case sensitivity otherwise the default option will be selected If you ve followed the above instructions you should now have a vanilla theme product in your src directory that can be installed and customized Filestructure of a plone3_ theme product Next is a screenshot of a typical Plone 3 theme outputted using the plone3_theme re
84. tal replace statement about 172 working 172 technical overview Plone about 11 WSGI support 11 templates Plone site customizing 225 terminology Plone development about 50 buildout 50 easy_install 52 Instance home 51 Namespace package 52 paster 53 PasteScript 53 Python egg 51 Python package 51 Python Package Index 52 Python path 51 setuptools 51 Zope installation 50 Zope instance 50 Zope product 51 ZopeSkel 53 text editors about 39 CSS Edit 42 Dreamweaver 46 E Text Editor 45 Notepad 46 TextMate 39 WordPad 46 TextMate about 39 Bundle feature 41 features 39 42 programmer related tools 40 41 Zope Plone TextMate support bundle 42 theme product adding to buildout 69 70 generating paster used 63 installing on Plone site 71 JavaScript adding 110 JavaScript working with 109 plone3_theme product filestructure 66 68 theme product generating paster templates 63 64 Plone product generating 64 65 theme product installing on Plone site Plone site creating 71 Plone theme installing 72 site putting in debug mode 72 themetweaker themeswitcher 251 theming approaches about 283 collective xdv 284 collective xdv cons 284 collective xdv pros 284 deliverance 284 deliverance cons 284 deliverance pros 284 product package 283 product package cons 283 product package pros 283 tools Plone theming 285 traceback about 255 features 255 303 Download at Boykma Com
85. the bin plonect1 fg command or your buildout cfg has to explicitly enable debug mode in the instance section Without this you will not see CSS changes immediately even with portal_css in debug mode e If you change your CSS refresh your browser as long as portal_css is in debug mode located in the ZMI under http localhost 8080 mysite portal_css manage_cssForm and your cache is cleared Firefox s Web Developer Toolbar may come in handy here as it has a disable cache flag that can be set 80 Download at Boykma Com Chapter 5 e Ifyou change ZCML you must restart Zope You can use the plone reload egg to get around full Zope restarts e If you change GenericSetup XML you must reinstall your product or reimport the necessary step Importing is safer and gives you more control We ll discuss GenericSetup later in this chapter e If you change Python files in your filesystem product as opposed to TTW you must restart Plone e If you change Python scripts TTW you can simply refresh if you are running your Zope in foreground mode Be warned that uninstalling a theme product is generally not an option and it can be messy Uninstallation requires that a theme to have an uninstall profile written for it and if the profile is incomplete most will be you will wind up with leftovers from your theme that can be difficult to remove Similarly you should be cautious about reinstalling your product over
86. the plone portalfooter viewlet manager in our theme product so that the login logout links and other options here are listed at the bottom of the Plone page The plone app layout configure zcml file tells us this lt The personal bar gt lt browser viewlet name plone personal bar manager interfaces IPortalTop class common PersonalBarViewlet permission zope2 View gt 135 Download at Boykma Com Customizing Viewlets and Portlets If you look inside the yourbuildout buildout cache eggs plone app layout plone app layout viewlets directory you will also see a page template called personal_bar pt We don t need to modify the output for that page template for now so we can ignore this for the moment All we re concerned with here is telling the plone portalFooter to see the personal bar We copy paste the following code into our own theme product s configure zcml file located at plonetheme yourtheme plonetheme yourtheme browser configure zcml and modify it as shown lt The personal bar gt lt browser viewlet name plone personal_ bar manager plone app layout viewlets interfaces IPortalFooter class plone app layout viewlets common PersonalBarViewlet layer interfaces IThemeSpecific permission zope2 View gt Notice the dot delimited path back to the plone app viewlets IPortalFooter viewlet manager We do this because we are not modifying the behavior of the viewle
87. the viewlet manager name to inspect that viewlet manager and to reorder viewlets Here is a sample screenshot of GloWorm in action http localhost 8080 Welcome to Plone Plone site SiteMap Accessibility Contact Site Setup Search Site i A Search D only in current section J 7 RN OO i ask teint te teat inl amp admin Log out I January 2009 Mo Tu We Th Fr Sa Su Welcome to Plone aS TE ETS Se 2 8 amp by admin last modified Dec 12 2008 02 25 PM 5 6 E 8 9 1011 Congratulations You have successfully installed Plone i 12 13 14 15 16 17 18 Also available in presentation mode 19 20 21 22 23 24 25 If you re seeing this instead of the web site you were expecting the owner of this web site has just installed 26 27 28 29 30 31 Plone Do not contact the Plone Team or the Plone mailing lists about this _ a rn Man ler v GloWorm Inspector Panel x ONENESS a plone tinks search f Viewlet plone header plone portaltop Name plone header plone header y plone portalheader Manager plone portaltop plone skip li H ne ion Class Products Five viewlet viewlet simple _ plone searchbox plone logo Template zope interface interface plone header plene glebal sections Visibility Visible 3 Hide viewtet plone path bar k KELL J plo ontentviews z Find Qsereenshor J C Match case nari 35 Waa r a The only real limitation to this product is that the acti
88. theme doesn t need to be intimidating once you know where to start 13 Download at Boykma Com Theming Plone 3 An Overview While there s always going to be the question of which CMS is the most appropriate for the job it s clear that Plone has a bright future and is keeping pace with other CMS frameworks The evolution of skinning for Plone Plone has always offered a robust base skin from which to start with solid CSS hooks and it also has cleanly separated the CSS files that make skinning a fairly straightforward process The actual process of working with the skin and CSS is what has changed dramatically over time and become more complex As of Plone 2 0 skinning was most commonly done through the web via the ZMI or Zope Management Interface Working TTW via the ZMI resulted in a mixture of content and code that could not be easily pulled out of the ZMI While tools exist that helped extract skin related elements from the ZMI it was still difficult to back up sites or to preserve the configuration in the event that a site needed to be moved to another Zope instance When Plone 2 1 was released a tool known as DIY Plone Style was introduced that allowed users to quickly create a skeleton product so that users could work more easily on the filesystem Additionally a system known as GenericSetup was gaining momentum as a means of exporting settings to a skin product TTW management was still possible though pressure w
89. ul id portal siteactions tal define accesskeys python sitemap 3 accessibility O contact 9 tal condition view site actions i118n domain plone gt lt tal loop tal repeat saction view site actions gt lt li tal define first python repeat saction start and first action or last python repeat saction end and last action or position python first or last or plain tal attributes id string siteaction saction id 212 Download at Boykma Com Chapter 10 class position gt lt a href tal define title saction title id saction id accesskey python accesskeys get id i18n attributes title i18n translate tal content title tal attributes href saction url title title accesskey accesskey gt Site action lt a gt lt li gt lt tal loop gt lt ul gt This code gives us class selector hooks for the first or the last item in the list and allows us to declare CSS to not show a border on the right side of the last item like this portal siteactions li last action a hover border width 0 The rendered HTML will look something like this with the CSS selectors in place lt ul id portal siteactions gt lt li id siteaction sitemap class first action gt lt a href http localhost 8081 themingbook sitemap accesskey 3 title Site Map gt Site Map lt a gt lt li gt lt li id siteaction accessibility class plain
90. useful for styling on a per page basis and the visual editor uses them too lt prepend content html body class theme html body gt lt prepend content html1 body id theme html body gt 294 Download at Boykma Com Chapter 15 A final example that illustrates the lt append gt usage Imagine that we only have one sidebar in the Plone site but have two columns and we want both to appear inside the sidebar lt append content id portal column one div theme id sidebar gt lt append content id portal column two div theme id sidebar gt This way the second rule doesn t overwrite the first It appends the second column so both appear inside the id sidebar node lt copy gt It copies HTML nodes from the Plone side of things and inserts them inside a tag on the theme side lt copy content id portal globalnav 1i theme id main nav gt Notice how this one gets every lt li gt element inside the node with id portal globalnav in Plone and makes a copy inside the node that has id main nav in the theme lt drop gt It removes the specified element if it exists This one is a bit different than the others as it only has a content value and it only makes sense to drop an element from the Plone side Real world example Getting rid of the icon inside the user name node lt drop content id user na
91. various areas where there are menu options or buttons As you can see from the next screenshot the default Plone site shows a top navigation area various links for printing or emailing a page as well as menu actions that allow you to cut paste or otherwise manipulate the objects within a folder You may also see tabs or widgets that allow you to access the contents of a given folder a History area a Sharing tab and various tabs on the top for Home Users News and Events It may help to log into your new Plone site as we walk through these items Site Map Accessibility Contact Site Setup J i i Search Site 3 Search only in current section _ Home Users News Events amp vedaw Log out You are here Home Contents Edit Rules Sharing Histo Display Add new State Published September 2008 Mo Tu We Th Fr Sa Su ERIE changes saved 223 AS Sr Welcome to Plone 8 9 10 11 12 13 14 b t modified Sep 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 by vedaw last modified Sep 01 2008 02 59 PM Congratulations You have successfully installed Plone Also available in presentation mode Manage portlets snip Removed default text for the purposes of taking a screenshot Send this Print this History The Plone CMS Open Source Content Management System is 2000 2008 by the Plone Foundation et al Plon
92. we can install it Adding your theme product to your buildout Our theme is a Python package by default which means that it is ready to be egeified for easy distribution but it s not an actual egg yet An egg is a sort of hard boiled Python package Eggs don t include setup py or various other parts of the package Our theme product however does contain these parts Since we are still in development we want to put our new skeleton theme product into the src directory which is where we originally generated it Open your buildout cfg file located in the root of your buildout If you are working with a production buildout you can optionally create a new configuration file called development cfg and make jy your modifications there This can help to provide slightly different VN setups while in development mode versus production mode For 4 example you wouldn t want PDB debugger to be available in a buildout on a production server but you might very well want that to be part of your development buildout Open your buildout cfg file and make the following modifications in the develop and eggs and zcml parameters of the buildout and instance sections respectively based on how you answered the questions when you ran the paster recipe buildout develop other eggs here src plonetheme mytheme this tells buildout that it s a development egg and that it should find it in the srce directory rather than fetching
93. when you tell your theme product to use IThemeSpecific for a given component that component s code only affects your current theme product This is a very important step as not including this interface definition could cause your theme product to step on other themes registered in your Zope instance It s important to always use the IThemeSpecific directive when specifying browser resources except when you are writing a package that needs to be used by more than one web site such as a diagnostic utility We ll see how this works momentarily All of the components mentioned above are glued together using a combination of Python XML ZCML and TAL Plone s templating language We will get a brief introduction to ZCML here and a formal introduction to XML and TAL in upcoming chapters Introduction to ZCML Zope 3 knows how to find an adapter only if you tell it about the available adapters In our case adapters are components such as viewlets portlets and other resources that we wish to customize We do this using ZCML the Zope Configuration Markup Language ZCML is an XML dialect that is used to configure many aspects of Zope 3 code such as permissions and component registration You can do what ZCML does in Python code as well but typically it s more convenient to use ZCML because it allows you to separate your logic from your configuration Many ZCML directives are stored in files named configure zcm1 which may themselves incl
94. you can make quick fixes to viewlets and other Zope 3 templates but it s a fairly limited tool and not all pieces that comprise a theme product are represented here due to the complexities of Zope We re not going to cover this specifically as it ll make sense once you understand the broader scheme of how to do filesystem development Summary In this chapter we have learned about e Viewlets viewlet managers and manage viewlets e Portlets and basic portlet customization techniques e Extracting changes from portal_view_customizations toa filesystem product You should now have all of the major tools that you need to create a theme product In the next chapter we ll walk through a real world theme product to see all of the moving parts in action 159 Download at Boykma Com Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language Plone uses a page templating mechanism known as Zope Page Templates ZPT ZPT in turn uses a language known as the Template Attribute Language TAL ZPT also uses a language called Macro Extensions known as METAL which is outside of the scope of this chapter In this chapter we ll cover the theory of TAL s basic constructs and see how a real Plone site might output dynamic content using these expressions For the definitive information on Zope Page Templating please refer to The Zope Book http www zope org Documentation Books ZopeBook 2_
95. you can carry across what you learn in using collective xdv to the Deliverance project should you need to do that at a later point The basic syntax and approach is largely the same although the details of the implementation can differ slightly Choosing the appropriate theming approach You have several alternatives when it comes to theming Plone at this point Let s look at what makes them different Product Package e Pros The ultimate in flexibility and control More flexibility when it comes to theming the select parts of a site or sub sites e Cons More complex requires a passing familiarity with ZCML and Python Less upgrade resistant as templates change P8 p g Shipping your own templates will get you out of sync with the main product 283 Download at Boykma Com The Future of Theming for Plone collective xdv e Pros Can be compiled down to XSLT transforms that run as part of the web server process so you don t need a separate proxy or WSGI setup http www wsgi org wsgi This also means a slight performance advantage over Deliverance Easy to bootstrap with Plone e Cons Uses XPath selectors instead of the more familiar CSS selectors not a big deal as you may fear since we can use Firebug to make it create the XPath expressions for us as we ll see later Deliverance e Pros compared to XDV Standalone can be used without Plone to theme other sit
96. 0 hegre as border bottom width st hetoj veda ofre org DE As bender color root tide Mortars Com Plant Deferred bonder teft color woot pet bordaria aps berderihecoke rac lt A desomcerouselbarner mcarousebbanners2 gt bordene a Aden aour bene tha set berre I gt bende top coler roi a berd togrvadth pee fet herder wath tor x AR s shane x lt gt Cao Read Ony Properties Care Delak Syke Vakars IE Developer Tacibar 23 Download at Boykma Com Skinner s Toolkit There are a few caveats here e The Developer Toolbar icon may not be visible by default If you do not see it after restarting Internet Explorer click the right facing arrows at the end of the IE7 command bar to view all the available Toolbar buttons e Some menu items are unavailable grayed out when running Internet Explorer in Protected Mode on Windows Vista To use those options temporarily turn off Protected Mode or right click the Internet Explorer icon in the Programs menu and choose Run as administrator e In IE6 or in IE7 with tabbed browsing off using the validation links will navigate the current window to the validation page To launch the validation links in a new window open the Tools menu click Internet Options and uncheck Reuse windows for launching shortcuts in the Advanced tab or use IE7 with tabbed browsing enabled Generally you can use this tool by expanding the left side of the panel displayed to n
97. 3 components since we covered skin layers in the last chapter Let s talk briefly about what these items are Viewlets are typically regarded as the furniture on a page breadcrumbs logo footer and so on Portlets meanwhile are the pieces that render in either the right or left column of your site for instance a login box news events or the calendar They re similar to viewlets but handled slightly differently behind the scenes You can add more viewlet or portlet managers containers if you need to which allows you to move items into areas of the page that you wouldn t ordinarily be able to do Viewlets and portlets will be covered in more detail in the next chapter 112 Download at Boykma Com Chapter 6 Page templates are the pieces of code with the extension pt that generate HTML that is then outputted to the browser when the page is rendered Page templates are typically driven by a combination of Python and TAL Next a browser page can be defined as a component that can be found during URL traversal and that can usually render itself For example it might be something like a home page view that is accessible via the following URL http localhost 8080 mysite homepage view or http localhost 8080 mysite homepage view Typically it contains a page template that is backed by a Python class Since you generally don t want to be running un trusted code over the Internet you should instead use a browser
98. 38 Download at Boykma Com Chapter 2 Text editors The last key piece to successfully skinning a site is to choose a text editor or CSS editor that matches your needs and plays well with Plone We are not talking about a word processor here like Microsoft Word or Pages rather a text editor is a type of program used for editing plain text files Text editors are often provided with operating systems or software development packages and can be used to change configuration files and programming language source code We ll look at a few of the more popular text editors that are appropriate for Plone development and theming TextMate TextMate is a combination of text editor and programming tool that is exclusively for the Mac and can be found at http macromates com One of the key joys of working with TextMate is that it lets you open up an entire file structure at once to make navigation between related files easier For Plone this is essential Your average file structure will look something like this 008 TextMate Open lt gt v FE copperriver B Q search C plonetheme Network ca E Macintos J plonetheme copperriver Webkit af src FF rockaway A Applications 2 buildouts fS Documents amp Music G zope Pictures 3 opt i Desktop E Macintosh HD FA Uprojects veda FF opt FE otis d Recent Places L copperriver FE copperriver_templates default EF
99. 68 tal content statement 169 How this works in Plone 169 tal repeat statement 169 How this works in Plone 170 tal replace Statement 172 How this works in Plone 172 tal omit tag statement 173 How this works in Plone 173 tal on error statement 174 How this works in Plone 174 TAL structure expression syntax 174 How this works in Plone 175 iv Download at Boykma Com Table of Contents Order of operations 176 Built in names in TALES 176 Summary 177 Chapter 9 Creating Installing and Tweaking our Theme 179 About the theme 179 Creating a theme product 181 Altering the theme product s structure 183 Renaming the theme 183 Shortening folder names 184 Adjusting how stylesheets and images are used 186 Installing the theme product 188 Adjusting web site content to support the design 191 Summary 196 Chapter 10 General Styling and Templating Changes 197 Modifying the various sections of the page 197 Basic styling 198 Changing the logo 201 Adding a banner image 207 Customizing the portal actions 207 Adjusting the searchbox display 214 Moving the searchbox 218 Adjusting the personal bar 219 Suppressing the top navigation 220 Moving and styling the breadcrumbs 221 Base portlet styling 224 Adjusting the footer and the colophon 225 Altering the navigation 229 Summary 232 Chapter 11 Custom Page Views and Sectional Styling 233 Changing the default home page display 233 Using CSS styles and the visual editor 233 Using
100. 7 Title CSS Media Condition jnot portal portal_memt rel Merging allowed 7 Render type Caching allowed 7 Compression type v ATL css To Title CSS Media Condition python portal restricted rel Merging allowed jy Render type Caching allowed 7 Compression type m IY fbasecss t 2 Title CSS Media Condition rel Render type Compression type 190 Download at Boykma Com Chapter 9 Now if you visit your site s home page you should see the installed product as seen next but we need to do a few things to make it look fully formed SITEMAP ACCESSIBILITY CONTACT SITESETUP Description of the site amp vedaw log out contents view edit rules sharing display V add new state published Y JUNE 2009 Mo Tu We Th Fr Ea Changes saved Po Welcome to Plone by vedaw last modified Jun 15 2009 05 02 PM Congratulations You have successfully installed Plone Also available in presentation mode Ti are Manage portlets snipped content for screenshot History Send this Print this powered by Plone Copyright 2008 Adjusting web site content to support the design As we can see the installed theme does not exactly match the look of the first screenshot of this chapter Many CSS styles are in place but the searchbox is in the wrong location and there is a calendar portlet present You may also notice that breadcr
101. Audience Navigation description This portlet displays the site s audiences gt lt portlets gt When we install our theme product this portlet should automatically be available for installation via the manage portlets tool Write the GenericSetup to create a new CMFAction category and actions We add the following code to our theme product s portlets xm1 file lt xml version 1 0 gt lt object name portal actions meta_type Plone Actions Tool xmlns i18n http xml zope org namespaces i18n gt lt object name audience navigation meta_type CMF Action Category purge False gt lt property name title gt Audience Navigation lt property gt lt object name example meta_type CMF Action gt 153 Download at Boykma Com Customizing Viewlets and Portlets lt property name title gt Example Audience lt property gt lt property name description gt The description of the audience is available on mouseover in the audience navigation portlet lt property gt lt property name url_expr gt string globals view navigationRootUr1 example lt property gt lt property name icon_expr gt lt property gt lt property name available expr gt lt property gt lt property name permissions gt lt element value View gt lt property gt lt property name visible gt True lt property gt lt object gt lt object gt lt object gt When we install our theme product this C
102. Choose your product from the list of installable products If you do not see your theme present you have not correctly registered it in your buildout cfg file Click on the checkbox next to your theme product and choose Install Note that the ZMI quick installer is functionally the same as the Add on Products option in the Plone Site Setup panel The ZMI interface just gives you some additional options Choosing an extension profile when creating a new Plone site is also functionally the same Putting your site into debug mode Before going any further we will put our site s stylesheets into debug mode This allows us to see the changes that you will apply to stylesheets immediately after reloading a page without having to restart the Zope server a This is one of the most common points where new skinners stumble Q Remember to put your site s portal_css into debug mode but only while in development as it will slow down your site In order to set portal_css in debug mode go to the portal_css tool in the ZMI by pointing your browser to an address that should look like http localhost 8080 mysite portal css manage_cssForm Then check the Debug development mode and click the Save button You can also access this by drilling down into portal_css through the ZMI 72 Download at Boykma Com Chapter 4 You can optionally put your entire Zope in debug mode This must be configured programmatically in a file usually l
103. Content gt lt dl class portalMessage info id kssPortalMessage style display none gt lt div id viewlet above content gt v lt div id content gt lt viewlet manager that renders tabs and body for storyboxes gt v lt ul id storybox tabs gt border left wid border right color border right style border right widt rgb 224 228 2 le solid rder 1 idth 1px color rgb 102 102 102 M cursor auto pad i padding top 6px p lt li gt f v lt i gt text decoration none width 59px lt a id storybox tab 1 href http localhost 8080 Dogwoodinitiative DogwoodInitiative test 1 index 1 class plain title 200 million gas Thermos gets the nod gt just testing lt a gt Mires Reece lt li gt external content lt ul gt alhrefA https content a link Wy id biit https content afhref malito lai MV hate s ae y if i content a link malito content lt div class id parent fieldname text gt a hrefA news content alink lt div class relateditems gt ley Sooner See Ma P content a link ftp content la siw gss ruacan eA 3 alhrefA Irc content a link Irc lt div class documentActions gt content a hrefA callto lt div class reviewHistory id review history gt content alink callto content spins a hrefA webcal content a link webcal content lt span id contentBottomLe
104. Ene portal globalnav li a hover portal globalnav li a print css Testing2 TK Description Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh eulsmod tincidunt ut dropdown menu css Featured one matching sty 40 Years Supporting Natural Air Clean Spaces and Clean portal globalnav li a Water for Washington 5 Description goes here TK 40 years sp r L BER all Kesied Reached i in Buckhorn Gold Mine Controversy Foundation and founder of the first Expanding the arrow to the right of the Make A Difference button in the above screenshot selects the ID globalnav wrapper as indicated here and in the top hierarchy bar X gt html gt body section front page template features_topic_view gt div visual portal wrapper gt div portal top gt div portal header CKE U FUEREN WASHINGTON aboutus contact donate events press room publications A ENVIRONMENTAL Search Sie gt COUNCIL ony in current section Applied Styles A Shared Vision Issues amp Campaigns Current Legislation Make A Difference pF zu x A f print css one matching style div p ul dl ol jiz wec css Download at Boykma Com Skinner s Toolkit If you select one of the styles in the black Applied Styles window it pops up a message that asks if you wish to override an existing stylesheet with a local stylesheet Answering in the affirmative opens a small CS
105. Environment Setting up your development environment In order to get set up and start theming we first must get the development environment set up This generally consists of installing Subversion optional but highly recommended and of course installing Plone and all of its dependencies Subversion for version control The importance of version control cannot be underestimated in the development process especially where teams are concerned It can also be valuable for a team of one person if only to keep your product safe and up to date in a central location known as a repository It s not required but serious themers will find it invaluable Subversion is not included by default with a Plone installation Subversion is a free open source version control system originally started by Collabnet http www collab net It manages files and directories and the changes made to them over time Subversion often referred to as svn allows you to recover older versions of your data or examine the history of how your code changed In this regard you can think of a version control system as a sort of time machine Over the course of a project it s especially important to check in your product s changes in stages In Plone you generally want to check in your theme product immediately when you create it after significant coding is done that does not adversely affect other Plone products and at the tail end of your project You will
106. MF action category should automatically be created as well as a sample action Register the portlet in your theme product Next we register our portlet in our browser configure zcml file lt configure xmlns http namespaces zope org zope xmlns browser http namespaces zope org browser xmlns plone http namespaces plone org plone i18n_domain plonetheme audience gt lt include package plone browserlayer gt lt genericsetup registerProfile name default title Sample Audience Navigation Portlet directory profiles default description Sample Audience Navigation Portlet provides Products GenericSetup interfaces EXTENSION gt lt interface interface interfaces IAudienceNavigationLayer type zope publisher interfaces browser IBrowserSkinType name gt lt include package plone app portlets gt lt plone portlet name sample audiencenavigation AudienceNavigation interface audiences IAudienceNavigationPortlet assignment audiences Assignment 154 Download at Boykma Com Chapter 7 renderer audiences Renderer addview audiences AddForm editview audiences EditForm gt lt configure gt Notice that we have to include the plone app portlets package in order to create or modify a portlet Next restart Zope so that it can read those lines of code bin instance fg Enable the portlet Finally to expose the portlet to your Plone site you should inst
107. Map Accessibility Contact and Site Setup Site Map Accessibility Contact Site Setup Search only in current section Search Site 2 vedaw Log out If you want to add an additional menu option here or in another category for example Site Help which may be available to persons with managerial rights you can add anew CMF action You would specify the Title Description i18n internationalization Domain if you wish to use Plone s translation services and the URL to which the link would point via a TALES expression Next you would specify the URL for an icon to correspond with the action if one exists any specific conditions using a TALES expression and then select the permissions required for that action In this case a new Site Help action would be specified as follows 84 Download at Boykma Com Chapter 5 Name Value Title Site Help Description Documentation specific to this website FA 118n Domain URL Expression Icon Expression plone string S portal_url site help Condition Expression Permissions Manage Vocabulary Manage WebDAV Locks Manage Z Classes Manage ZCatalog Entries Manage ZCatalogindex Entries Manage portal Visible Save Changes Delete Type string text string string string string multiple selection boolean Folder buttons category Within the folder buttons category you w
108. Plone 3 Theming Create flexible powerful and professional themes for your web site with Plone and basic CSS Veda Williams PACKT PUBLISHING BIRMINGHAM MUMBAI Plone 3 Theming Copyright 2009 Packt Publishing All rights reserved No part of this book may be reproduced stored in a retrieval system or transmitted in any form or by any means without the prior written permission of the publisher except in the case of brief quotations embedded in critical articles or reviews Every effort has been made in the preparation of this book to ensure the accuracy of the information presented However the information contained in this book is sold without warranty either express or implied Neither the author nor Packt Publishing and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals However Packt Publishing cannot guarantee the accuracy of this information First published July 2009 Production Reference 1100709 Published by Packt Publishing Ltd 32 Lincoln Road Olton Birmingham B27 6PA UK ISBN 978 1 847193 87 2 www packtpub com Cover Image by Parag Kadam paragvkadam gmail com Download at Boykma Com Credits Author Veda Williams Reviewers Steve McMahon De
109. Plone add on is a lovely easy to use CSS tool for OS X It can be purchased at http macrabbit com essedit for around 30 00 To get started click on the Add Site URL button It allows you to navigate to either a localhost site or a live site Next click on the Inspector button An inspector pane pops up that is updated as soon as you click on an element on your page The element is also highlighted nicely and shows arrow indicators if you want to click to expand to the containing object and show the parent s CSS instead 42 Download at Boykma Com Chapter 2 e e 40 Years Igniting a Movement Creating Results Washington Environmental Council Buy Now to Unlock a i Add File Add Site URL Active Inspector Style Sheets Override Welcome WhatsNew 40 Years Igniting a Movement Creating Results Washington E L X gt gt div visual portal wrapper gt div portal top gt div portal header gt div globalnav wrapper gt ul portal globalnav gt li portaltab MakeDifference plain JEP WASHINGTON aboutus contact donate events press room publications ENVIRONMENTAL Search Site gt COUNCIL Conty in current section OO lt lt Applied Styles P ae s portal globalnav li hover a portal globalnav a hover MOS portal globalnav a visited Areas Clean Air and Glean portal globalnav li a public css f Water for Washington F
110. S editor window where you can make additional changes see the immediate effects and still access the Applied Styles window navigator e808 extracted style css Buy Now to Unlock CD Ss me i z Lar Cwen G3 8 A Style Group Comment New Selector Search Export Preview Milestones Validate Editors extracted style css Styles Hl 1 override http 404 V A Fonts amp Color 22 http 40 style css notfound com style css 2 Color E L CSS Document 3 CSS Document Size lt i 5 body z FEER Ta 6 font family Times New Roman SHOE y Times serif Style B B i i None 7 color 000 seee et REE 8 font size 12px Decoration aa aa None 9 line height 150 10 background image none Variant SMALL CAPS Normal 11 background repeat repeat x Font Family 12 width 634px 13 margin auto 14 7 15 16 afd e E kv Ax 17 text decoration none T 18 font weight bold gt t Text 19 color 000 gt Ei Background 20 text decoration underline gt 2 Dimensions 21 b gt Positioning amp Page Flow 22 a visited I gt Borders 23 color 000 gt 9 Bullets amp Advanced 24 7 25 a active i 26 color 000 onal x d In this case I opted to let it extract all of the CSS from my theme product s main stylesheet wec css This prevents the issue of having to integrate your changes from a blank stylesheet into you
111. TemplateFile logo pt def update self portal state getMultiAdapter self context self request name u plone portal state self navigation_root_url portal state navigation root url portal portal_state portal logoName portal restrictedTraverse base properties logoName self logo_tag portal restrictedTraverse logoName tag self portal_ title portal_state portal title For many of the default viewlets we don t want to change the Python code that renders our viewlet we only want to change the template that outputs the viewlet Here we only need to understand that the class name is LogoViewlet and that a page template named logo pt renders the viewlet It s rare that we d want to modify the LogoViewlet class especially for non coders but it is fairly likely that we d want to alter what HTML appears in logo pt Now that we can distinguish between the types of viewlets we ll examine how these viewlets are registered in a theme product Registering viewlets in a viewlet manager As we saw earlier viewlets are aggregated into viewlet managers We can register viewlets with managers by modifying the configure zcml file located in our theme product similar to how this happens in the plone app layout configure zcml file located at yourbuildout buildout cache eggs plone app layout plone app layout viewlets configure zecml In our sample theme we want to register the plone personalbar viewlet with
112. Zope 3 portlet First in a fresh Plone theme product we create a new file named audiences py in our browser folder and insert the following code This code will output text and images from various locations inside of our Plone site and will use a page template called audiences pt Notice that it is using the Renderer class here and the memoize package to cache the return value of the function from zope component import getMultiAdapter from zope import schema from zope formlib import form from zope interface import implements from plone app portlets portlets import base 150 Download at Boykma Com Chapter 7 from plone memoize instance import memoize from plone portlets interfaces import IPortletDataProvider from Products Five browser pagetemplatefile import ViewPageTemplateFile class TAudienceNavigationPortlet IPortletDataProvider portlet title schema TextLine title u Title for the portlet default u Information for required True class Assignment base Assignment implements IAudienceNavigationPortlet def init self portlet_title self portlet_title portlet_title property def title self return u Audience Navigation class Renderer base Renderer render ViewPageTemplateFile audiences pt property def available self return len self data gt 0 def audiences self Return obj with attributes id url title description selected str
113. a Com Setting up your Development Environment PyPI or the Python Package Index also known as The Cheese Shop Named after a Monty Python sketch PyPI is a repository that hosts thousands of Python packages http pypi python org pypi You can browse this if you are looking for a particular package and developers can also add their own packages to this repository More importantly buildout and the easy install script can query this index to download and install eggs automatically Many eggs are now also stored in the Plone Subversion respository which is set up as a PyPi server easy_install Easy install is a console script that can be used to search the PyPi and other repositories and then install those packages into the global Python environment Generally speaking we will only rarely use easy install to install eggs as easy install doesn t give us adequate control over which eggs are active our buildout will take care of egg installation Namespace package Namespaces are a mechanism used by advanced programming languages such as Python to help programmers control complexity and avoid name collisions A namespace package is a feature of setuptools that makes it possible to distribute multiple separate packages sharing a single top level namespace For example the packages plone theme and plone portlets both share the top level plone namespace but they are distributed as separate eggs When installed each egg live
114. a skins guria_ styles The important bits of code you want are as follows lt dtml with base properties gt do not remove this lt dtml call REQUEST set portal_url portal url gt not this either DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE lt dtml with gt Again we would need to restart our Zope at this point as we have modified our ZCML i If we had already installed our theme product we d also have to import gt lt our cssregistry xml file via portal_setup in the ZMI to capture the new GenericSetup profile settings However we have not yet installed the product so we do not need to worry about this 187 Download at Boykma Com Creating Installing and Tweaking our Theme Installing the theme product Now that we ve looked a few of the changes we ve made to distinguish our theme product from a default Plone theme let s go ahead and install it Some of you may already have installed your theme product and that s okay Go to your Zope instance for example http localhost 8080 manage_main and choose Plone Site from the drop down list on the top right Or you can go to this URL http localhost 8080 manage_addProduct CMFPlone addPloneSite You will then see the following screen For the purposes of this chapter we are calling our Plone site mysite Make sure you add a description for your Plone site as we ll need that later Add Plone Site Enter
115. able structure Without this feature skinning for Plone would be much more time consuming TextMate also offers numerous programmer related tools e You can open two files at once or more and using the diff option you can compare the files easily e Subversion svn support e Ability to search and replace in a project e Regular expression search and replace grep e Auto indent for common actions such as pasting text e Auto completion of brackets and other characters e Clipboard history 40 Download at Boykma Com Chapter 2 e Foldable code blocks e Support for more than 50 languages e Numerous key combinations for example Apple T opens a search window that makes it easy to locate a file e Themable syntax highlight colors e Visual bookmarks to jump between places in a file e Copy paste of columns of text e Bundles e And much much more The Bundle feature is one of the more interesting aspects of the tool If you look at the HTML bundle for example it shows a list of common actions that you might wish to perform in a given document and on the right the code that spawns that action and the hot key that activates it Skoka Bundle Editor f Show All zs Edit Command Validate Syntax W3C gt ActionScript gt Apache Save Nothing gt AppleScript gt Blogging Command s usr bin eny ruby wKU gt Bundle Development STDOUT syne true PE page STDIN read
116. aces calendar_widget Products C classic pt zope publisher interfaces browse f collection pt zope publisher interfaces browser IDefaultBrowserLayer collection pt plonetheme kswild browser interfaces IThemeSpecific copperriver logo plonetheme copperriver browser interfaces IThemeSpecific customizezpt html zope publisher interfaces browser IDefaultBrowserLayer dogwood content storybox_body dogwood content interfaces IDogwoodContentLayer dogwood content storybox_tabs dogwood content interfaces IDogwoodContentLayer edit markers html zope publisher interfaces brow DefaultBrowserLayer events pt zope publisher interfaces browser IDefaultBrowserLayer five_template zope publisher interfaces browser IDefaultBrowserLayer folder_contents zope publisher interfaces bro IDefaultBrowserLayer folder_factories zope publisher interface fi form_widget Products CMFDef r fscvl_static pt Products FSCVLThe full_review_list zope publisher interfaces browser IDefaultBrowserLayer keyword_migrator zope publisher interf owser IDefaultB kss_javascript zope publish terfaces browser IDefaultBro kswild banner plonetheme kswild browser interfaces IThemeSp language pt zope publisher interfaces browser IDefaultBrowserLayer login pt zope publisher interfaces browser IDefaultBrowserLayer login pt zope publisher interfaces browser IDefaultBrowserLayer manage portlets macros zope publisher interfaces browser IDefaultBrowserLay
117. actions margin left 5px margin top 0px And for IE7 we inserted the following hack html portal siteactions margin left 9px margin top 0px When the user hovers over each item the above settings remain but the color of each link changes This color is controlled by Plone s public css file which relies on the use of DTML and base properties portal siteactions li a hover background color amp dtml globalBackgroundColor color amp dtml globalFontColor border amp dtml borderWidth amp dtml borderStyle amp dtml globalBorderColor We only override the items we don t want from Plone s public css file specifically the background color and the border properties We don t need to respecify the pieces we want to keep You ll also notice in the Guria theme s CSS that there is a rule that mentions a last action portal siteactions li last action a hover border width 0 Plone by default does not provide a hook to sniff out what the last item in the list is This means that we need to customize the viewlet that renders these site actions 210 Download at Boykma Com Chapter 10 E O If you wanted to suppress a border on the last item in the list of site actions using CSS each list item has a unique CSS id you could In sites where some site actions are only visible to logged in users when a user logs in more items are added to the site actions area and t
118. age template that renders the viewlet The original template path bar pt located in yourbuildout buildout cache eggs plone app layout plone app layout viewlets looks like the following lt div id portal breadcrumbs i18n domain plone gt lt span id breadcrumbs you are here i18n translate you are here gt You are here lt span gt lt a il8n translate tabs home tal attributes href view navigation root url gt Home lt a gt lt span tal condition view breadcrumbs class breadcrumbSeparator gt lt tal ltr condition not view is rtl gt amp rarr lt tal ltr gt lt tal rtl condition view is rtl gt amp raquo lt tal rtl gt lt span gt lt span tal repeat crumb view breadcrumbs tal attributes dir python view is rtl and rtl or ltr gt lt tal last tal define is last repeat crumb end gt lt a href tal omit tag not crumb absolute url tal condition python not is last tal attributes href crumb absolute url tal content crumb Title gt crumb lt a gt lt span class breadcrumbSeparator tal condition not is last lt tal ltr condition not view is rtl gt amp rarr lt tal ltr gt 143 Download at Boykma Com Customizing Viewlets and Portlets lt tal rtl condition view is rtl gt amp raquo lt tal rtl gt lt span gt lt span tal condition is_ last tal content crumb Title gt crumb lt span gt lt tal last gt lt span gt lt div gt We will repla
119. age will be rendered lt p tal content here homepage tal on error string This is not the homepage gt This is the homepage lt p gt How this works in Plone While it isn t used often tal on error can be used to great advantage In portlets fetcher pt found in 3 x versions of the CMFPlone product it is used to alert Plone users to problems with portlets lt metal block tal repeat slot sl gt lt tal dontcrash tal on error Structure python context plone_ log Error s on s while rendering portlet s error type error value slot 0 or amp lt div class error amp gt Error s on s s amp lt div gt error type slot 0 error value tal define pathexpr python slot 0 usemacro python slot 1 gt snip lt tal dontcrash gt lt metal block gt If Plone attempts to render portlets and there is a problem it will output the text Error while rendering portlet This means that Plone swallows the error gracefully instead of rendering a traceback error TAL structure expression syntax As we saw earlier when all of the tal content and tal replace expressions above were interpreted and turned into output something extra was happening The TALES engine was scanning strings for HTML s reserved characters such as lt gt and amp and replacing them with HTML entities This is great for two reasons 174 Download at Boykma Com Chapter 8 e It makes it easier for you to
120. aking up the standard library the interpreter s site packages directory where third party global modules and eggs are installed and the Zope instance s home Buildout generally controls which additional eggs are loaded Python package A Python package is a general term describing a redistributable Python module At the most basic level a package is a directory withan init__ py file and some Python code Zope product A Zope product is a special kind of Python package used to extend Zope In old versions of Zope all products were directories inside the special Products directory of a Zope instance and would have a Python module name beginning with Products For example the core of Plone is a product called CMFPlone known in Python as Products CMFPlone We will use some of the files in the CMFPlone product during the skinning process Python egg As stated before eggs are a way to package and distribute Python packages Eggs contain metadata such as the author s name email address and licensing information as well as information about dependencies Plone themes created using current technology are considered eggs Setuptools Setuptools is the Python library that powers the egg mechanism It is able to automatically sniff out and download dependencies for eggs that you wish to install You can read more about eggs at the PEAK web site http peak telecommunity com DevCenter PythonEggs 51 Download at Boykm
121. al viewlet manager provided by plone app layout because we don t want to move it on the page It looks at plone app viewlet s original SiteActionsViewlet class and at a locally defined site _actions pt It is specific to the current theme via the IThemeSpecific declaration 211 Download at Boykma Com General Styling and Templating Changes v Again you could rename the viewlet to something like mytheme site_ GA actions if you wanted to just make sure that all of your code matches up to that name and modify viewlets xm1 if you need to If we open the original site _actions pt file found in the plone app layout package we can see the following code lt ul id portal siteactions tal define accesskeys python sitemap 3 accessibility O contact 9 tal condition view site actions 118n domain plone gt lt li tal repeat saction view site_ actions tal attributes id string siteaction saction id gt lt a href tal define title saction title id saction id accesskey python accesskeys get id i118n attributes title i118n translate tal content title tal attributes href saction url title title accesskey accesskey gt Site action lt a gt lt li gt lt ul gt As you can see there is no code here that assigns a CSS selector to the last item in the list We therefore need to copy this template to our browser folder and modify the code as follows lt
122. al_url library lt property gt lt property name icon_expr gt lt property gt lt property name available_ expr gt lt property gt lt property name permissions gt lt element value View gt lt property gt lt property name visible gt True lt property gt lt object gt lt object name pressroom meta_type CMF Action i118n domain plone gt lt property name title i18n translate gt Pressroom lt property gt lt property name description i18n translate gt lt property gt lt property name url_expr gt string portal_url pressroom lt property gt lt property name icon_expr gt lt property gt lt property name available_ expr gt lt property gt lt property name permissions gt lt element value View gt lt property gt lt property name visible gt True lt property gt lt object gt lt object gt If you were uncertain of the format to follow you can go to the portal_setup area located at http localhost 8080 mysite portal setup manage exportSteps available via the Export tab at the top Choose the Action Providers option and click on the Export button The Guria theme does not use GenericSetup to manage the site actions options as this is a distributed theme Instead users are required to manage the items in this area manually via the portal_actions area of the ZMI or to modify the theme product further as described above Let s style the default site actions that
123. all the theme product You can then verify that it works by going to the following URL http localhost 8080 myplonesite manage portlets In the drop down list on this view you should see an Audiences portlet listed Add the new portlet and when you visit the home page you should have a new portlet listing the contents of the new CMF action category Using Classic portlets in a theme product Optionally you can create a Classic portlet Classic portlets can be distinguished from newer portlets by the fact that they are portlets that behave exactly like former Plone 2 x portlets Thus they do not require boilerplate code to make them work In other words a Classic portlet is typically just a self contained page template whereas newer Zope 3 styled portlets contain more hooks that allow you to do more fancy stuff such as live reconfiguration If you create a Classic portlet it will live in your theme product s skins templates directory not in the browser space This is optional of course To install it on your site you must add that portlet as a Classic portlet via manage portlets If your portlet is named my portlet pt then add it using the syntax my_portlet corresponding to the name of the page template you are using It is important that you do not add the pt extension when using manage portlets to add Classic portlets 155 Download at Boykma Com Customizing Viewlets and Portlets An example of a Cla
124. allows for round trip collaboration by themers and programmers A designer may create a template as he she creates a normal XHTML document using placeholder text The designer may then pass it to a programmer or themer who knows TAL attributes and can make it dynamic Then the template can go back to the designer for refinement At every step it s valid XHTML and plays well with web editors and validators XHTML contains tags including e body e P e div e table e a e img Almost all tags in XHTML have attributes such as id class and title An attribute can be thought of as a characteristic that an object knows about itself For example you would never say lt body src gt but you would say lt img src alt gt This is where attributes come into play in Zope Page Template TAL simply allows us to add attributes to XHTML objects such as those listed above These attributes are all in a special XML namespace so they do not interfere with other markup and are ignored by validators In order to retain one hundred percent XML compatibility you will need to specify the necessary namespaces you need such as lt html xmlns tal http xml zope org namespaces tal xmlns metal http xml zope org namespaces metal gt 162 Download at Boykma Com Chapter 8 It might be helpful to look at some of the standard Plone page templates to see what other namespaces might come into play but these are the two
125. ameworks To understand the current state of theming with Plone it s helpful to examine a rival content management system s theming story In this case we will look at Drupal a popular open source CMS that is written in PHP and touch briefly on WordPress Both Plone and Drupal provide online theming manuals Plone also has additional quick start documents that explain how to build a theme in Plone 3 These documents have been integrated into the Plone theming manual and include practical instructions on how to accomplish common tasks It is on par with Drupal s theming manual As of this writing both projects have solid theming documentation although Drupal s might be organized slightly better Drupal may have more theming books than the Plone community but it s worth mentioning that the theming documentation for Plone is quite helpful and covers most use cases Unlike Drupal the book you are reading now is the first book specifically geared toward theming with Plone but it is the beginning of a trend Basically what this means is that either CMS is a good choice and Plone has the documentation ready for new themers Another telling point is the availability of open source themes Interestingly at one point Drupal had the themes drupal org site that allowed users to test drive the available themes for Drupal As of Drupal 5 0 the site was abandoned due to the shortage of volunteers WordPress also offers a number of add on themes t
126. anagers In the above example the IPortalTop manager is a viewlet manager that renders the contents of any viewlets controlled by that manager using the class OrderedViewletManager It s not really important to understand exactly what OrderedViewletManager does except to realize that it outputs the viewlets contained within a given viewlet manager in a specific order The OrderedViewletManager class is used by all viewlet managers in Plone therefore all of the viewlet managers behave the same way They are merely containers that hold the viewlets 131 Download at Boykma Com Customizing Viewlets and Portlets Meanwhile the plone header viewlet listed above is managed by the viewlet manager that implements the IPortalTop interface outputs the HTML found in portal header pt and is available to anyone with the view permission We can see which viewlets are assigned to which viewlet managers through the web using a special interface often referred to as manage viewlets You may see this view in action at http localhost 8080 Plone manage viewlets or another URL where Plone is the name of your Plone site The next screenshot demonstrates what the manage viewlets view looks like ViewletManager plone portaltop plone app layout viewlets interfaces PortalTop Viewlet plone header 0 1 hide ViewletManager plone portalheader plone app layout viewlets interfaces IPortalHeader Viewlet plone sk
127. and we re always happy to have more contributors In the meantime this book attempts to break down the barriers to Plone 3 theming in a way that makes it easier for non programmers to successfully change the look and feel of their sites While themers who are accustomed to working with systems such as WordPress and Drupal may find the learning curve challenging with some effort it is still possible to generate attractive and robust themes I hope you enjoy the ride 15 Download at Boykma Com Theming Plone 3 An Overview Summary In this chapter we have learned that e The current theming story for Plone is challenging for new themers and has become even more complex with the newest release of Plone e Plone is on par with other CMS frameworks in terms of the theming story e Itis possible to create attractive themes in Plone 3 but it requires extra effort and some knowledge of programmatic concepts Next we will look at the tools necessary for any themer to be productive and then dive deeper into the actual theming process Onward 16 Download at Boykma Com Skinner s Toolkit Choosing the right tools for implementing a design in Plone is the most important step Fortunately there are a number of tools available that make the process much easier We will cover graphic design tools browser toolbars and extensions CSS validators text editors and more Graphic design tools Any serious skinner need
128. are three tabs that are important to point out here Import Export and Snapshot We ll look at each of these in turn but first let s get a sense of what GenericSetup is GenericSetup introduces the idea of the configuration profile A profile is essentially a set of steps defined using XML Each xm1 file defines what happens in one of those steps Note the fundamental difference between a profile and an install method install methods define a set of steps that must be run to get a result whereas a profile actually describes the result itself If you export all the steps from portal_setup you end up with XML defining the steps to get back to a defined state of the site so it can feel like it describes an end result But that s not true in general particularly not in the partial profiles that get run when a product is installed Practically all of the various knobs and twiddling that occur in the ZMI can be exported to the filesystem via XML files Additionally this XML can be tweaked by hand to create an import profile such that when the product is installed or the GenericSetup profile is imported by hand the settings will take effect An example here is that you might wish to turn on a new portal_tab for your site and have it display when your filesystem product is installed If you find that you are doing a lot of tweaks in the ZMI GenericSetup may save you some time in terms of getting lots of settings the way you want them quickly and e
129. as buildout may overwrite your changes buildout cache eggs Contains eggs that buildout has downloaded These will be explicitly activated by the control scripts in the bin directory bin buildout for example On occasion you may wish to add a new egg here but the average theme level developer will never have a need to do so This folder should be regarded just like parts which will be managed by buildout 59 Download at Boykma Com Setting up your Development Environment buildout cache downloads Contains non egg downloads such as the Zope source code archive You will rarely use this directory This folder should be regarded just like parts which will be managed by buildout develop eggs This folder is useful for programmers wishing to do development on eggs It differs from the eggs directory in that it keeps the egg separate until development is complete It s generally maintained by buildout varf Contains the log files in var 1og and the file storage ZODB data in var filestorage Data fs This is also where you would put existing data fs files if you are skinning around an existing site migrating a database moving an entire site to a new server or instance or for creating multiple mount points We ll cover mount points in a moment Buildout will never overwrite these files src Initially empty You can place your own development eggs here and reference them in buildout cfg F
130. as mounting to move away from working through the ZMI Very little changed for themers in the transition from Plone 2 1 to Plone 2 5 Generally speaking themers only had to know where to find certain knobs and switches in the ZMI modify Plone s default templates understand the TAL templating language and work with CSS to make changes to their sites While modification of basic templates is still a legitimate approach for writing templates and business logic there is an extra layer of templating involved now known loosely as viewlets and portlets that themers need to know about Filesystem development is now the present state of theming While it may sound daunting to work on the filesystem once you get started it s actually quite liberating As of Plone 3 a system known as buildout was introduced as well and new visual design and deployment schemes were revealed that enabled developers to create a repeatable testable development environment that could be shared across teams For themers this meant learning how to manage a development environment without necessarily having the programmatic knowledge to do so Thankfully Plone s installers mostly take care of this now 14 Download at Boykma Com Chapter 1 In addition themers not only had to understand the previously mentioned technologies but they also had to learn about Zope including such programmatic jargon as multi adapters browser layers boilerplate
131. ase evenRowBackgroundColor string transparent oddRowBackgroundColor string transparent notifyBorderColor string ffa500 notifyBackgroundColor string ffce7b discreetColor string 76797c helpBackgroundColor string ffffel portalMinWidth string 70em columnOneWidth string 195px columnTwoWidth string 195px 198 Download at Boykma Com Chapter 10 If you mybui compare this against a fresh base_properties props file found in ldout parts plone CMFPlone plone_styles folder you ll notice that the logo here points to a gif file and a few backgrounds border colors and link colors have been adjusted the background color has been adjusted and column widths have been specified This gives us some global settings to start with Then I made a few changes in the guria css dtm1 stylesheet to control the basic framework of the page using DTML syntax as needed Ef This file is based on the ploneCustom css dtml file shipped with Plone lt dtml with base properties gt do not remove this lt dtml call REQUEST set portal_url portal_url gt not this either YOUR CSS RULES START HERE visual portal wrapper h1 h2 width 733px padding 10px background color fff margin 60px auto auto auto background amp dtml backgroundColor color fff padding 5px border bottom 1px dotted 56492e documentContent padding 0em 25em 25em 25em
132. asily And it s not just a timesaver it makes it much less likely that you will forget some important part of the site configuration if you ever have to rebuild the site An important point to note about profiles is that there are two types of profiles that GenericSetup understands Base profile The first type is called a base profile Base profiles provide the base level information that a site needs to be created Plone s default setup is itself a GenericSetup base profile Base profiles contain configuration information such as tools workflows types and registered plug ins for some packages Most people building custom sites will not need to ever create a base profile and you should not create or alter your base profile until you have some practice 89 Download at Boykma Com Making Manual TTW Changes or What Not to Do Extension profiles Extension profiles are intended to be applied after base profiles Any number of extension profiles can be applied to a site whereas only a single base profile will ever be applied Extension profiles are meant to describe new content types custom skins custom workflows custom tools and to add configuration to what has already been set up in a base profile All of these are additive actions that do not make any changes to currently existing products This is an important concept Changing configuration in existing tools modifying content types to respond to a different work
133. ass portletHeader gt lt a tal attributes href string portal_url get involved s gt Our Approach lt a gt lt dt gt lt dd class portletItem tal repeat action actions gt lt a tal attributes href action url tal content action title gt Action Name lt a gt lt span class description tal content action description gt Action s 156 Download at Boykma Com Chapter 7 Description To be hidden with CSS where unneeded lt span gt lt dd gt lt dl gt lt tal portlet gt lt body gt lt html gt That s all there is to a Classic portlet Don t be afraid of Classic portlets just because of the name They re an entirely appropriate solution for any situation that doesn t require significant Python logic or configurability within the portlet manager interface Think of them as simple or quick portlets if the word Classic has a negative connotation As a final note there are two portlet related packages that were not bundled with Plone 3 0 but as of 3 1 are part of the core These packages are plone portlet static and plone portlet collection They re configurable portlets that allow for the display of static text or a list of the contents of a collection Customizing these portlets is the same as customizing any other Zope 3 portlet Using portal view customizations Now that we have examined the various Zope 3 components that comprise a theme product we now need to look at w
134. asted into a destination program Notepad will have stripped all of the formatting This can be very handy when dealing with the HTML that is pasted into kupu Plone s visual editor but it doesn t help much in terms of working with code in Plone It doesn t give you shortcuts bundles or helpful highlighting but as a straight text editor it does the trick As an interesting aside Notepad does support both left to right and right to left based languages and one can alternate between these viewing formats by pressing and releasing the arrow key followed by Ctrl Shift using the right or left arrow and shift keys to go to right to left format or left to right format respectively Notepad can edit files of almost any format however it does not treat Unix or Mac style text files correctly but another text editor Wordpad does WordPad A slightly more sophisticated text editor for Windows WordPad is also a fine choice though still lacking in Plone specific features WordPad supports Rich Text Format RTF which doesn t help us much but it does allow files shared between OS X and Windows to be read correctly If you re using it solely as a text editor you ll be fine Dreamweaver Sometimes regarded with a little snobbery Dreamweaver could hypothetically be used if no other options exist for Windows or OS X users Using the code layout view is really the only part that makes it usable in Plone development Unfortunately Dreamweaver
135. aster create t plone3 theme The paster recipe will then ask you a series of questions You usually want to accept the defaults here just hit the Enter key but not always We ll see the reason in a moment bash opt paster create t plone3 theme Selected and implied templates ZopeSkel basic namespace A project with a namespace package ZopeSkel plone A Plone project ZopeSkel plone3 theme A Theme for Plone 3 Enter project name My Theme Variables egg My Theme 64 Download at Boykma Com Chapter 4 package mytheme project My Theme Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter Enter namespace package Namespace package like plonetheme plonetheme package The package contained namespace package like example example mytheme skinname The skin selection to be added to portal_ skins like My Theme skinbase Name of the skin selection from which the new one will be copied Plone Default empty styles Override default public stylesheets with empty ones True False include doc Include in line documentation in generated code False zope2product Are you creating a Zope 2 Product True version Version 0 1 description One line description of the package An installable theme for Plone 3 long description Multi line description in reST author Author name Plone Collectiv
136. at for the purposes of this book we will be treating images as skin layer elements but there is a more Zope 3 way of working with them if desired The limitations involved in using them as Zope 3 resources outweigh the benefit in my opinion Using stylesheets as browser resources Like images for most themes stylesheets will not be browser resources but instead will be used as standard skin layer components as described previously However we will cover this in the interest of explaining that it is possible to expose stylesheets to the browser layer if desired A stylesheet that is listed in the browser stylesheets folder for example main css can be accessed from this relative URL resource plonetheme mytheme stylesheets main css It might be better to register each of these stylesheet resources separately if you want to override them via ZCML directives rather than registering the folder containing the resources Again the only way to override a resource in a resource directory is to override the entire directory all elements have to be copied over A stylesheet is declared as a Zope 3 browser resource like this in browser configure zcml lt browser resource name main css file stylesheets main css layer interfaces IThemeSpecific gt 120 Download at Boykma Com Chapter 6 The stylesheet can be accessed from this relative URL resource main css Stylesheets registered as Zope 3 res
137. ate is created by default lt configure xmlns http namespaces zope org zope xmlns five http namespaces zope org five 77 Download at Boykma Com Making Manual TTW Changes or What Not to Do xmlns cmf http namespaces zope org cmf i18n_domain plonetheme mytheme gt lt five registerPackage package initialize initialize gt lt include package browser gt lt include file skins zcml gt lt include file profiles zcml gt lt configure gt Make the directory view available to portal skins We then need to create the directory view which maps a portion of the filesystem into the skin layer for the current theme We do this using a GenericSetup profile which we will cover in depth later in this chapter For now all you need to know is that it is human readable code XML that allows you to create steps that are activated when a product is installed or uninstalled and describes certain configuration settings In this case installing your product will expose your theme product s configuration settings to your Zope instance via an extension profile This is provided via the default boilerplate in your profiles zcm1 file as follows lt configure xmlns http namespaces zope org zope xmlns genericsetup http namespaces zope org genericsetup i18n_domain plonetheme mytheme gt lt genericsetup registerProfile name default title My Theme directory profiles default
138. ates Then in the theme go to mybuildout plonetheme guria plonetheme guria skins zcml The code in this file is altered to appear as follows lt configure xmlns http namespaces zope org zope xmlns cmf http namespaces zope org cmf i18n_domain plonetheme guria gt lt File System Directory Views registration gt lt cmf registerDirectory name guria_images gt lt comf registerDirectory name guria_templates gt lt cmf registerDirectory name guria_ styles gt lt configure gt 184 Download at Boykma Com Chapter 9 One more step is required here In plonetheme guria plonetheme guria profiles default skins xml1 the code is changed to read as follows lt xml version 1 0 gt lt object name portal_ skins allow _any False cookie _persistence False default _skin Guria Theme for the Plone Theming Book gt lt object name guria_images meta_type Filesystem Directory View directory plonetheme guria skins guria_images gt lt object name guria_templates meta_type Filesystem Directory View directory plonetheme guria skins guria_templates gt lt object name guria_styles meta_type Filesystem Directory View directory plonetheme guria skins guria_styles gt lt skin path name Guria Theme for the Plone Theming Book based on Plone Default gt lt layer name guria_images insert after custom gt lt layer name guria templates insert a
139. ates folder lt wrapping the footer and colophon so we can apply a bg color they will share gt lt div id footer colophon wrapper gt lt div tal replace structure provider plone portalfooter gt lt div gt 225 Download at Boykma Com General Styling and Templating Changes The world doesn t revolve around viewlets but it s certainly the core of theming In the past most changes to web sites involved modifying main_template pt or templates such as document _view pt and that s still perfectly legal Hypothetically though we could insert anything into the main_template pt including TAL statements or basic XHTML as we ve done here We next need to do a bit of CSS styling taking care to make sure the anchor tags also receive some special attention FOOTER AND COLOPHON AREA footer colophon wrapper background color 56492e width 733px height 60px margin top 5px portal footer color cccc99 width 40 text align left float left background color transparent border 0 padding left 1lem margin top 1lem portal footer a color cccc99 important text decoration underline portal colophon color cccc99 text align right width 40 float right padding right 1lem margin top 1lem portal colophon a color cccc99 important text decoration underline 226 Download at Boykma Com Chapter 10 This code def
140. avigate through your site s structure It displays CSS IDs and classes in a hierarchical fashion On the right hand side it displays the properties assigned to each of those IDs or classes You can modify those by using the icon in the center Attributes section to add a new property and using that to add to or alter the existing CSS As stated before the left hand pane allows you to expand and walk through the structure of your web site When you refresh unfortunately the entire tree closes To continue troubleshooting a specific element on the page you must drill down to it again or use the selector tool It s somewhat clumsy but it works and is invaluable when debugging web pages in Internet Explorer Firefox As of this writing Firefox 2 and Firefox 3 browsers are both in use and froma general perspective both should be used during debugging as there are very slight differences between them particularly around the sizing of elements on the page However the versions seem to be pretty similar overall and they both follow the W3C s web standards quite well In addition Firefox also offers several excellent tools that are helpful to themers The first plug in is the Firefox Web Developer Extension which is similar to the IE Toolbar but a little more robust We ll also cover Firebug the coolest kid on the block for CSS debugging 24 Download at Boykma Com Chapter 2 Firefox Web Developer extension This op
141. ayers in portal_skins properties in the ZML If uninstalled your settings can still be found in the custom folder for your Plone site via this URL http localhost 8080 mysite portal_ skins custom base properties manage propertiesForm So you can feel confident removing it if you no longer need it Products EasyAsPilE Until IE7 there was no fully native support for PNG alpha channel transparency in Internet Explorer However since IE5 5 there has been some support in the form of a proprietary filter called AlphaImageLoader Internet Explorer filters can be applied directly in your CSS for both inline and background images or by setting the same CSS property with JavaScript Unfortunately there s no CSS property called filter in the W3C CSS spec It s a proprietary extension added by Microsoft that could potentially cause other browsers to reject your entire CSS rule Also AlphaImageLoader does not magically add full PNG transparency support so that a PNG in the page will just start working Instead when applied to an element in the page it draws a new rendering surface in the same space that element occupies and loads a PNG into it If that sounds weird it is However by and large the result is that PNGs with an alpha channel can be accommodated The WebLion Group s Products EasyAsPilE product uses this filter approach to handle transparent PNGs with IE6 All it does is enable JavaScript written by Angus Turnbull http www t
142. b site This code can be inserted into the visual editor s HTML view as seen here Site Map Accessibility Contact Site Setup amp Plone Search Site Q Search NW s IT only in current section Home Users News Events amp vedaw Log out You are here Home Contents View Rules Sharin May 2009 Mo Tu We Th Fr Sa Su Edit Page You are editing the default view of a container If you wanted to edit the container itself go here be SE 4 5 6 7 8 9 10 A page in the site Can contain rich text 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Defaults Categorization Dates Ownership Settings Title 25 26 27 28 29 30 31 Welcome to Plone Manage joriena Description A short summary of the content Congratulations You have successfully installed Plone Body Text lt object width 425 height 344 gt lt param name movie alue http www youtube com v OSd RF_yu amp h1 en amp fs 1 gt lt param gt lt param name allowFullScreen value true gt lt param gt lt param name allowscriptaccess value always gt lt param gt lt embed isrc http www youtube com v Sd RF_yu amp hl en amp fs 1 type application x shockwave flash lallowscriptaccess always allowfullscreen true width 425 height 344 gt lt embed gt lt object gt kp class discreet gt If you re s
143. bal elements such as body and then we assign properties to the section specific element to differentiate it body background image url gradient png this is specific to a section with a shortname of foo body section foo background image url gradient2 png visual portal wrapper background color 000 this is specific to a section with a shortname of foo section foo visual portal wrapper background white margin auto width 883px position relative portal logo margin lem background image url logo jpg background repeat no repeat this is specific to a section with a shortname of foo section foo portal logo margin lem background image url logo foo gif background repeat no repeat section front page portal breadcrumbs display none In the code above we added section specific code for the body visual portal wrapper and portal logo areas This type of pattern can be used in an almost infinite number of ways The only issue to consider here is that if you change the shortname of your section your styling will break Users should be educated to not change shortnames unless they know what they are doing 241 Download at Boykma Com Custom Page Views and Sectional Styling As we ve seen you can write CSS that alters the logo on a section by section basis You might also want to have a different banner image in each se
144. bash paster create list templates Available templates archetype 4 Plone project that uses Archetypes basic_namespace 4 project with a namespace package basic_package 4 basic setuptools enabled package basic_zope 4 Zope project nested_namespace A project with two nested namespaces paste_deploy 4 web application deployed through paste deploy plone 4 Plone project plone2 5_buildout A buildout for Plone 2 5 projects plone2 5_theme 4 Theme for Plone 2 5 plone2_theme 4 Theme Product for Plone 2 1 amp Plone 2 5 plone3_bui lLdout 4 buildout for Plone 3 projects plone3_port let 4 Plone 3 portlet plone3_theme 4 Theme for Plone 3 0 plone3_theme_ootb A Theme for Plone 3 8 modified to implement OOTB best practices plone_app 4 Plone App project plone_hosting Plone hosting buildout with ZEO and any Plone version recipe 4 recipe project for zc buildout silva_buildout 4 buildout for Silva projects bash J Your output may show different templates than you see here as new recipes are created all the time The plone3_theme_ootb is a recipe I use internally as it tweaks folder names and some of the boilerplate to suit my personal preferences Most themers will want to use the plone3_theme recipe which is the official Plone theming recipe Generating your product Navigate to your Plone product via your terminal tool and drill down to the directory called src Then type this text into your terminal window p
145. because everything works on your local site does not mean there will be a smooth transition to the development server So it s important to be prepared Documentation As part of taking a site live it s not uncommon that you ll need to do a little documentation especially with respect to high end web sites This might be documentation for you or for your development team such as any special business rules or custom functionality that is convoluted enough to warrant writing it down Also if the person maintaining the site is not the person who built it it might not be immediately obvious where the content lives or how to modify it and it will save time on future refresher trainings to write it down Another way to make future maintenance or migration easier for your development team is to document the actual code as you work on it especially if there is something particularly unusual about it For example a docstring in the viewlets py file can help to indicate why a viewlet was modified or a comment in a page template can explain how that template differs from a default Plone template If you re deploying your theme for public consumption you ll also need to document any dependencies such as any add on products that may have been used during development of your theme such as the Plone Tableless product This can also be handled in the setup py file or by configuring a buildout accordingly You should also make sure you create an in
146. can alter the boilerplate to use shortened folder names if you re feeling adventurous and comfortable with the code located in the filesystem product Essentially what is happening here is that you are creating folders skin layers in a filesystem product and exposing them to Plone via the CMF Content Management Framework Working with the CMF means that you are allowed to customize the resources within a CMF skin layer in real time on the filesystem or TTW These resources are available everywhere as opposed to within a specific context CMF is a set of add on products for Zope used to build content management systems It provides some basic tools for handling metadata members and so on but is not a content management system itself Plone is an example of a sophisticated CMS built using CMF The new Zope 3 component architecture is layered on top of the CMF and provides greater extensibility and reusability of resources Zope 3 resources meanwhile are only fully available to you via the filesystem and can be manipulated or reused in various contexts It s worth stating up front that if you are dealing with a CMF skin layer item it is treated differently than a Zope 3 item and the items live in different places and are treated differently during the theming process as well 79 Download at Boykma Com Making Manual TTW Changes or What Not to Do Rather than focusing on the logistics of what all of this means we ll in
147. can make even deeper changes to the structure of a page using sectional styling page template adjustments and more 232 Download at Boykma Com 11 Custom Page Views and Sectional Styling Now that we have seen how basic theming is accomplished we ll take a closer look at how we can adjust the look and feel of a home page view This can be accomplished in a variety of ways some of which involve simple CSS and others which require more knowledge of page templating and Python code We ll also look at sectional styling and wrap up our theme s development with some browser testing Changing the default home page display The Guria theme product ships with a few different examples of how you could modify your home page layout It is important to note that not all of the CSS has been written to support all of these different views The intention for final implementation was to use the homepage_view method not homepage2_view and styling for the former s look and feel is completely in place The homepage2_view styling is only partially complete Look in the theme product s guria_templates folder to see these two templates Using CSS styles and the visual editor Let us look first at the simplest way to customize your home page using CSS styles inside of the visual editor to create a different look and feel We can accomplish this either by doing some small simple coding in our CSS stylesheets or we can add this code to our t
148. cated at yourbuildout buildout cache eggs plone app layout plone app layout viewlets gives us the following information class PathBarViewlet ViewletBase index ViewPageTemplateFile path bar pt def update self portal state getMultiAdapter self context self request name u plone portal state self navigation_root_url portal state navigation root url self is rtl portal state is rtl breadcrumbs view getMultiAdapter self context self request name breadcrumbs_ view self breadcrumbs breadcrumbs _view breadcrumbs The important piece here is to see that the PathBarViewlet is derived from a class called ViewletBase and that it uses a page template named path_bar pt We are going to subclass it Inside of your theme product s viewlets py located at yourbuildout src plonetheme yourtheme plonetheme yourtheme browser viewlets py we will add the following code from Products Five browser pagetemplatefile import ViewPageTemplateFile from plone app layout viewlets import common class PathBarViewlet common PathBarViewlet 2 custom version of the path bar class nag index ViewPageTemplateFile new path bar pt The first line here is just a bit of boilerplate code that you don t need to memorize just refer back to it when you need it The second line however is needed to call in the classes that common py provides including PathBarViewlet If you really want to be Pythonic instea
149. cdesign tools about 17 Adobe Fireworks 20 Adobe Photoshop 18 GIMP 21 Guria theme See Plone theme images modifying custom folder used 101 import profile 92 93 Instance home 51 interfaces 113 299 Download at Boykma Com Internet Explorer about 22 IE6 22 TE7 22 IE8 22 Web Developer Toolbar 22 Internet Explorer fixes applying to theme 242 243 items extracting from custom folder 102 103 J JavaScript adding to filesystem product 110 working with in theme product 109 Jigsaw s validator 38 JSLint 33 K KSS 104 Kupu 233 L layer attribute 118 logo Plone site changing 201 M Macintosh 54 MacPorts 55 marker interface 113 Milestones interface 45 N Namespace package 52 new stylesheets adding CSS starting in Zope 107 theme specific stylesheet creating in filesystem product 108 109 non Plone specific products about 251 Deliverance 252 sIFR 252 Notepad about 46 features 46 O operating system agnostic dependencies easy_install 58 PIL 58 Python 2 4 58 Wget 58 P P4ArtistsAudio about 271 features 271 272 web site for downloading 272 P4Artists Video about 268 features 268 270 page sections modifying 197 page sections modifying banner image adding 207 base portlet styling 224 225 basic styling 198 201 breadcrumbs moving 221 223 breadcrumbs styling 221 223 colophon adjusting 225 229 footer adjusting 225 229 logo changing 201 206 navigation alteri
150. ce the Unicode characters amp rarr right arrow with sraquo right angle quote as follows lt div id portal breadcrumbs i18n domain plone gt lt span id breadcrumbs you are here i118n translate you are here gt You are here lt span gt lt a il8n translate tabs home tal attributes href view navigation root url gt Home lt a gt lt span tal condition view breadcrumbs class breadcrumbSeparator gt amp raquo lt span gt lt span tal repeat crumb view breadcrumbs tal attributes dir python view is rtl and rtl or ltr gt lt tal last tal define is last repeat crumb end gt lt a href tal omit tag not crumb absolute url tal condition python not is last tal attributes href crumb absolute url tal content crumb Title gt crumb lt a gt lt span class breadcrumbSeparator tal condition not is last gt lt tal ltr condition not view is rtl gt amp rarr lt tal ltr gt lt tal rtl condition view is rtl gt amp raquo lt tal rtl gt lt span gt lt span tal condition is last tal content crumb Title gt crumb lt span gt lt tal last gt lt span gt lt div gt Save this page template as path bar pt or perhaps yourtheme path bar pt depending on if it s important to you that the name should change 144 Download at Boykma Com Chapter 7 Then we want to look at the Python class that controls the path bar The common py file in the viewlets directory lo
151. ce with new file Browse Width 360 Height 288 Duration 6 0 Image No file New file Browse Type Flash FLV Author gt Apply Users can also rate videos via the Content Ratings tool that ships with Plone4Artists Video They can also leave comments if desired Plone4Artists Video turns regular folders into video containers You can enable this by going to the Subtypes drop down on the folder containing your videos and choose Video Container This in turn changes the look and feel of the folder so that it can display multiple video files in a way that is appropriate and can be browsed easily 269 Download at Boykma Com Plone and Multimedia Collections can also be turned into video containers Simply create a collection and specify the criteria to pull in the files of type File and any additional criteria and save it Then use the Subtypes drop down list and choose Video Container Video podcasting is also an option and is provided with Plone4Artists Video by default To subscribe to a video podcast copy the link to the RSS feed that is located on the video container or collection Go to your preferred music software and choose to subscribe to the podcast and the latest video is downloaded automatically Users can even subscribe to a feed of video links using a third party RSS aggregator such as Bloglines or Google Reader Site Map Accessibility Contact
152. choose the Make Slideshow option That will select a slideshow view for that folder and give you a new slideshow settings configuration tab As soon as there are published images in the folder you ll see the slideshow y Collections rely on the criteria that you put in them to render the images CAN for the slideshow Non images are ignored That means that workflow restrictions are based solely on your collection s criteria To change the slideshow s settings see the new slideshow settings tab on the folder home sitemap join events hikes mediaroom content for review EX p M D a a e EF n e Search Site Q search NEJ FT only in current section home about issues tools and resources get involved icl community amp vedaw sitehelp plone manual onenwsupport site setup log out you are here home tools and resources explore idaho sample slideshow contents view edit sharini information for take action Members Slideshow folder settings E Sample Take Action Listing E Configure the parameters for this slideshow folder Outdoor Enthusiasts More r Slideshow folder settings Journalists Slideshow Width psen ny aoa Green Living Width of the slideshow in pixels Images will be shrunk to fit within the dimensions of the slideshow Ealer yoi emai 450 address to r
153. cipe We ll examine first the filestructure then look at a few of the relevant files that define the filestructure 66 Download at Boykma Com Chapter 4 S README txt v sre v ja My New Theme gt E docs MANIFEST in LE My New Theme configure zcml gt My_New_Theme egg info v plonetheme 2 __init__ py vf mynewtheme 2 __init__ py h m browser 2 __init__ py configure zcml gt J images 2 interfaces py gt stylesheets 2 viewlet pt 2 viewlets py 2 configure zcml gt BF profiles profiles zcml setuphandlers py y skins gt a plonetheme_mynewtheme_custom_images gt plonetheme_mynewtheme_custom_templates gt 7 plonetheme_mynewtheme_styles skins zcml tests py 5 version txt README txt setup cfg setup py EADME txt iis ik H Rp gt Svar gt gt products Generally speaking you only need to worry about what is in the folder here called mynewtheme The code above is just a standard boilerplate There are two folders that have similar purposes here browser and skins The distinction between these two folders is that Zope 3 items go in the browser directory whereas old school and non Zope 3 templates go in the skins directory For a novice themer that may just sound like a lot of jargon but to clarify the browser folder will hold all templates and viewlets that are derived from the plone app layout and plone app portlets eggs as
154. ck the External Link button on the visual editor while on a page where you wish to embed the video Then click on the now visible Embed external object tab This will let you paste in a chunk of embedding code from YouTube Flickr or other services 260 Download at Boykma Com Chapter 13 into You are editing the default view of a container If you wanted to edit the container itself go here A page in the site Can contain rich text 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Default Categorization Dates Ownership Settings Title Welcome to Plone Minas caries Description A short summary of the content Congratulations You have successfully installed Plone Body Text Plone Team or the Paste TES or lt embed gt tag here object width 425 height 344 gt lt param name movie falue http www youtube com v Sd Rf_yu amp h1 en amp fs 1 gt lt param gt lt param te value true gt lt param gt lt param value always gt lt param gt lt embed src http igo youtube com v SdORF_yu amp hl en amp fs 1 pe application x shockwave flash all iptaccess always fi y gt lt embed gt lt object gt You may use this box to insert custom snippets of HTML code There is no guarantee that any code inserted in this way will be preserved when you save your edits To select an existing object from IE clic
155. content here title gt Page Title lt title gt Where here title is grabbing the Title attribute off of the object you are currently on and populating the lt title gt tag with that value dynamically The actual words Page Title will not render it s just a placeholder This would be a useful construct in cases like the navigation pt navigation portlet file found in plone app portlets where we want to be able to specify the title of the navigation portlet in our theme product in a way that it could be customized by the end user lt a href class tile tal condition view title tal attributes href string root absolute_url sitemap tal content view title gt Navigation lt a gt This code ensures that if we manage our portlet via http www mysite com manage port lets we can specify a title on the fly tal repeat statement In the case of tal repeat the code is looped through and an action is performed on each object within the repeat sequence lt ul tal define staffers python jonb david veda josh gt lt li tal content staffer tal repeat staffer staffers gt Staffer lt li gt lt ul gt 169 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language The above tal repeat statement loops over all staffers defined within a Python tuple and creates an lt li gt lt li gt tag for each staffer The repeat continues until no mor
156. ct do need to have the conventional filename extensions The file system is not an object database and there s no good way to determine the type of a binary file except via its filename extension jpg gif png pdf and so on 101 Download at Boykma Com Making Manual TTW Changes or What Not to Do Extracting items from the custom folder Remember that anything located in the skins directory can be modified through the web via portal_skins and that any of these items ultimately belong in your skins directory in your filesystem product This includes images stylesheets JavaScript files page templates from CMFPlone found in portal_skins and Python scripts Assuming you have customized items inside of your Plone site you can extract these items and add them to your theme product in a couple of different ways Optionally you can go to the custom folder open each individual file and cut paste it into your theme product s skins folder To move images into your theme product copy them from your custom folder or right click and choose Save As and put them in plonetheme mytheme skins plonetheme_mytheme_custom_images If you test this with a file named logo jpg with the custom folder cleaned out and refresh your site you should see your new logo In addition to moving images into your filesystem product you will often be moving standard page templates Give them a filename with an extension of pt so that
157. ct has several dependencies that are described in the product s README file along with basic installation instructions It can be installed using the instructions found here https weblion psu edu trac weblion wiki ThemeSwitcher If you install the product using the ZMI s portal_quickinstaller it gives you an actions tab on your folders in the content area of the page Assuming you install it via portal _quickinstaller each folder will have a ThemeSwitcher tab that will bring up the switcher form Here you will be able to choose from a list of installed themes that use browser layer to register themselves To determine if the theme is registered as a browser layer look to see if the theme contains a browserlayer xml file if it does chances are it is registered as a browser layer If you do not install the product via portal_quickinstaller you will need to manually type the switcher form path for example http localhost 8080 plonesite folder1 switcherform because the actions tabs have not been installed This is likely behavior that will be fixed as the product evolves The WebLion team is actively trying to solve issues around sub site theming as explained here https weblion psu edu trac weblion wiki SubsiteTheming Also be aware that the themes that are installed using this package should have an uninstall routine as explained here https weblion psu edu trac weblion wiki PloneThreeThemeUninstallProfile Otherwise you w
158. ction To do so you could use TAL instead to alter your page template to look for an image based on your current context lt img width 125 tal replace structure nocall context banner jpg default gt In this case you would not want an image named banner jpg to be inside of your theme product as it would conflict with the images named banner jpg that you insert into the various sections of your Plone site as content The disadvantage to this method is that the images will be considered content and thus will not be cacheable without extra work However it would give site maintainers more control over the look and feel of their site There are certainly other options available these two are just the most common Applying Internet Explorer fixes Now that we ve wrapped up all of the templating work on our theme and the bulk of our CSS we should test the site against other browsers As a Mac user my tool of choice is VMWare Fusion http www vmware com download fusion but Windows users can use Windows Virtual PC http www microsoft com windows virtual pc As of this writing I typically test first against Safari WebKit Firefox 2 Mac and PC then Firefox 3 Mac and PC then Internet Explorer 6 IE7 then IE8 in that order If I have time I also test against Opera If you have multimedia devices you might wish to test against them as well This means setting up several virtual machines which can be very r
159. d at Boykma Com Chapter 14 Deploying a theme for public use A great number of individuals in the Plone community have graciously created themes for use by other people The process for distributing these themes is fairly simple It is important that the quality assurance process described above is followed especially in terms of documenting dependencies the installation process and any content that needs to be created to support a theme You should store your theme product in Plone s collective SVN repository To gain access to the repository visit http plone org documentat ion manual plone developer reference overview contributing You can also find information on the Subversion commands you will need at http plone org documentation how to svn import to plone collective unix Also you should upload release versions of your theme product to the Python Package Index PyPI See the instructions at http pypi python org pypi for more information Then you ll need to add your product to http www plone org by doing the following 1 Goto http plone org products and make sure you are logged in 2 Click Add new project 3 Enter the details for your theme and make sure you select Visual themes as your category Make sure you include screenshots or thumbnails where requested Save the form and submit the project for approval This is to prevent people from creating bogus projects You can then add your files onc
160. d drop down menu Rather than writing those audio files to your data fs they are instead written to the filesystem Plone4ArtistsAudio also works together with the ContentLicensing product to make it easy to add Creative Commons or other licensing to your audio files To download Plone4ArtistsAudio visit http www plone org products plone4artistsaudio The Plone4Artists group has many other add on products that may be of interest and you should always check to make sure that they will work with your version of Plone For more information on their entire suite of products and for screencasts you can visit http plone4artists org Plumi Plumi is a free video sharing Content Management System CMS based on Plone and produced by the EngageMedia collective http engagemedia org Plumi enables you to create your own sophisticated video sharing site By adding it to an existing Plone instance you can quickly have a wide array of functionality to facilitate video distribution and community creation As of this writing Plumi was not yet supported by Plone 3 but for future updates you may wish to check out http blog plumi org Summary In this chapter we have learned e How to embed multimedia into the content of a page e How to embed multimedia into a page template e About Plone specific add ons that provide multimedia support e About Plone multimedia products to watch out for These tools should allow you to easily add
161. d in a theme product though certainly it is possible These tasks are for integrators not themers For more information refer to Practical Plone 3 http www packtpub com practical plone 3 beginners guide to building powerful websites book to find out how to manage these changes or refer to the Plone 3 User Manual http plone org documentat ion manual plone 3 user manual Hence this chapter is geared towards changes that are not readily available to integrators Registering and installing a new theme To see some of these TTW changes we first need to understand how to get our theme exposed to our Zope instance as a filesystem product so that it can be installed on a Plone site 76 Download at Boykma Com Chapter 5 Creating a product that overrides a resource in a skin layer requires 1 Installing paster and ZopeSkel done in the previous chapter 2 Running the appropriate paster recipe to generate a filesystem product done in the previous chapter using the plone3_theme recipe 3 Registering it in your buildout done in the previous chapter 4 Registering a new filesystem directory view for that product done by default 5 Placing this view in the list of available skin layers by installing your product done in the previous chapter 6 Copying the relevant resources templates stylesheets images flash files and so on into the new skin layers contained within your filesystem product 7
162. d of importing common you would import only the PathBarViewlet using this line from plone app layout viewlets import PathBarViewlet 145 Download at Boykma Com Customizing Viewlets and Portlets Next we need to subclass the PathBarViewlet class from plone app layout common Subclassing means that we inherit all its behavior in our class We are really just creating a special case of plone app layout s PathBarViewlet to make a minor behavior change As a result the new class declaration becomes class PathBarViewlet common PathBarViewlet Don t be confused by the fact that both of these viewlet classes have the name PathBarViewlet In fact the original is plone app layout common PathBarViewlet and our new derived class is plonetheme yourtheme browser viewlets PathBarViewlet They occupy different Python name spaces As a best practice it helps to document your change with a docstring in the event that you need to introspect your code later for example A custom version of the path bar class Finally we change the name of the page template that the class uses to render the code In this case we are pointing to the page template we just modified and renamed new path bar pt If you re not accustomed to Python programming don t worry This is as complex as most subclassing gets Follow the pattern and you will get the same results over and over again However if you are adept at Python pro
163. dcrumbs the logo the personal bar and many other items visible on a Plone page are viewlets Download at Boykma Com Customizing Viewlets and Portlets In the following screenshot you will see a number of unique snippets or viewlets that have been labeled X Search 12 2 vedaw Logout You are here Home 3 5 Contents View Edit Rules Sharing Histon Navigation 4 Display Add new State Published Y Home Users News Events a aom Welcome to Plone O Users by vedaw last modified Oct 01 2008 03 16 PM 6 O News Congratulations You have successfully installed Plone Events Also available in presentation mode snip ge portlets E History 7 The Plone CMS Open Source Content Management System is 2000 2008 by the Plone Foundation et al Plone and the Plone logo are registered trademarks of the Plone Foundation Distributed under the GNU GPL license 9 Powered by Plone Valid XHTML Valid CSS Section 508 WCAG The following is the list of the viewlets displayed in the previous screenshot and their formal names in the Plone namespace This list is by no means complete as you may only see certain viewlets in specific situations such as on a custom page view or the Contents tab of a folder e Logo 1 plone logo e Global sections 2 plone global_sections e Breadcrumbs 3 plone path_bar e Navigation 4 portlets Navigation e Content views 5 plone conte
164. dencies Additional information can be found here http plone org documentat ion how to buildout using windows installer If you re using the unified installer you ll need to get and install the Python Win32 extensions for Python 2 4 http downloads sourceforge net pywin32 pywin32 210 win32 py2 4 exe modtime 1159009237 amp big mirror 0 If you intend to compile Zope yourself rather than using a binary installer or if you ever need to compile an egg with C extensions you will need the mingw32 or Visual C compilers If you use the freely available mingw32 make sure you choose the base and make modules at a minimum when the installer asks By default this installs into C MingW32 Inside the installation directory there will be a bin directory for example C MingW32 bin Add this to your system PATH Finally you need to configure Python s distutils package to use the mingw32 compiler Create a file called distutils cfg in the directory Cc Python24 Lib distutils presuming Python was installed in C Python24 as is the default Edit this with Notepad or e the Windows TextMate clone and add the following build compiler mingw32 Operating system agnostic dependencies For most of the following items you will not need to worry but links and instructions on how to use them are included just in case you are using an older installer 57 Download at Boykma Com Setting up your Development Environ
165. der looks something like the following lt configure xmlns http namespaces zope org zope xmlns browser http namespaces zope org browser i18n_domain plonetheme test gt lt test theme Zope 3 browser layer gt lt interface interface interfaces IThemeSpecific type zope publisher interfaces browser IBrowserSkinType name test theme gt lt Viewlets registration gt lt Zope 3 browser resources gt lt Resource directory for images gt 115 Download at Boykma Com Working with Zope 3 Components lt browser resourceDirectory name plonetheme test images directory images layer interfaces IThemeSpecific gt lt Resource directory for stylesheets gt lt browser resourceDirectory name plonetheme test stylesheets directory stylesheets layer interfaces IThemeSpecific gt lt configure gt This code basically just tells Plone that it knows its identity IThemeSpecific and that it knows that images and stylesheets are browser resources and thus live in directories within the browser folder This particular configure zcm1 file is where most of the magic will happen when you customize Zope 3 styled resources For example if you want to move the various bits viewlets and portlets that comprise your theme around on the page you would do that through ZCML in this particular file A default plonetheme product also contains ZCML in f
166. description Extension profile for the My Theme Plone theme provides Products GenericSetup interfaces EXTENSION gt lt configure gt Next we configure the skins xm1 file located in the profiles directory to create skin layers again provided by default when you use the plone3_theme recipe lt xml version 1 0 gt lt object name portal_ skins allow _any False cookie persistence False default_skin My Theme gt lt object name plonetheme mytheme custom images 78 Download at Boykma Com Chapter 5 meta_type Filesystem Directory View directory plonetheme mytheme skins plonetheme _ mytheme_custom_images gt lt object name plonetheme mytheme custom templates meta type Filesystem Directory View directory plonetheme mytheme skins plonetheme _ mytheme_custom_templates gt lt object name plonetheme_mytheme_styles meta_type Filesystem Directory View directory plonetheme mytheme skins plonetheme_mytheme_styles gt lt skin path name My Theme based on Plone Default gt lt layer name plonetheme mytheme custom images insert after custom gt lt layer name plonetheme mytheme custom templates insert after plonetheme mytheme custom images gt lt layer name plonetheme mytheme styles insert after plonetheme mytheme custom templates gt lt skin path gt lt object gt You can register as many directory views skin layers as you wish and you
167. dress i18n translate footer txt ext addr gt Suite 321 lt span gt lt span class locality il8n translate footer txt city gt Springfield lt span gt lt span class region il8n translate footer txt province gt 0R lt span gt lt span class postal code il8n translate footer txt postal code gt 12345 lt span gt lt div gt lt span class tel il8n translate footer txt phone gt 503 555 8272 lt span gt lt span class email gt lt span tal replace structure python here spamProtect info enviro group org gt spam protected email addr lt span gt lt span gt lt div gt 228 Download at Boykma Com Chapter 10 There s a lot of geek speak in the original template so we want to reduce both that and some of the visual noise As for the colophon we modify it as follows lt tal comment tal condition nothing gt Removing everything to tone down the nerdyness a notch Altered the colophon to also show a copyright lt tal comment gt lt div id portal colophon metal define macro colophon i118n domain onenorthwest gt lt span i18n translate txt_powered_ by plone id powered by plone gt powered by lt span i18n name plone org link gt lt a href http plone org i18n attributes title title this site is plone title This website is built on the Plone Content Management System Click to learn more gt Plone lt a gt lt span gt lt span gt lt
168. e Conventions In this book you will find a number of styles of text that distinguish between different kinds of information Here are some examples of these styles and an explanation of their meaning Code words in text are shown as follows Notice the enabled flag here and also notice that it s not necessary to include the dtm1 indication in the id field even though we will be using DTML A block of code is set as follows Code and markup preceded and ended with ellipses are extracted from the full context of code and or a larger body of code and markup You will also see the occasional use of snip for the same purpose Please reference the downloadable code packet to see the entire work lt xml version 1 0 gt lt object name portal_css gt lt stylesheet title id ace css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt lt object gt 3 Download at Boykma Com Preface When we wish to draw your attention to a particular part of a code block the relevant lines or items are set in bold lt xml version 1 0 gt lt object name portal_css gt lt stylesheet title id ace css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt lt object gt Any command line input or output is written
169. e Veda Williams author email Author email product developers lists plone org veda onenw org keywords Space separated keywords tags web zope plone theme url URL of homepage http svn plone org svn collective license name License name GPL zip safe True False if the package can be distributed as a zip file False A few key points on these questions The text in the square brackets is the default answer and pressing Enter allows that default to be accepted Or you can type the preferred answer if it is different from the default project name corresponds with the name of your theme This might be your client s name or the name of the web site for which you are building a theme namespace package is usually plonetheme but you could name it after your company if you wish to brand your theme package name is usually a short name for your theme and one word is generally advisable here as packages with spaces in their names do not get correctly picked up by buildout 65 Download at Boykma Com Create and Install a Theme Product skinname is frequently several words with case sensitivity This is the name of the theme that you will see when installing it so make it meaningful For version zope2product and zip safe you should accept the defaults One question that requires consideration is empty styles which determines whether you wish to override default public styles with blank
170. e and the Plone logo are registered trademarks of the Plone Foundation Distributed under the GNU GPL license Powered by Plone Valid XHTML Valid CSS Section 508 WCAG Many of these tabs buttons and menu objects correspond to actions defined in http localhost 8080 mysite portal_actions manage where mysite is the name of your Plone site in the ZMI You must log into your site s ZMI in order to see the available portal_action categories 82 Download at Boykma Com Chapter 5 By default there are seven CMF action categories For practical purposes CMF action categories are merely categories within which you can alter numerous buttons tabs and menu options on your site These include the following items e document actions e site actions e folder buttons e object e object buttons e portal tabs e user To add a new action_category choose Add CMF Category from the drop down list found on the top right area of the ZMI Advanced users can add a new action category to drive something like a portlet with drop down lists but generally you will be adding or altering action items within the existing categories Often all you may want to do is uncheck the Visible checkbox to hide the items you do not wish to see or change the logic slightly To edit an existing CMF action simply click on it and alter the necessary properties To add a new action within a category click on the category and choose Add CMF Actio
171. e where yourtheme is your Plone theme product s skin name It s vital to distinguish it from Plone Default lt xml version 1 0 gt lt object gt lt order manager plone portalheader skinname yourtheme based on Plone Default gt lt viewlet name plone logo insert before plone searchbox gt lt object gt As you can see we re not grabbing the entire contents of CMFPlone s viewlets xm1 we re only using the parts we need Optionally if we wanted an element to appear after a given viewlet we could specify insert after instead Ordering of viewlets can be a touchy thing so beware _ Sometimes it works sometimes it doesn t Sometimes TTW changes GA to the ordering of viewlets can interfere with our XML This is a known issue that is currently being worked on and will likely be fixed by the time this book is published Showing hiding and unhiding viewlets within a viewlet manager Let s now look at how to show viewlets in a different viewlet manager and hide unwanted viewlets that we ve overridden Let s assume that we re going to move plone personal_bar to the footer area and suppress that viewlet from the plone portaltop viewlet manager The idea is that if you are going to move a viewlet to a new location Plone will still think thanks to the CMFPlone viewlets xml default configuration that the viewlet is meant to be shown in its original location Thus we must issue directives to show the viewlet in one
172. e yourtheme plonetheme yourtheme browser configure zcml Next we modify it to indicate that we want to apply changes to a new page template this is optional and that we want these changes to only affect our current theme product lt The portal header gt lt browser viewlet name plone header manager plone app layout viewlets interfaces IPortalTop template mynewportal header pt layer interfaces IThemeSpecific permission zope2 View gt Note that we ve also given the full dot delimited path to IPortalTop because w re not in the same Python package Next we need to locate the portal header pt page template in yourbuildout buildout cache eggs plone app layout plone app layout viewlets and copy it into our theme product s browser folder Then we rename the page template to call it mynewportal_header pt if you changed its name in your theme product s configure zcml file Generally you only need to rename your page template if the actual behavior of the template changes in a way that implies that its functionality has changed significantly if for instance you alter your logo viewlet to include additional unrelated pieces of functionality In this case we will alter the page template code only slightly to include some code that pulls in the name of your web site such as the portal title rendered via a viewlet manager lt hl tal content view portal title gt Title of the portal lt hl1 gt lt d
173. e buttons on each portlet to move them up or down delete or edit them To add a new portlet use the drop down list at the top of the column EVENTS If you wish to block or unblock certain categories of Do not block gt portlets you can do so using the drop down boxes Ee Use parent settings Block unblock portlets Parent portlets Use parent settings gt Do not block gt Group portlets use parent settings gt Content type portlets use parent settings gt Click on the X next to each item to remove each portlet then click on the Plone logo to return to the home page You should see the left hand navigation portlet and no portlets on the right hand side of the page This gives us what we need to finish building out our design 195 Download at Boykma Com Creating Installing and Tweaking our Theme The Guria theme was intended to use the homepage_view page template as seen in the theme product s skins guria_templates folder This view requires the creation of a folder in the root of the site called homepage plus several pages or collections named slot1 slot2 and slot3 You can optionally create these too if you want to use this particular view The alternate view homepage2_view also located in the skins guria_templates folder requires the creation of a folder named homesect ion slightly different from the homepage_view example just to show the difference between the two views plus th
174. e code that this contains the img tag for the image In other words it s looking for whatever image is specified in base_properties props In our case this is logo gif and that logo gif lives in our theme product at mybuildout plonetheme guria plonetheme guria skins guria_images 202 Download at Boykma Com Chapter 10 If we look even deeper at the CMFPlone product at mybuildout parts plone CMFPlone skins plone_images you ll see that there is already a logo jpg in our skin layer This means that all we need to do is have a correctly sized logo gif in our theme product s guria_images folder to override that image and we re done In order to add the description of our site to the logo viewlet however we need to customize the viewlet Based on our investigation above we know that we are working with a class based viewlet If we look in configure zcm1 located at mybuildout buildout cache eggs plone app layout some version number plone app layout viewlets and search for logo we find the following code lt The logo gt lt browser viewlet name plone logo manager interfaces IPortalHeader class common LogoViewlet permission zope2 View gt The most important thing to note is that no template is specified in the ZCML We are working with a class based viewlet and we ll need to override the class itself to change the way it s rendered Next we take the above code and insert it into ou
175. e creation of several pages not collections named r1c1 and ric2 Make sure these names are the shortnames not just the title of the pages Summary In this chapter we have learned how to e Create a custom theme product e Modify the file structure e Set up a Plone theme to use mostly skin layers for images and stylesheets e Install the theme product e Customize the content of your site to support the design Next we will look at how to do basic CSS styling alter the logo modify portal_actions and work with viewlets and portlets 196 Download at Boykma Com 10 General Styling and Templating Changes Now that our theme product is installed and we ve got our Plone site ready to support the theme we ll start looking at how the various components and skin layer items were changed one at a time Specifically we ll look at basic styling and modification of viewlets and portlets Modifying the various sections of the page In order to make many of the changes to our themes take effect we should make sure that our theme product s configure zcml file not the browser configure zcml file contains the following lines lt include package browser gt lt include file skins zcml gt lt include file profiles zcml gt These lines tell our theme product that it should respect any changes made to our profiles zcml file where our theme product s profile is registered with Zope and also within the brows
176. e elements that compose the component architecture for a theme product We will also learn how the skin layers and through the web configuration work And finally we will take a look at how to take many of these changes and incorporate them in a filesystem product In Chapter 6 we will focus on basic Zope 3 components that are involved in filesystem theme development We will learn how to use ZCML code to tie together the Zope 3 components We will also learn how to use images stylesheets and browser resources and how to write browser views In Chapter 7 we will focus on viewlets viewlet managers and how to manipulate them We will take a look at portlets and how to customize them Finally we will learn how portal_view_customizations can be used to manipulate Zope 3 templates through the Web In Chapter 8 we will learn what a Zope Page Templates ZPT system is We will also take a look at Template Attribute Language TAL and learn common TAL expressions that are used in Plone s templates In Chapter 9 we will learn how to create a custom theme product how to modify the file structure how to set up a Plone theme to use mostly skin layers for images and stylesheets how to install the theme product and how to customize the content of your site to support the design In Chapter 10 we will learn how to change the logo how to modify the portal_actions ona site how to modify various viewlets and portlets and the templates that are us
177. e following 1 Make sure you are logged in as an admin manager user You should see a Site Setup link in the top right corner 2 Set up your mail server Plone needs a valid SMTP server to verify users and send out password reminders 3 Decide what security level you want on your site Who can join password policies etc Get comfortable After that we suggest you do one or more of the following Find out What s new in Plone 3 0 Read the documentation especially the What documentation should read and Server setup recommendations Explore the available add on products for Plone Read and or subscribe to the support forums Make it your own Plone has a lot of different settings that can be used to make it do what you want it to Some examples 71 Download at Boykma Com Create and Install a Theme Product Advanced users may wish to skin against a data fs file from an existing site If so you will want to create a mount point at the root of your Zope instance instead of a standard Plone site For more information read this documentation f http www plope com Members chrism whatsnew_ 27 Installing your Plone theme To install your theme on a Plone site go to Site Setup Add on Products and select your theme product or go to your site in the ZMI and navigate to portal_ quickinstaller via http localhost 8080 newsite portal_quickinstaller manage_installProductsForm
178. e it has been approved Plone welcomes any contributions to the theming community and we hope that you will help other users by creating and adding your own themes to http www plone org If you wish to contribute theming work for Plone itself you ll need to use Plone s SVN repository and will need to sign the contributor agreement V http plone org documentation manual plone developer reference overview contributing to release rights to the Plone Foundation You can find numerous free themes on oswd org or on other free templating sites Please note that these are just straight CSS templates they are not Plone themes You may want to make sure your theme does not already exist on plone org by familiarizing yourself with the currently available themes 279 Download at Boykma Com Deploying and Contributing Themes Summary In this chapter we have learned e About a suggested development environment and a theme deployment workflow e About last minute configuration concerns e About the quality assurance process and where to look for potential problems e How to contribute to the Plone theming community by creating publicly available themes In the next chapter Alexander Limi will discuss the future of rules based theming for Plone 280 Download at Boykma Com 15 The Future of Theming for Plone In this chapter Alexander Limi gives us a sneak peek into the future of rules based theming fo
179. e name as you find in your profiles zcml file Adjusting how stylesheets and images are used Next we remove some of the default behavior given to us by the plone3_theme recipe In a vanilla theme product folders named images and stylesheets are inserted into the plonetheme guria plonetheme guria browser directory Additionally a file named main css is included in the stylesheets directory I chose not to place the theme s images or stylesheets in the browser directory as this is generally unnecessary for most themes Advanced programmers may wish to expose these items to the browser layer but this is generally a personal choice and carries with it additional consequences as described in Chapter 6 Working with Zope 3 Components I deleted the folders mentioned above as well as the main css file Then I opened the file named configure zcml located at plonetheme guria plonetheme guria browser and removed all of the following boilerplate text lt Viewlets registration gt lt Zope 3 browser resources gt lt Resource directory for images gt lt browser resourceDirectory name plonetheme guria images directory images layer interfaces IThemeSpecific gt lt Resource directory for stylesheets gt lt browser resourceDirectory name plonetheme guria stylesheets directory stylesheets layer interfaces IThemeSpecific gt 186 Download at Boykma Com Chapter
180. e next steps for skinning effectively are getting your development environment configured and building the scaffolding for a theme product It is also important to learn some of the jargon associated with Plone 3 development so that you can understand the development environment and how to use it Buildout and you Prior to Plone 3 setting up Plone was fairly straightforward you installed Plone and dropped all of your Plone add on products into a Products directory Making modifications meant that you simply edited a template and your changes showed instantly While that sounds simple and for themers it was it was not flexible or repeatable and resulted in the development of monolithic products that were difficult to distribute or reuse and could only be used in the context of Plone Since Plone 3 the development environment has moved toward a more pluggable ege based environment Eggs are a way to package and distribute Python packages with certain metadata intact The Python library that powers the egg mechanism setuptools is able to automatically locate and download dependencies for eggs that you install This technology means that it is easier to create shared repeatable and easily configurable development or staging environments The Plone community has also standardized on the buildout system for managing complex configurations so that they are flexible and repeatable Download at Boykma Com Setting up your Development Envi
181. e objects are found within the Python list at which point we close the unordered list How this works in Plone The page template sections pt found in plone app viewlets attaches a unique id to each item found in the portal_actions portal_tabs CMF action category in the ZMI Additionally depending on if the tab is selected or not it will apply a CSS class of selected or plain For this example the code has been modified slightly to render in a table instead of as an unordered list lt tal tabs tal condition view portal_tabs i118n domain plone gt lt h5 class hiddenStructure i18n translate heading sections gt Sections lt h5 gt lt div id tabWrapper gt lt table id portal globalnav table gt lt tr gt lt tal tabs tal repeat tab view portal_tabs gt lt td tal attributes id string portaltab tab id table class python view selected portal tab tab id and selected or plain gt lt a href tal content tab name tal attributes href tab url title tab description nothing gt Tab Name lt a gt lt td gt lt tal tabs gt lt tr gt lt table gt lt div gt lt tal tabs gt 170 Download at Boykma Com Chapter 8 The rendered code would look something like the following depending on the ids of the portal_tabs lt div id tabWrapper gt lt table id portal globalnav table gt lt tr gt lt td id portaltab climate and energy table class selected gt
182. e portal_view_customizations tool was broken but can now be used for TTW customizations Most serious themers do not use portal view customizations as it is not easy to extract those changes to the filesystem It should be regarded as a place for short term modifications only and avoided at all costs moment to figure it out and you ll find that it does work In the next screenshot you see all of the browser resources available in a given Zope instance and the grey text explains which theme product each resource belongs to This makes it possible for you to know which one you re editing zope interface Interface Products WWRC global_sections Products WWRC bro nterfaces IThemeSpecific Products WWRC viewlets content_headers Products WWRC browser ace global_sections plonetheme a ces IThemeSpecific ace path_bar plonetheme ace IThemeS addform_macros zope pub wser IDefaultBrowserLayer base pageform html zope pub a faces browser IDefaultBrowserLayer base subpageform html zope publist rfaces browser IDefaultBrowserLayer batch widget Products CMFDefault interfaces ICMFDefaultSkin bullitt colophon plonetheme bullitt browser interfaces IThemeSpecific bullitt global_sections plonetheme bullitt browser interfaces IThemeSpecific bullitt path_bar plonetheme bullitt browser interfaces IThemeSpecific bullitt site_actions plonetheme bullitt browser interfaces IThemeSpecific interf
183. e searchbox manager plone app layout viewlets interfaces IPortalTop class viewlets SearchBoxViewlet permission zope2 View layer interfaces IThemeSpecific gt Default Plone renders the search button in the IPortalHeader viewlet manager but we want the search button slightly higher than normal Perhaps we could accomplish this with pure CSS but it s just as easy to move the viewlet to a different manager This means that we must now move the existing plone searchbox viewlet within our theme product s viewlets xm1 file located at mybuildout plonetheme guria plonetheme guria profiles default lt xml version 1 0 gt lt object gt lt order manager plone portaltop skinname Guria Theme for the Plone Theming Book based on Plone Default gt lt viewlet name plone searchbox gt lt viewlet name plone personal_ bar gt lt order gt lt order manager plone contentviews skinname Guria Theme for the Plone Theming Book based on Plone Default gt lt viewlet name plone path_bar gt lt order gt lt hidden manager plone portaltop skinname Guria Theme for the Plone Theming Book gt lt viewlet name plone path_bar gt lt hidden gt lt hidden manager plone portalheader skinname Guria Theme for the Plone Theming Book gt lt viewlet name plone searchbox gt lt viewlet name plone global_ sections gt lt hidden gt lt object gt 218 Download at Boykma Com Chapter 10
184. e titles and work correctly when you do operations on folders lt replace content html head title theme html head title gt lt replace content html head base theme html head base gt 293 Download at Boykma Com The Future of Theming for Plone The XPath expressions are actually pretty straightforward when you know exactly where the elements are You ll get used to the most common variations after using Firebug s Copy XPath a few times Also note how the entire specified tag is replaced nothing from the theme file remains Another common example is making the content of a page from Plone appear in the theme lt replace content id content theme id my content gt lt append gt and lt prepend gt They add the content from the site to the theme either before or after the specified element Real world examples Adding the Plone created CSS and JS in addition to the ones already in the theme lt append content html head script theme html head gt lt append content html head style theme html head gt Notice how we take all of the lt script gt and lt style gt tags from Plone and append them after the current content of the head tag in the theme This way you can let Plone manage some of your CSS and JS if you want useful for conditional includes Another example is carrying over the id and class attributes on the body tag since these are
185. eback innermost last AttributeError adapters They can be very long The most useful information is generally at the end In time you ll learn to read these errors and debug your code accordingly even though at first they may seem a bit intimidating i If you are requesting help on plone IRC or on the plone users list you gt lt should try to include a traceback log entry with the report For plone Q don t forget to always paste your error to http paste plone org and not into the IRC window For the programmers in the crowd you may also find it useful to use Pdb to step through your errors as described here http plone org documentation tutorial debugging tips and tricks a real life example using pdb Pdb is a Python debugger that allows you to set a trace point in your code so that you can step through errors This slideshow by David Glick contains information on Pdb and other troubleshooting methods as well http www slideshare net davisagli when good code goes bad tools and techniques for troubleshoot ing plone presentation see slide 30 Running more than one operating system at a time As discussed in the chapter Chapter 10 on tools for theming virtual machines have turned out to be rather handy for testing against different versions of Internet Explorer The two most popular products for doing this on Mac are VMware and Parallels though there are others available for Mac and PC 255 Down
186. eceive our e newsletter kabo Faa Slideshow Height Rouremal 901 Height of the slideshow in pixels Images will be shrunk to fit within the dimensions of the slideshow in this section 450 Erivacy Foley Explore Idaho Slide Duration upcoming events Time in seconds between slide transitions C Sample Slideshow 3 3 National Trails Day Sandpoint Green Living M i Transition Time Fedd aa e 3 Trail Guides i iti mopoa im Time in seconds for a slide transition to take place janaa CD Wild Idaho Daily 0 5 Legislative Tracking gt Thumbnail Mode Evening on the River Include navigation thumbnails below the image Barber Park Education and Event Center janage portlets TT Fast Mode Sep 11 2009 Skips the slide transition when a user clicks on a thumbnail Upcoming events JY Show Captions Include captions below the image Show Controller Include play pause forward back controller in the slideshow FT Random order Shows slides in a random order JY Loop Slideshow Repeats the slideshow once it has finished TT Link images Link images to full sized version gt save gt cancel 267 Download at Boykma Com Plone and Multimedia Each image s description will be used for its caption Additionally each slideshow will have a disable slideshow option in the Actions drop down menu This will revert it to being a normal folder or collection
187. ecific permission zope2 View gt In the event that you ve already customized your globalsections viewlet you will have to subclass the DropdownMenuViewlet class in the webcouturier dropdownmenu product Unlike older drop down menu products webcouturier dropdownmenu does not require any ongoing maintenance or manual adjustment of URLs It is controlled by the navigation settings found in the Site Setup area so you can control what types of items display in the navigation The product also provides some basic CSS styling that can be easily adjusted in your own theme product if desired It can be downloaded here http plone org products webcouturier dropdownmenu Collage Another helpful Plone product is Malthe Borch s Collage Collage allows you to create a grid containing rows and columns and within those columns you can pull in the contents of other objects a folder a page a collection or even an image Using this mechanism you can create a complex page layout without knowing any programming Until very recently Collage did not have hooks that allowed it to be styled using CSS and it did not respect different views For example if you created a special mysection_view pt same as a homepage view and you assigned that view to your page Collage would default to the original document view This behavior has now been altered so that CSS hooks are available and different views are respected This is a huge win for sit
188. ed and log in as an administrator 2 Go to Site Setup Add On Products and install collective xdv 3 Once it is installed go to Site Setup and make sure there is a new control panel called Theme Transform The Theme Transform control panel has a number of settings that we ll make use of in a minute but first we will create a simple HTML file and some transform rules to get started Adding the HTML and rule files Let s create a dedicated directory in your instance where you can keep your theme files 1 Navigate to your instance directory 2 Create a directory called themes Never put anything in the parts eggs or develop eggs directories GA as buildout considers these private and may potentially wipe them when updating your setup 288 Download at Boykma Com Chapter 15 Inside the themes directory create the following two files using your text editor theme html lt html gt lt head gt lt title gt xdv example lt title gt lt head gt lt body gt lt hl gt The simplest possible example of xdv transforms lt h1 gt lt p id my content area gt This body text will be replaced lt p gt lt body gt lt html gt rules xml lt rules xmlns http openplans org deliverance gt lt Copy over the contents of the page body gt lt replace content id content theme id my content area gt lt rules gt Believe it or not that s a complete although ver
189. ed thoroughly on plone org and by Jim Fulton of Zope Corporation at http buildout zope org When you install Plone you are automatically given a working buildout Zope installation This is what you get by downloading and compiling Zope or using one of the binary Zope installers Downloading Plone and installing it gives you a Zope installation with Plone sitting on top of that installation Zope is the application server framework upon which Plone is built Again when Plone is installed Zope comes with it Zope instance One Zope installation can support multiple instances or runnable Zope servers Within each instance you can have many Plone sites We will let buildout create and configure a Zope instance for us 50 Download at Boykma Com Chapter 3 Instance home The Instance home is the path to the current Zope instance which houses the Zope s configuration and data files Python path Plone uses Python and while Plone is running the Python interpreter looks for modules in one or more folders known as the pythonpatnh It is essential that the interpreter uses the correct Python path Buildout and Plone s installers set your pythonpath by default so you will not normally have to adjust this This can be an area of confusion if you have a non standard setup If in doubt ask on the Plone user lists how to adjust your pythonpath When Zope is running it typically includes the global Python modules m
190. ed to render a Plone site and how to do basic CSS styling In Chapter 11 we will learn how to create custom home page views how to do sectional styling how to enable and create sectional banners and how to test our site against multiple browsers In Chapter 12 we will take a look at the popular add ons the current state of sub site theming non Plone products that can be used to alter the site s look and feel and Plone specific debugging tools In Chapter 13 we will learn how to embed multimedia into the content of a page and into a page template We will also take a look at the Plone specified add ons that provide multimedia support 2 Download at Boykma Com Preface In Chapter 14 we will take a look at the suggested development environments theme deployment workflow the quality assurance process and how to contribute to the Plone theming community by creating publically available themes In Chapter 15 we will take a sneak peek into the future of rules based theming for Plone This chapter will feature a complete walk through of theming a site using the collective xdv add on What you need for this book To run a Plone 3 based web site you need Operating system requirements e Windows XP or later e OSX 10 4 x or later e Linux 2 6 x or later e Python 2 4 Plone 3 x series do not work with Python 2 5 2 6 or 3 0 On OSX and Linux you need to have development tools GCC installed for installing Plon
191. ed viewlets Think of viewlets and viewlet managers as an organization your site Within the organization there are numerous departments viewlet managers and numerous staff members viewlets within these departments For a staff member to be moved from one department viewlet manager to another promoted or perhaps even fired paperwork ZCML XML and sometimes Python code must be filled out The first step to modifying viewlets is to locate them and figure out if they are class based or template based This is a great oversimplification but will help you get used to the patterns needed to do basic modifications In reality all viewlets have classes If it s not specified in ZCML it means that it is using the inherited default class It just means that the viewlets don t need any supporting logic from a derived class Likewise a viewlet can have both a class and a template specification In that case the specified template is used for rendering and the template can access the class logic Browser pages typically work this way For shorthand though what we are calling class based viewlets above are simply viewlets that don t have ZCML specified templates They may use a template they get from somewhere else or they may render some other way Similarly what we call template based viewlets are deriving from the inherited class but there isn t a class defined in plone app layout for these viewlets As explained above inside
192. ee on Apple s developer _ site http developer apple com tools xcode Downloading XCode may take several hours and since it s included on the Tiger and Leopard distribution disks it is much faster to just run the installer from the disks You re generally going to need XCode no matter what so it s best to just go ahead and install it Macintosh users who want a tool with a graphical interface may prefer Cornerstone http www zennaware com cornerstone a client which is especially helpful for Subversion newbies A full version of Subversion is actually baked into the application which means that you don t need to install Subversion on Tiger If you are running Debian or Ubuntu Linux use this command to install Subversion aptitude install subversion Windows users meanwhile may find the graphical TortoiseSVN client useful http tortoisesvn tigris org If you use Fink then you should install the svn client package http fink sourceforge net pdb package php svn client For information on how to use Subversion and how to create a repository you can refer to any number of web sites You should also keep handy the commonly used Subversion Reference Card http svnbook red bean com en 1 2 index html If you are creating multiple Plone sites it s absolutely crucial to use Subversion and it s a relief to know that even if your hard drive dies your code is safe 55 Download at Boykma Com Setting up your De
193. eeing this instead of the web site you were expecting the owner of this web site has just installed Plone Do not contact the Plone Team jor the Plone mailing lists about this lt p gt rr started lt h2 gt In this case we ll look at the code provided by a YouTube video sculpturedsound Subscribe April 18 2007 more info Press Conference for The Wendell Baker Story from SXSW The Wendell Baker Story is a film written by Luke Wilson and directed by Luke Wilson and his oldest brother Andrew Wilson It stars Luke Wil URL hitp www youtube com watch v 0SdO0RE_ Embed lt object width 425 height 344 gt lt param 258 Download at Boykma Com Chapter 13 The code we re concerned with here is the Embed code shown on YouTube lt object width 425 height 344 s lt param name movie value http www youtube com v OSdORf_yu0 amp hl en amp s 1 gt lt param gt lt param name allowFullScreen value true gt lt param gt lt param name allowscriptaccess value always gt lt param gt lt embed src http www youtube com v OSdORf_ yu0 amp hl en amp fs 1 type application x shockwave flash allowscriptaccess always allowfullscreen true width 425 To do so height 344 gt lt embed gt lt object gt Inside of this code you ll see blocks with words such as object param and embed These tags are normally filt
194. efaultPloneLayer Marker interface that defines a Zope 3 browser layer nun Registering our browser page Next we register our browser page in our browser configure zcml file lt configure xmlns http namespaces zope org zope xmlns browser http namespaces zope org browser xmlns plone http namespaces plone org plone i18n_domain plonetheme test gt lt test theme Zope 3 browser layer gt lt interface interface interfaces IThemeSpecific type zope publisher interfaces browser IBrowserSkinType name test theme gt lt Browser views gt lt browser page for name audiencenavigation class audiences IAudienceNavigationPortlet layer interfaces IThemeSpecific permission zope2 View gt lt Viewlets registration gt lt Zope 3 browser resources gt lt configure gt One way to customize this resource is to provide an override for a more specific or different context The context is the most general Under the hood this means zope interface Interface or everything In this case it means that this is a generic view that can be applied to any interface 123 Download at Boykma Com Working with Zope 3 Components The browser page directive attributes can be explained further e for Registers the page for a specific interface e name This is what your view is called in the URL e class The Python class that attaches to your pa
195. eloper yahoo com yui articles gbs index html The use of VMware or Parallels and the proper browser add ons such as YSlow is essential here You may also choose to test against new media such as iPhones and BlackBerries Emulators http iphonetester com can be used but they are not nearly as reliable as the real thing Browser testing is typically done a few days prior to go live in order to allow enough time to fix errors Another aspect of quality assurance involves testing the site s look and feel This might include e Testing the areas of the site you might not visit often e Testing the section specific styling e Verifying that any styles that need to be added to the visual editor are indeed added e Verifying that viewlets are in the correct order and that extra viewlets do not bleed through from other themes e Checking that accessibility is taken into consideration e Writing and testing the uninstall process Let s look at these items in more detail e The areas of the site where you would not ordinarily look include areas such as the Site Map Site Setup the login page or manage viewlets These pages are generated differently than most content on a Plone site and their look and feel may not match the rest of the site depending on your CSS Section specific CSS is also something to watch out for and you should make sure that shortnames have not been altered as this might negatively impact section specific styling
196. elopment is on the filesystem but we ll look at how you can make some quick and dirty changes TTW if needed and also cover briefly how to bring those changes back out to the filesystem In this chapter we step through how to make our Zope instance recognize our theme product then make minor manual adjustments to a Plone site through the ZMI Next we learn how to get the same changes into our filesystem product by using GenericSetup profiles and other tools Specifically this chapter involves a tour of how to activate a theme and how to use skin layers and non Zope 3 elements to affect the look and feel of your site The lessons learned in this chapter should help transition you to filesystem development Prerequisites In order to perform most of the customizations mentioned above you need managerial rights to your site light programming skills and a little common sense For some of the changes you will need to be comfortable with the concept of Plone filesystem theme products as discussed in the previous chapter Please follow the steps in the previous chapter to generate a theme product and install it on your Plone site Download at Boykma Com Making Manual TTW Changes or What Not to Do It will be helpful in some cases to have an understanding of TAL the Zope Template Attribute Language and TALES Template Attribute Language Expression Syntax it s expression syntax but not critical yet You can find a good descripti
197. eming accessible to individuals who don t even know what Plone is For more information on Deliverance and collective xdv please read the final chapter of this book FS Dump For themers who started their skin creation through the web or who have content they wish to extract from the ZMI FS Dump is an excellent tool To use it download the product from http www plone org products fsdump and follow the installation instructions This is a product that lives in the Products namespace so it is not installed like ege based products The product page doesn t indicate that it works on Plone 3 but the last time I tried it on a Plone 3 site it worked Once installed use the Add drop down menu found at http www mysite com manage main and create a Dumper instance in a folder or product that contains the TTW code to be dumped This tool appears to work best when trying to dump items from the custom folder though hypothetically it should work for any other folder in the ZMI Next supply an absolute path to a directory on the filesystem in which the dumper is to create the files for example opt Note that the user for whom Zope is running needs write access to this directory Click the Change and Dump button to do the dump to the indicated directory and then copy the dumped files into your theme product s skins folder in the appropriate locations 249 Download at Boykma Com Add on Tools and Theming Tips qPl
198. en source toolbar can be downloaded from Mozilla s site https addons mozilla org en US firefox addons versions 60 or the developer s personal web site http www chrispederick com For installation information and support visit Chris Pederick s web site Note that all the work on chrispederick com is distributed for free under the terms of the GNU General Public License This extension adds a menu and a toolbar to the browser with various web developer tools It is designed for Firefox Flock and Seamonkey and will run on any platform that these browsers support including Windows Mac OS X and Linux The downside of this toolbar is that it doesn t come with instructions so to use it requires some exploration After installation the toolbar displays at the top where you see the options Disable Cookies CSS and so on Choosing Edit CSS from the CSS drop down menu opens up a panel that allows you to examine each individual stylesheet Disable Cookies gt EJ CSS FJ Forms E Images Information Miscellaneous 7 Outline S Resize J Tools 2 ViewSource J Optionsy f amp iGoogle Web Developer Firefox Add 3 Forums on chrispederick com 40 Years Igniting a Moveme X ENVIRONMENTAL Bearch Ste a e COUNCIL T only in current section f AN WASHINGTON about us contact donate events press room publications A Shared Vision 5S Sampa
199. ent tool Firebug Firebug extension Firebug is another open source extension for Firefox that can be downloaded from Mozilla s web site https addons mozilla org en US firefox addon 1843 or http getfirebug com There is a dedicated team of developers that maintains the extension and the documentation is plentiful so this is a tool that themers can hopefully count on in the future Firebug can be used for both Firefox 2 and Firefox 3 but different versions are required for each so pay attention to the installation instructions i It s worth mentioning that there is a bug in Firebug for Firefox 3 that gt lt causes Firebug to crash if you attempt to edit user stylesheets For this Q reason alone many individuals choose to do their initial debugging on Firefox 2 It s hoped that this bug gets fixed soon Firebug allows you to edit debug and monitor CSS HTML and JavaScript live in any web page It is similar to the Web Developer Toolbar but the way in which it surfaces the CSS on a page and allows you to browse the styling of ancestors is cleaner For a list of keyboard shortcuts you can visit this page http getfirebug com keyboard html 27 Download at Boykma Com Skinner s Toolkit The interface for Firebug looks like this The Bullitt Foundation NERGY INDUSTRY mplemepting fagsighted AND TECHNOLOGY regional energy policies LEARN MORE gt
200. er manage viewlets zope publisher interfaces browser IDefaultBrowserLayer manage_interfaces zope publisher interfaces brow IDefaultBrowserLayer navigation pt Products FSCVLTheme browser interfaces IThemeSpecific navigation pt plonetheme dogwood brow terfaces IThemeSpecific navigation pt zope publisher fi IDefaultBrowserLayer navigation pt Products WWRC br interfai rowser interfaces IThemeSpecific rfaces IThemeSpecific Download at Boykma Com Chapter 7 Some of the elements listed here have customized names such as ace path_bar or bullitt colophon which are specific to two themes contained in this particular Zope instance This naming convention is optional and can only be done on the filesystem If your integrators are making changes using this tool you should always check this area prior to checking in changes to your filesystem product To extract code from this section go to portal view customizations in the ZMI and locate the item you wish to extract look for items highlighted in yellow Click on the item and cut paste it into the appropriate page template in your theme product If this is anew modification to a page template that is not specifically written for your theme you ll also need to write the boilerplate to hook the page template up to your theme product For now just understand that this area provides an TTW means by which
201. er folder where many of our viewlets and page template changes will occur These lines are added to the theme product by paster by default It also tells our theme product to respect any filesystem directory views defined in skins zeml Download at Boykma Com General Styling and Templating Changes Basic styling As you can see by installing the theme there is already some basic styling in place Let s take a look at this styling First I set a few base properties in our theme product s base_properties props file located at mybuildout plonetheme guria plonetheme guria skins guria_styles title string guria s color font logo and border defaults plone_skin string guria logoName string logo gif fontFamily string Lucida Grande Verdana Lucida Helvetica Arial sans serif fontBaseSize string 69 fontColor string Black fontSmallSize string 85 backgroundColor string 56492e linkColor string 2e5256 linkActiveColor string Red linkVisitedColor string Purple borderWidth string 1px borderStyle string solid borderStyleAnnotations string dashed globalBorderColor string 79715f globalBackgroundColor string ffefca globalFontColor string 79715f headingFontFamily string Lucida Grande Verdana Lucida Helvetica Arial sans serif contentViewBorderColor string 79715f contentViewBackgroundColor string ffefca contentViewFontColor string 79715f inputFontColor string Black textTransform string lowerc
202. er 22 Firefox 24 Firefox Web Developer extension 25 Firebug extension 27 YSlow 31 Colorzilla 34 Safari tools 36 Safari Web Inspector 37 Validation tools 38 Text editors 39 TextMate 39 CSS Edit 42 E Text Editor 45 Notepad 46 Download at Boykma Com Table of Contents WordPad 46 Dreamweaver 46 Summary 47 Chapter 3 Setting up your Development Environment 49 Buildout and you 49 Understanding the terminology 50 Setting up your development environment 54 Subversion for version control 54 Download Plone 56 Macintosh dependencies for the Unified Installer 56 Windows dependencies for the Unified Installer 57 Operating system agnostic dependencies 57 Buildout The Plone filestructure 58 Summary 61 Chapter 4 Create and Install a Theme Product 63 Generating your theme product using paster 63 Available templates 63 Generating your product 64 Filestructure of a plone3_theme product 66 Adding your theme product to your buildout 69 Starting Zope and installing your product on a Plone site 70 Creating a Plone site 71 Installing your Plone theme 72 Putting your site into debug mode 72 Summary 73 Chapter 5 Making Manual TTW Changes or What Not to Do 75 Prerequisites 75 What this chapter will not cover 76 Registering and installing a new theme 76 Register the filesystem directory view 77 Make the directory view available to portal skins 78 Install your theme product 80 General guidelines during development 80 About a theme pr
203. ered out by safe html filter inside of Plone but we can tell Plone to respect those tags and not filter our HTML code 1 configlet We go to Site Setup for our Plone site and click on the Visual Editor Then click on the Toolbar tab and enable the checkbox next to Embed tab in External link drawer not shown in the following screenshot scroll down to the option CEN f A A Q Plon Site Map Accessibility Contact Site Setup e Search Site A Search FT only in current section Home Users News Events amp vedaw Log out You are here Home gt kupu_library_tool Site Setup Plone Configuration Kupu Toolbar Configuration Links Documentation B Add on Products HH Calendar E Collection of Content Rules r7 Global button visibility You may enter an expression to control the visibility of all buttons together It should return a list of visible button ids or None to leave all buttons visible The visibility rules below are then applied to further filter out individual buttons You might use this to restrict a particular class of users to a subset of kupu functions Errors HTML Filtering E Language EJ Mail f Maintenance Markup fg Navigation Q Search amp Security Site Themes B Types amp amp Users and Groups b gt Visual editor FA Zope Management Interface r Button vis
204. erms of the user interface and layer compatibility with Adobe Photoshop Browser add ons and important notes Now that you have sense of the tools that are available for manipulating design files and exporting the necessary images for building your web site let s look at how browsers affect the web site building process either through add on tools or through sheer bugginess It s also worth mentioning that users should reference the A List of popular browsers to see which browsers are still considered to be supported by web developers http developer yahoo com yui articles gbs index html This can help to ease the quality assurance load during web site testing Many of these A List browsers come with browser specific tools that allow you to inspect your web site to descry the CSS Cascading Style Sheets ID and class selectors manipulate your CSS on the fly optimize your site explore color options and more We ll look at the available options for three major browsers Internet Explorer Firefox and Safari but you should always be conscious of general browser penetration statistics so that you know which browsers are still in popular use http en wikipedia org wiki Usage share of web browsers Now let s get back to our key browsers 21 Download at Boykma Com Skinner s Toolkit Internet Explorer From a themer s perspective Internet Explorer is the most finicky browser against which to implement as older v
205. ersions of Internet Explorer followed the W3C s World Wide Web Consortium s standards differently than many other popular browsers According to http positioniseverything net a leading collector of browser fixes All browsers have CSS bugs and IE leads the pack in this area but that is not the end of the story Microsoft has seen fit to engineer their browser to deliberately violate the standards in several critical ways It might just be a misguided attempt to make it simple for newbie coders or it might be a cynical ploy to crush the competition but in any case it creates huge headaches for those of us who desire to employ CSS positioning on our pages While this may be true many fixes for Internet Explorer have been identified and thankfully IE6 one of the more problematic browsers in recent years is finally becoming obsolete It was replaced by IE7 which was a vast improvement but still did not implement the W3C conventions for CSS faithfully As of this writing Internet Explorer 8 was released and showing signs of having finally made strides toward real compliance to W3C standards What this equates to is that web developers tend do their initial browser testing in browsers that are more compliant that means doing most upfront testing in Firebug and Safari and then rounding out the testing at the end against IE6 IE7 and IE8 Where possible it s also important to test against other major browsers and handheld media
206. es and systems Supports a more familiar CSS syntax in addition to XPath e Cons compared to xdv Less integrated with Plone requires you to understand more of the ecosystem and setup Uses its own non standard but CSS like syntax can t be deployed inside a web server process Which one should I use A general rule of thumb to help you decide what approach to choose e Use the add on product approach when you need extreme granularity of control and are willing to learn some Python and ZCML to get what you want e Use XDV when you d like to keep the theme separate from the code and want a reusable theme approach that can potentially be deployed as part of the web server process And when you don t want to worry about most of the plumbing and are comfortable using best practices from the Plone community 284 Download at Boykma Com Chapter 15 e Use Deliverance when you have advanced theming needs including the ability to apply the same theme to multiple frameworks web apps in addition to Plone and are willing to set up a proxy or WSGI pipeline to make it happen Of course reality is always a bit more complicated you can apply an XDV based theme to non Plone setups too if you know what you re doing The important part to know is that you can move between XDV and Deliverance pretty easily so starting out with collective xdv is likely to be a great start even if you end up
207. es that are heavily styled and need to maintain consistency I suggest that when using Collage you do not create your objects within the Collage itself you should instead create the objects in your normal Plone content tree and pull those items in as aliases The reason for suggesting this is that it is not possible to access the contents of a Collage via the standard folder_contents view that is normally possible in a folder Hence if you need to move that content to another area of your site you cannot This also invites some jeopardy when migrating to a new version of Plone 246 Download at Boykma Com Chapter 12 It s worth mentioning that Collage will not become part of core Plone in the future as the mechanism for organizing blocks of content on a page in the future will be accomplished via a new drag and drop mechanism The lead programmer for Collage has stated however that there will be a migration path but the reality of this is unknown Finally the usability of the Collage product is a bit clunky but with some common sense it s easy to use and can be a quite powerful layout tool for Plone 3 It can be downloaded here http plone org products collage Tableless styling using Plone Tableless A popular product for CSS purists is Simon Kaeser s plone tableless Plone s default main template is created using tables which many themers do not wish to use To get a tableless version of Plone s main template si
208. esource intensive There are a couple of ways of adding browser related fixes to your theme product You could certainly add to the Plone stylesheet IEFixes css you could create stylesheets for each individual browser you re patching or you could do them inline in your theme s main stylesheet For my purposes I tend to insert them directly into my main stylesheet so that I don t have to hop between stylesheets This is just a personal preference The CSS for this theme product was pretty solid in Firefox and Safari so here I am going to focus primarily on IE6 and IE7 242 Download at Boykma Com Chapter 11 The searchbox frequently shows up with scrollbars around it and here it does again as though it doesn t fit quite right A simple fix to the code addresses that issue in IE6 html portal searchbox overflow visible important I also put an important declaration in there as it didn t want to take effect at first Other than that and the portal siteactions fix mentioned earlier IE6 appears to behave nicely IE7 also appears to behave well and there is no need to adjust the searchbox However in the event that we do need to make fixes to the CSS the syntax for the fix would look like this html portal searchbox insert CSS here Again we made a fix to the portal siteactions for IE7 as seen in the code listed earlier html portal siteactions margin left 9px margin top 0
209. ewlet manager You can find Plone s default viewlet ordering mechanism in your buildout in Plone s baseline product CMFPlone located in the GenericSetup XML file at buildout cache eggs Plone version egg Products CMFPlone profiles default viewlets xml lt xml version 1 0 gt lt object gt lt order manager plone portaltop skinname Plone Default gt lt viewlet name plone header gt lt viewlet name plone personal_bar gt lt viewlet name plone app i18n locales languageselector gt lt viewlet name plone path bar gt lt order gt lt order manager plone portalheader skinname Plone Default gt 137 Download at Boykma Com Customizing Viewlets and Portlets lt viewlet name plone skip_links gt lt viewlet name plone site actions gt lt viewlet name plone searchbox gt lt viewlet name plone logo gt lt viewlet name plone global_ sections gt lt order gt lt order manager plone contentviews skinname Plone Default gt g Pp lt viewlet name plone contentviews gt lt viewlet name plone contentactions gt lt order gt lt order manager plone portalfooter skinname Plone Default gt g p lt viewlet name plone footer gt lt viewlet name plone colophon gt lt order gt lt object gt As you can see the viewlets are all grouped by manager for example plone portaltop plone portalheader plone contentviews and plone portalfoo
210. ews2 enumerate Copper River chinook salmon Alaska River Expeditions Lorem ipsum dolor sit amet consectetur adipisicing v Ge news Draft Gulkana River elit sed do eiusmod tempor incididunt ut Environmental labore et dolore magna aliqua Ut enim Assessment ad minim veniam quis nostrud 2 T Test Faheryin Lower Copper River by Native Vilage of Eyak Released exercitation ullamco laboris nisi ut aliquip i This show hide functionality is very important One situation where this becomes valuable is when you have a PSD file that indicates graphical buttons with text over them For accessibility reasons you may want to render the text as real HTML rendered text and not as an image You need to be able to export the buttons in both their on and off states in order to get a proper rollover effect and you need to hide the graphical text in order to do this 18 Download at Boykma Com Chapter 2 One site that illustrates this concept is http greenforall org Using Adobe Photoshop the layers where the text appears on the top navigation were hidden and just the background on off images were imported On the finished web site the top menu used the background images and real rendered text The other core functionality that Adobe Photoshop offers is the ability to slice images and export them The Copper River Watershed Project web site
211. f features and functionality used by photographers graphic designers web designers and many other creative professionals Fireworks is a much more focused tool with the features for prototyping vectors and bitmaps for the web and application interfaces The real selling point here though is integration with Adobe Photoshop as a design may be shared between multiple people each using different graphical programs The ability to manipulate the vector and raster images is also important Additionally like Adobe Photoshop Adobe Fireworks provides the ability to work with layers and slices and preserves many of the settings in an Adobe Photoshop PSD file It s not as good at compositing and photo manipulation as Photoshop but is a lot stronger with text shapes and final optimization Selective JPEG optimization is also very handy and allows you to heavily compress the portions of a JPEG while keeping text legible Additionally it s great for generating image maps not often used in Plone rollovers and other common tricks Finally it allows you to view your work with either Windows or Mac gamma Gamma correction basically refers to the ability to correct for differences in how computers and especially computer monitors interpret color values There are two factors here the ability to predict what an image say a photograph will look like on another monitor and the ability to match the colors from different sources on a single page Ad
212. f the LogoViewlet class and the page template we want to use class LogoViewlet ViewletBase index ViewPageTemplateFile logo pt We will paste this into our viewlets py file and make a few alterations First it s important to realize that our theme product doesn t know anything about something called ViewletBase but that s okay because we will be changing that We then make sure the following two lines are present at the top of our viewlets py file from Products Five browser pagetemplatefile import ViewPageTemplateFile from plone app layout viewlets import common The first line is already provided but the second line we need to add This line tells our theme product that it knows about the file named common py that ships with plone app viewlets We could be more Pythonic and just import the Logoviewlet from common but since we ll be making other viewlet changes in our theme product it s just as easy to import all of common Now we adjust the code for our LogoViewlet class to look like this from Products Five browser pagetemplatefile import ViewPageTemplateFile from plone app layout viewlets import common class LogoViewlet common LogoViewlet Alter the logo to include the description of our website nun def render self return self index index ViewPageTemplateFile logo pt By doing this we are subclassing the LogoViewlet class defined in common py Our subclass will automatically do everything the L
213. fault If one is not created or you wish to create a different one from the ZMI choose Plone Site from the Add pop up list You should not need to select a profile at this time although you could do so if you know that you will be building on top of a policy product that will control generic settings that you want to repeat from project to project Once you add a site you will be able to navigate to your new site by selecting the new site and clicking on the View tab You should see the following result notice that default Plone styles are applied Site Map Accessibility Contact Site Setup Search Site 3 Search only in current section Home Users News Events amp admin Log out You are here Home Contents View edit Rules Sharing History Display Add new State Published V August 2008 Mo Tu We Th Fr Sa Su Welcome to Plone by admin last modified Aug 17 2008 06 43 PM 123 5 4 4567 8 9 10 Congratulations You have successfully installed Plone 18 19 20 21 22 23 24 25 26 27 28 29 30 31 11 12 13 14 15 16 Also available in presentation mode If you re seeing this instead of the web site you were expecting the owner of this web site has just installed Plone Do not contact the Plone Team or the Plone mailing lists about this Manage portlets Get started Before you start exploring your newly created Plone site please do th
214. flow or any other modifications of base profiles are less safe actions and only should be undertaken when you have a solid understanding of GenericSetup An example extension profile The great thing about GenericSetup is that it s written in a human readable format to make edits quick and easy The profiles typically live ina profiles folder ina filesystem product Note that your product might have different files listed here Y plonetheme ace gt 2 docs 2 MANIFEST in v plonetheme A __init__ py vy a ace 2 __init__ py gt browser 2 configure zcml gt Extensions y a profiles v default 2 cssregistry xml import_steps xml jsregistry xml metadata xml plonetheme ace_various txt properties xml skins xml 2 viewlets xml Y uninstall 2 cssregistry xml skins xml E viewlets xml yb me 2 profiles zcml 90 Download at Boykma Com Chapter 5 The default folder contains all of the information on what knobs and switches need to be twisted when the product is installed and the uninstall folder obviously contains the information on what knobs should be un twisted when the product is removed Remember that the quick_installer takes care of this un twisting for a number of things that a product installation normally does but not everything The common examples of files you might see include e skins xml A list of all of the skin paths that should be added to the skins tool when yo
215. formation Miscellaneous Outline Resize v Tools v View Source Options em Example Audience Find GL GNext Previous Highlightall Match case Phrase not found SW Transferring data from localhost t Ba 0 3K 0 067s Wa fa 73 Summary In this chapter we have learned e What Zope 3 components are involved in filesystem theme development e About interfaces and adapters e How to use ZCML code to tie together Zope 3 components e How to use images and stylesheets and browser resources e How to write a basic browser page and register it in our theme In the next chapter we will look at how to customize viewlets and portlets the key components that are used when customizing a web site s look and feel 126 Download at Boykma Com Customizing Viewlets and Portlets In addition to the Zope 3 resources covered earlier we have two very special browser resources known as viewlets and portlets These components are at the heart of the theming process and are the most commonly modified elements In this chapter we will explain how to e Inspect viewlets using the e manage viewlets tool e Modify viewlets and portlets programmatically e Modify these components through the portal view customizations tool through the web Viewlets In this section we will gain an introduction to viewlets the snippets of reusable functionality that comprise a Plone page Items such as brea
216. ft gt a href feed content a link lt span id contentBottomRight gt feed E gt gt portal columns gt tbody gt tr gt portal column content gt div gt region content gt content gt storybox tabs gt li a storybox tab L pla Al 37 Download at Boykma Com Skinner s Toolkit The left pane displays the code for your web site while the pane on the right side displays the CSS applied to that particular selection plus the styles applied to the ancestors of that item What s also helpful is the bottom status bar that allows you to click from one element and upwards through each of the ancestors to inspect their styles The inspector gives you all of the relevant CSS information including your current place in the markup hierarchy the final computed style and a listing of the other cascading styles While it is not possible to modify the computed styles in the right hand pane it is possible to modify the styles in the hierarchy Making a change and hitting Enter will automatically make the change in your browser This is similar to when you make a change using Firebug works instantly To reload and undo the changes reload the browser not the inspector window Safari provides additional tabs at the top that allow you to see load time inspect JavaScripts utilize a profiler and work with a database The first three tabs are likely the only three you would use for theming a web site Ove
217. fter guria images gt lt layer name guria styles insert after guria templates gt lt skin path gt lt object gt Basically the steps are the following 1 Rename the folders on the filesystem 2 Modify the skins zcml file to change the name of the filesystem directory view what you see in the portal skins properties area of the ZMI 3 Modify the skins xml file in the profiles default folder to match This alters the basic profile of your theme product If you wanted to add additional folders and filesystem directory views here a scripts folder for example you d just add code by following the conventions given to you in these files and then create additional folders Making changes to the ZCML file means that you would need to do a restart of your Zope instance 185 Download at Boykma Com Creating Installing and Tweaking our Theme If you installed your theme product before making the changes to the skin layer names you might want to inspect the skin layers at http localhost 8080 mysite portal_skins manage_ al propertiesForm to make sure that the correct skin layers are listed You might even need to reimport the skins tool step via portal_setup Q athttp localhost 8080 mysite portal_setup manage_ importSteps Make sure you choose the correct profile first by choosing your theme product s name from the drop down list at the top of the import page The theme product s name is the sam
218. fy main_template pt from CMFPlone occasionally needed these days you would place your modified main_template in the skins directory too Any templates that come from CMFPlone will also go in this directory Another directory that is useful here is the profiles directory This directory will hold GenericSetup files XML files that describe the underlying behavior of a skin product or site configuration In other words this directory holds files that allow you to register stylesheets JavaScripts add remove tabs menu items and more It can also hold files that aid in uninstalling a product by describing what the end result should look like We ll cover GenericSetup in detail later It s important to realize that the structure of your theme product isn t set in stone and that s ultimately where the power of Plone becomes evident When you get used to modifying ZCML and XML we ll see more of this later you ll have the ability to alter names of folders remove code from the browser directory rename your theme and more Do not be afraid to make changes but always start your Zope in the foreground when you are making changes to your theme product to spot any problems in your boilerplate code In the case of changes to XML files you ll also have to remember to import those files which we will cover in a bit 68 Download at Boykma Com Chapter 4 Let s look now at how to add our theme product to our buildout so that
219. fy the object you want to work with though as this screenshot indicates WASHINGTON ENVIRONMENTAL COUNCIL e Display Element Information This setting is another important setting Enabling it allows you to click on any element on your page and gather details about that element This is significantly more powerful than the basic Display ID and Class Details option All of these details can help to determine if a current attribute on a tag is causing issues or if an attribute assigned to an ancestor might be responsible WASHINGTON ENVIRONMENTAL COUNCIL A Shared Vision 26 Download at Boykma Com Chapter 2 e Validate CSS Validate HTML When you are working with local Plone instance standard Validate HTML and Validate CSS will not work since the validators are not able to get to your localhost Deploying to a test server allows you to validate against your code prior to going live with your web site or you can and should use the Validate Local CSS and Validate Local HTML options e Error and Warning Logs Clicking on the checkmark or X symbols to the right of the Options drop down list gives you the ability to go into compliance mode which gives you CSS and JavaScript warning logs when you click on them The Web Developer Extension is a powerful tool worth using for many tasks such as disabling stylesheets to check accessibility and it s not uncommon to use it in tandem with the next excell
220. g buildout Once you have added these lines to your configuration file it s time to run buildout so that the system can add and set up collective xdv for you Go to the command line and from the root of your Plone instance in your buildout directory run buildout like this bin buildout You will see output similar to this Getting distribution for collective xdv 1 0 Got collective xdv 1 0 Getting distribution for dv xdvserver Got dv xdvserver 1 0b4 Getting distribution for plone postpublicationhook Got plone postpublicationhook 1 0rc1 Getting distribution for plone app registry Got plone app registry 1 0al Getting distribution for plone synchronize Got plone synchronize 1 0b1 287 Download at Boykma Com The Future of Theming for Plone If you get errors when doing this instead of the above output please contact the Plone support forums to get more help with your specific CR setup http plone org support There might be some issues GA especially if you re on Mac OS X We have been working on fixing the Mac situation for a while and it should be fixed by the time you read this but if it isn t let us know If everything went according to plan we now have collective xdv installed It s time to start Plone and activate it for our site Activating XDV Now that we have added XDV to our setup it s time to activate it for our specific Plone site 1 Make sure Plone was re start
221. ge banner href http bullit Grande Verdana Lucida Arial sans serif e font size 69 PES a font size adjust none gt lt a id img energy industry technology class homepage banner href h y font style normal a lt r font variant normal R REET ST EAE i S Done F Wc 376k dam The bug icon in the bottom corner of your browser allows you to expand or minimize the Firebug pane You can also enable it via the Tools Firebug Open Firebug option in your menu The HTML view of this tool is extremely helpful The left hand pane allows you to expand and walk through the structure of your web site or you can use the Inspect option The right hand pane displays the available CSS listed in order of precedence One great feature of this tool is that you can select an ID or class and Firebug will highlight the item you wish to inspect which can help to diagnose padding or sizing issues It also offers a graphical representation of its box model rendering via the Layout tab 28 Download at Boykma Com Chapter 2 In this case we are inspecting the image on the home page known here by the ID features slot When we click on this item the right pane immediately shows the CSS that is used by that piece of content In this case the wec css file has direct references to the features slot but after that the nearest closest ancestor is documentContent WASHINGTON aboutus contact donate
222. ge template e template The page template that renders your view e permission The permission required to access your view e layer The layer where the package is registered usually IThemeSpecific The code also tells us that we are using the AudienceNavigationPortlet class defined in our audiences py file We could have disambiguated it further by using the designation before the name which would have made it clear that we are looking at a view and not for example a content item or a skin layer template We can either use a skin layer template named audiences pt not shown here that traverses to the view as context audiencenavigation and then calls methods on it or we can use a class based view audiences py that pulls in the template via its render attribute and refers to the view instance as view Lastly the browser page is made available only to our current theme product via the IThemeSpecific layer designation Create a page template for our view Next we want to create a page template using TAL and HTML and a tiny snippet of Python to render these items We will call it audiences pt and place it in our browser folder Notice that it iterates over a series of audience items to output an unordered list lt span class audiences list gt lt dt class audiences header tal content view header gt Information for lt dt gt lt ul gt lt li class audiences item tal repeat audience view audiences gt
223. ged in e A logout link http localhost 8080 mysite logout e A join link http localhost 8080 mysite join_ form e An undo link http localhost 8080 mysite undo_form e An Add to Favorites link e A My Favorites link Many of these options are not visible by default Additional items that might be useful to add to this area include e Linkto a Site Help section specific to a client e Link to Plone documentation e Link to a Support page For more information on each of these CMF action categories read the Plone Theme Reference manual http plone org documentation manual theme reference or Chapter 7 of The Definitive Guide to Plone First Edition Andy McKay Apress We ll look next at a tool called GenericSetup extract our portal actions from the ZMI using the tool and then insert those portal actions into your theme product About GenericSetup GenericSetup is a major step forward in managing Plone site configuration and is a core part of how Plone handles its own site creation process It is easy to get GenericSetup conflicts because it is sometimes unintuitive unless XML is your first language but it is also very powerful It s also important to use care to protect yourself against settings that might have been made through the web 88 Download at Boykma Com Chapter 5 Within the ZMI for your site click on portal_setup which is the control panel for managing your GenericSetup There
224. gn you want in standalone HTML and CSS files and then map parts of the content that comes out of Plone into your existing HTML This means that you can create as complex or simple designs as you want and let Plone supply the content This also means that you can write your own from scratch HTML and CSS but also map various Plone elements to wherever you want in your own design Plone knows nothing about what happens on the way out it just renders a page as it usually does Here is a more visual way to look at it You can see how the Plone output is mapped into a totally different template and design Your theme Plone output logo here inventions earn Content This makes for a much more robust approach to theming because as long as Plone keeps its HTML classes and IDs the same from one version to the next your theme will automatically work even in a new version of Plone And if it has changed it s a relatively simple operation to update the theme just locate the new name and replace it in the rule file Let s take a closer look at the rule file 291 Download at Boykma Com The Future of Theming for Plone The rule file Central to the way content makes its way from your Plone site into your theme is the rule file Let s look at your simple rules xml file again lt rules xmlns http openplans org deliverance gt lt Copy over the contents of the page body gt lt
225. gramming you could optionally alter your new Python class to behave differently This is an advanced topic that will not be covered here Lastly since we have created a new viewlet we also need to register it in our GenericSetup profile located in our theme product at yourbuildout src plonetheme yourtheme plonetheme yourtheme profiles viewlets xml as follows where yourtheme is the name of your skin and mytheme path bar is the name of your viewlet Notice that we also hide the default Plone path bar so that we do not have two path bars appearing on our site lt xml version 1 0 gt lt object gt lt order manager plone portaltop skinname yourtheme based on Plone Default gt lt viewlet name mytheme path bar gt lt order gt lt hidden manager plone portaltop skinname yourtheme gt lt viewlet name plone path bar gt lt hidden gt lt object gt 146 Download at Boykma Com Chapter 7 You could even position the elements using insert before or insert after if you wanted to Since we have modified our ZCML code zcml files and we have modified our GenericSetup profiles viewlets xm1 we not only need to restart our Zope instance but we also need to reinstall our product okay but only during early development or reimport our viewlets xm1 profile through the ZMI safer option because we have changed our XML profile To import the profile log into the ZMI and go to p
226. gt lt order gt fobjeets All we do is tell our viewlet to appear after the searchbox We would then import our viewlets xml file in site setup in the ZMI after making this change Additionally we add a bit of CSS code to support the layout of the personal bar PERSONAL TOOLS portal personaltools clear both All we want is to make sure that the personal bar continues to stretch across the width of the page and does not get stepped on by other elements on the page A visual clear gives us this Suppressing the top navigation Now we want to examine the top navigation Normally on a Plone site you see top level tabs that can be used to focus the navigation Additionally installing a product called webcouturier dropdownmenu http plone org products webcouturier dropdownmenu can enhance this navigation code Installing it immediately provides drop down navigation that can be styled via CSS If you have already customized the global navigation viewlet this may not work out of the box and you ll have to subclass from the webcouturier dropdownmenu viewlet In our case we want to suppress the top navigation entirely We could do this via CSS or we could remove it entirely by suppressing the viewlet itself In the Guria theme product we suppress it via our viewlets xml file located at mybuildout src plonetheme guria plonetheme guria profiles zcml lt xml version 1 0 gt lt object gt lt hidde
227. gt amp laquo lt tal rtl gt lt span gt lt span tal condition is last tal content crumb Title gt crumb lt span gt lt tal last gt lt span gt lt div gt We then need to do some basic styling of the breadcrumbs BREADCRUMBS portal breadcrumbs border bottom none text transform capitalize padding left lem section front page portal breadcrumbs display none We remove the border that normally displays below the breadcrumbs capitalize them and add a little padding We also suppress them from the home page using the hook that Plone gives us using the shortname of the page In this case the CSS hook is section front page While this shortname can be a little brittle most Plone sites use front page as the default home page shortname It s generally sufficient to advise site administrators not to change this shortname in order to keep the CSS styling intact For more information on this you can look at the discussion on sectional styling in the next chapter Because we changed ZCML we need to restart Plone and because we altered the viewlets xml file we also need to import the viewlets step using portal setup in the ZMI 223 Download at Boykma Com General Styling and Templating Changes Base portlet styling Now we need to look at what a portlet might look like We can add a couple of test portlets to the left column using http localhost 8080 mysite manage
228. h of the colors For more information on how to use this tool reference the online help available via the Help menu option Safari tools Safari doesn t have nearly the kinds of CSS debugging tools that Firefox and IE have but running Firefox in tandem with Safari allows skinners to simultaneously do browser testing while still making use of Firefox s debugging tools Safari s greatest strength is that it has a solid extremely fast rendering engine that can point to problems with your CSS For example I ve been able to look at a site in Firefox and in IE and both display beautifully but in Safari the result might look like half rendered garbage The offending code A missing semi colon Other browsers might swallow such minor errors but Safari is diligent enough to render your code exactly as it is written 36 Download at Boykma Com Chapter 2 There is however a tool that may allow you to do debugging with Safari Safari Web Inspector WebKit Safari Web Inspector Without going into too much detail here Safari WebKit is a nightly build of Safari that has a web inspector enabled by default Safari 4 has the web inspector built in but for Safari 3 it must be enabled via a command in terminal and a restart of Safari defaults write com apple Safari WebKitDeveloperExtras bool true If you choose to run the nightly build you can get that here http nightly webkit org but for most themers it s not necessar
229. h stating that unhiding viewlets through GenericSetup is an awkward process and it s generally easier to just unhide a viewlet using manage viewlets There is GenericSetup code that can allow you to do it via code and if you have the luxury to work only on the filesystem without using manage viewlets you should Next let s look at how we can override viewlets both in terms of their behavior and their appearance Overriding a viewlet template As we saw earlier viewlets can be regarded as either template based or class based although as mentioned that s really an oversimplification In this section we ll look at how we can modify a so called template based viewlet that technically inherits from a default class not specified in plone app layout We will not be moving the viewlet to a new section we re only going to modify its appearance For example let s assume that we want to modify the portal header area to include some additional information about our site If we open configure zcm1 located at yourbuildout buildout cache eggs plone app layout plone app layout viewlets configure zcml you can see the following code 140 Download at Boykma Com Chapter 7 lt The portal header gt lt browser viewlet name plone header manager interfaces IPortalTop template portal header pt permission zope2 View gt We want to copy this code to our theme product s configure zcml located at plonethem
230. hat pieces can be modified through the ZMI Remember that we are treating stylesheets and images as skin layer objects so they can be modified the way we discussed in Chapter 5 Making Manual TTW Changes or What Not to Do As for other components the short answer is that the following can be customized through the ZMI any templates that come from the plone app layout and plone app portlets directories and any browser layer templates that might be in your theme product These templates can be customized through the ZMI using a tool known as portal view customizations This tool is accessible using a URL like the following http localhost 8080 testsite portal view customizations registrations html Specifically you will want to scroll down on this page to get to the section called zope interface Interface 157 Download at Boykma Com Customizing Viewlets and Portlets You can only modify templates belonging to existing browser resources in this tool you cannot add new browser resources nor can you modify the Python classes used by these viewlets Adding new resources must be done first on the filesystem so that the appropriate ZCML configurations can be defined As a result this tool has limited use The portal view customizations tool was obviously designed by programmers not skinners and has a user interface that only a programmer could love But take a It is important to note that prior to Plone 3 1 4 th
231. he URL for that item create a new link object in your Plone site and paste that URL into the link object The video displays automatically in the site along with Content Ratings information the URL and the author of the video The author s name must be added by hand in Plone 270 Download at Boykma Com Chapter 13 Plone4ArtistsVideo is supported by Plone 3 and is always evolving For more information and to see any dependencies visit this URL http www plone org products plone4artistsvideo Other products to watch out for Developing for an open source means that add on products are always a moving target as new versions of Plone are released However this does not mean that products that don t yet support the latest version do not have value These products include some of the Plone4Artists offerings as well as one called Plumi Plone4ArtistsAudio Plone4ArtistsAudio is a product that allows you to upload audio extract metadata create podcasts store the files on the filesystem and to even assign Creative Commons licenses In more programmatic terms what it does is allows you to upload a normal Plone file object to your Plone site Plone4ArtistsAudio will detect it as an MP3 or Ogg file and decorate it with metadata par As of this writing support for Plone 3 is experimental but there is word of a buildout based setup that does work Interested parties should contact the Plone4Artists team ab
232. he code in our viewlets py file as follows class SearchBoxViewlet common SearchBoxViewlet Customizing the searchbox to use the locally defined page template nun def render self return self index index ViewPageTemplateFile searchbox pt Again we are merely subclassing the viewlet and telling it to look at our locally defined searchbox pt found in the theme product s browser folder The modified markup for the template is as follows lt div id portal searchbox i118n domain plone gt lt form name searchform action search tal attributes action string view site url search gt lt label for searchGadget class hiddenStructure i18n translate text_search gt Search Site lt label gt lt div class LSBox gt lt shorten the width of the search box gt lt input name SearchableText type text size 14 value title Search Site accesskey 4 i18n attributes title title search _site tal attributes value request SearchableText nothing 216 Download at Boykma Com Chapter 10 id view search_input_id class inputLabel gt lt use an actual search button instead of an input field gt lt lt input class searchButton type submit value Search i18n attributes value label search gt gt lt input type image class searchButton name submit alt submit value Search tal attributes sre string view portal url
233. he main_template pt file also contains other similar structures that represent other areas of Plone s layout 130 Download at Boykma Com Chapter 7 In other words the main_template pt in Plone 3 does not show the actual viewlets Rather the provider TALES expression above is a Zope 3 expression that looks up a content provider from a page template In this case the viewlet manager content provider is named plone portaltop To see the full list of default viewlets contained within these viewlet managers open the file named configure zcml located in your buildout at buildout cache eggs plone app layout version plone app layout configure zcml This file which is written in ZCML lists out all of the viewlets and viewlet managers that ship with Plone along with their formal names The code looks something like this lt Register viewlet managers used in plone s main_template gt lt browser viewletManager name plone portaltop provides interfaces IPortalTop permission zope2 View class plone app viewletmanager manager OrderedViewletManager gt lt Define some viewlets gt lt The portal header gt lt browser viewlet name plone header manager interfaces IPortalTop template portal header pt permission zope2 View gt Notice the difference between the browser viewletManager and browser viewlet definition and the OrderedViewletManager class used by the viewlet m
234. he suppressed right hand border is often assigned only to the last item in the list that is seen in logged out state This can appear sloppy It is best to assume that the site actions will be in flux and that we will never know the CSS id of the last item in the list However we will always know that one item will always be the last item with a class of last action and can style it appropriately To customize the viewlet to make this behavior more bullet proof open common py and configure zcm1 found at mybuildout buildout cache eggs plone app layout some version number plone app layout viewlets Searching for siteactions or site actions in configure zcml yields the following code lt The site actions gt lt browser viewlet name plone site_ actions manager interfaces IPortalHeader class common SiteActionsViewlet permission zope2 View gt This tells us that we are working with a class based viewlet We copy this code into the theme product s browser configure zcml file located at mybuildout plonetheme guria plonetheme guria browser We then modify it like this lt The site actions gt lt browser viewlet name plone site actions manager plone app layout viewlets interfaces IPortalHeader class viewlets SiteActionsViewlet template site actions pt layer interfaces IThemeSpecific permission zope2 View gt This code provides a dot delimited path back to the origin
235. heme product via a kupu xm1 or similar GenericSetup file in our theme product s profiles directory Kupu is the current visual editor for Plone and may be replaced by another editor in the future The principles here should be the same even if the official editor changes Download at Boykma Com Custom Page Views and Sectional Styling If you want to see a GenericSetup implementation in action download Denys Mishunov s excellent webcouturier hosting theme at http plone org products webcouturier hosting theme This theme is also a great example of the Plone 3 theming best practices In our case we re going to go the simpler more manual route and not use the GenericSetup method We re also going to repurpose some of the CSS from the webcouturier theme 1 First we want to insert some CSS into our theme product s guria css to create additional styles that can be inserted into a Plone page KUPU STYLES FOR HOMEPAGE TABLE we also need to configure kupu in the site setup area homeTable width 100 margin bottom 0 5em border spacing 5px border collapse separate homeTable th padding 0 7em 0 8em font size 1 2em color fff text align left background color 707564 homeTable th a color fff homeTable td padding 0 5em 0 0 border top 3px solid ccc font size 0 9em vertical align top homeTable td a text decoration underline border 0
236. hough most of them are geared specifically toward bloggers Similarly Plone volunteers are rapidly putting out new themes on a daily basis although there isn t a single location other than plone org where Plone themes can be found 12 Download at Boykma Com Chapter 1 This is the most active time for the Plone theming community to date and the entire community has taken notice More than books tutorials and the availability of open source themes the actual skinning process is where comparing Plone and Drupal is most critical It s generally acknowledged that getting started with skinning in Drupal and WordPress is easier because users only have to worry about CSS but once you get past the initial theme you have to worry about PHP which can be spidery and hard to understand Conversely Plone s theming framework is tough at the outset but easier more logical and sophisticated over the long haul Both situations present special challenges According to Larry Garfield in drupal I d say the hardest thing to get used to with Drupal is letting Drupal do things the Drupal Way rather than trying to force it into your mold Drupal can bend in all sorts of weird and exciting ways if you bend it where it s designed to bend But if you try to shoe horn it into the way you wish it worked rather than the way it does you ll waste a lot time needlessly especially at the theming layer The same could be said about Plone bu
237. http www packtpub com files code 3872_Code zip to directly download the example code The downloadable files contain instructions on how to use them Errata Although we have taken every care to ensure the accuracy of our content mistakes do happen If you find a mistake in one of our books maybe a mistake in the text or the code we would be grateful if you would report this to us By doing so you can save other readers from frustration and help us improve the subsequent versions of this book If you find any errata please report them by visiting http www packtpub com support selecting your book clicking on the let us know link and entering the details of your errata Once your errata are verified your submission will be accepted and the errata added to any list of existing errata Any existing errata can be viewed by selecting your title from http www packtpub com support Piracy Piracy of copyright material on the Internet is an ongoing problem across all media At Packt we take the protection of our copyright and licenses very seriously If you come across any illegal copies of our works in any form on the Internet please provide us with the location address or web site name immediately so that we can pursue a remedy Please contact us at copyright packtpub com with a link to the suspected pirated material We appreciate your help in protecting our authors and our ability to bring you valuable content 5
238. ibility Control the global visibility of toolbar buttons from this screen If no expression is entered only checked buttons are visible Enter an expression for finer control of visibility Individual fields may also whitelist or blacklist buttons see the field schema Values available in expressions includes field as well as the usual names e g to restrict the drawer buttons to users with the appropriate permissions give imagelibdrawer button and linklibdrawer button the expression python member and member has_permission Kupu Query libraries portal ID Title Es Expression save button Save button F bg basicmarkup Bold Italic group F B bold button Bold button F italic button Italic button F bg subsuper Subscript Superscript group G subscript button Subscript button et f l superscript button Superscript button Iz bg colorchooser Colour chooser group Jz G forecolor button Psychedelic foreground fe 259 Download at Boykma Com Plone and Multimedia 2 Next scroll down to the bottom of the screen and click Save Then go to the Site Setup HTML Filtering configlet SiteMap Accessibility Contact Site Setup Search Site A Search FT only in current section Home Users News Events 2 vedaw Log out You are here Home Site Setup Plone Configuration 3 Add on Products
239. iewlet here you could skip the class line above Always rely on what plone app layout s configure zcml file gives you to learn what you need to modify With this code in place assuming you did not try to subclass the PersonalBarViewlet the personal bar should appear in the footer once you restart your Zope instance or use the plone reload http pypi python org pypi plone reload egg to reload your modified ZCML code To restart your Zope instance simply shut it down and restart it in your terminal using the following command bin instance fg Starting your Zope in the foreground gives you the opportunity to run it in debug mode so that you can troubleshoot errors but once you close your terminal the instance immediately terminates It s worth noting that using the g command starts your Zope instance in the foreground In a production scenario you would start your Zope instance and leave it running by using the following command bin plonectl start Starting your Zope in the foreground gives you the opportunity to run it in debug mode so that you can troubleshoot errors but once you close your terminal the instance immediately terminates Reordering viewlets within a viewlet manager We already know that Plone orders viewlets within viewlet managers and we ve looked at how we can reassign viewlets to different viewlet managers Now we want to look at how we might reorder a viewlet within its current default vi
240. igns Current Legislation Make A Difference Our Approach Build Partnerships Mobilize the Public Engage Decision Makers Take Legal Action Come to an Event Join Our Team Edit css 2 Bis amp wi base css a css css authoring css portlets css ipso css Y print css Y deprecated css navtree css invisibles css Y forms css homestyle css ploneCustom css Embedded Styles background color 939393 background image url http localhost 8080 wec wec bg_tileme gif background repeat repeat position relative font family Georgia Times New Roman Times serif S Done E 235555 Key features of this toolbar include e Disable Cache This can be done using the Disable drop down list It may slow down your web browser s performance but you will get more realistic results This is probably the most valuable feature of this add on tool as it allows you to make sure that your cache is always clear and it can be used selectively from site to site 25 Download at Boykma Com Skinner s Toolkit e Images Display Image Dimensions This setting can help to diagnose the minor pixel errors where an image might be pushing against a padding setting elsewhere in your site e Information Display ID and Class Details This setting is extremely important as it can help to quickly illustrate the name of the object you are trying to style It can be hard to identi
241. iles such as profiles zcml and skins zcml The profiles zcml file provides the hooks Zope needs to read the GenericSetup files located in the profiles default folder The skins zcml file meanwhile is the file where you define the names of the filesystem folders that will hold your CSS images JavaScripts and templates These folders are skin layer folders which means the items contained within these folders will be customizable through the ZMI Zope Management Interface via the portal_skins tool and the custom folder If you are generating your theme product in the Products namespace a configure zcml file in your product directory Products myproduct configure zcm1 will be picked up automatically However packages in other namespaces such as the plonetheme namespace need to have a ZCML slug added as well A slug is merely a ZCML line that includes another file Plone 3 3 is scheduled to remove this requirement by allowing Python packages to signal that they have Zope 3 component configuration but we ll include the following code in case you re running a slightly older version of Plone In terms of theme and other product development it means writing one less annoying line of code If you recall from Chapter 3 where we configured our buildout cfg so that we could install our skin product you ll remember that we added code similar to what you see next In this code the slug is the line below the ZCML directive 116
242. ill find a listing of all of the buttons that are available when a user is on the Contents tab of any folder on the site These include actions that can be taken against a piece of content such as Copy Cut Rename Paste Delete and Change State You will rarely need to customize these items Test site Select All Modified Sep 01 2008 01 48 PM Sep 01 2008 02 59 PM Sep 01 2008 01 48 PM Sep 01 2008 01 48 PM 2D Users B Welcome to Plone News 3 Events Oooo Published Published Published Published Cut Delete Rename Copy Change State 85 Download at Boykma Com Making Manual TTW Changes or What Not to Do Object category This category contains actions that appear as the tabs above the content area when you are logged into your web site contens view Edit Rules Sharing Test site Select All Title Size Modified State Order O Users 1 kB Sep 01 2008 01 48 PM Published O B Welcome to Plone 1 k8 Sep 01 2008 02 59 PM Published EJ O News 1kB Sep 01 2008 01 48 PM Published EJ Events 1kB Sep 01 2008 01 48 PM Published Copy Cut Rename Delete Change State This includes the following e folderContents provides the logic for displaying the C
243. ill not be able to uninstall your themes As a caveat I have not used this product personally as I use other methods of doing sectional theming so any questions should be directed to the WebLion team Non Plone specific products for theming Plone theming obviously has some community tools that have been created to make the theming process easier but it s also possible to incorporate some advanced technologies The following are a couple of non Plone specific products that can be used to alter the look and feel of your site 251 Download at Boykma Com Add on Tools and Theming Tips sIFR sIFR Scalable Inman Flash Replacement is a technology that allows you to replace text elements on screen with Flash equivalents It is explained in depth at http wiki novemberborn net sifr3 and can be seen in action at http www dogwoodinitiative org see the portlet header elements The idea is to use fonts that are embedded within a Flash file and render those on a web page instead of standard text The process is actually quite simple but has some delicate syntax that can be a bit painful to get right It s best to follow the source code found in the official demo http dev novemberborn net sifr3 beta2 demo and to refer to the discussion forum if you have questions http discuss joyent com viewforum php id 20 Rules based theming The final chapter of this book will address specifically what rules based themi
244. in this tells us that we are working with a class based viewlet We copy this text into our theme product s browser configure zcml file located at plonetheme guria plonetheme guria browser and modify it as follows lt The search box gt lt browser viewlet name plone searchbox manager plone app layout viewlets interfaces IPortalTop class viewlets SearchBoxViewlet permission zope2 View layer interfaces IThemeSpecific gt This modified markup for the template provides a dot delimited path back to a different viewlet manager so that we can move the viewlet It looks at our theme product s viewlets py file and is specific to the current theme product Next we copy the first two lines of the code for plone searchbox from common py into our theme product s viewlets py class SearchBoxViewlet ViewletBase index ViewPageTemplateFile searchbox pt def update self super SearchBoxViewlet self update 215 Download at Boykma Com General Styling and Templating Changes context state getMultiAdapter self context self request name u plone_context_state props getToolByName self context portal properties livesearch props site properties getProperty enable livesearch False if livesearch self search_input_id searchGadget else self search input id folder context state folder self folder path join folder getPhysicalPath We then adjust t
245. in Plone although it s rarely used e After you ve finished configuring the ordering of your viewlets you should also verify that you do not see any stray viewlets when you install your theme product This may mean visiting other sites on your development instance If you do see stray viewlets this is typically related to a Plone theme bleeding into your site due to a missing IThemeSpecific designation You should double check your theme s configure zcm1 files to make sure that your theme has IThemeSpecific designated where necessary e Accessibility is also a concern and you should test enlarged and decreased fonts to make sure that the site is still readable This is a tough area especially with sites that are very delicately constructed but wherever you can support accessibility you should e Although we haven t covered this you should probably make sure that your theme product has provided an uninstall routine These are not widely documented and depending on your internal processes this may not even be needed You can find information on uninstall routines here http plone org documentation tutorial customizing main template viewlets reordering and hiding viewlets and here https weblion psu edu trac weblion wiki PloneThreeThemeUninstallProfile As you can see there are a lot of pieces involved in deploying and testing an installed theme and you should do due diligence during the go live process 278 Downloa
246. ines a background color for the wrapper element plus a width height and some padding Then we alter some of the Plone s default styling of the footer and colophon to remove background colors and borders then define widths for each of those items and position them next to each other Finally they are assigned colors and underlines for anchor tags However there is more to be done We want to customize the footer and colophon to contain some custom text Open the configure zcml file located in plone app layout at mybuildout buildout cache eggs plone app layout some version number plone app layout and search for footer and colophon The code is as follows lt Footer gt lt browser viewlet name plone footer for manager interfaces IPortalFooter template footer pt permission zope Public gt lt Colophon gt lt browser viewlet name plone colophon for manager interfaces IPortalFooter template colophon pt permission zope Public gt We copy this code into our theme product s browser configure zcml file located at plonetheme guria plonetheme guria browser and modify it as follows lt browser viewlet name plone footer manager plone app layout viewlets layer interfaces IThemeSpecific template footer pt permission zope2 View gt lt browser viewlet name plone colophon manager plone app layout viewlets layer interfaces IThemeS
247. ing a Zope 2 Product True Enter version Version 0 1 181 Download at Boykma Com Creating Installing and Tweaking our Theme Enter description One line description of the package An installable theme for Plone 3 0 Enter long description Multi line description in reST Enter author Author name Plone Collective Veda Williams Enter author email Author email product developers lists plone org email email com Enter keywords Space separated keywords tags web zope plone theme Enter url URL of homepage http svn plone org svn collective Enter license name License name GPL Enter zip safe True False if the package can be distributed as a zip file False Creating template basic namespace Creating directory plonetheme guria snip You may wish to generate a new Plone theme product yourself so that you can compare and contrast the differences between the Guria theme and a vanilla Plone theme Notice that the full name of the theme is plonetheme guria and where an item shows as blank it defaults to the example value in that step In other words the namespace package defaults to plonetheme because there was no reason to change it The skinname is set to a single lowercase word out of stylistic preference It s important to also note that you should not use hyphens or spaces in your theme names as they will not be recognized by your buildout We ve ch
248. ing the following command svn co https svn plone org svn collective plonetheme guria trunk plonetheme guria Download at Boykma Com Creating Installing and Tweaking our Theme Note the space between the words trunk and plonetheme guria This theme is intended for installation on Plone 3 web sites The finished theme should look like the following but we have work to do to make this happen SPECIAL PROJECTS Description of the site ABOUT US Facts at a Glance Mission Statement Objectives Time Line of Events Summary of Achievements Contact Us METHODOLOGY ACTIVITIES amp INTERVENTIONS NEWS UPCOMING EVENTS SPONSORSHIPS amp DONATIONS SAMPLE PORTLET DONATENOW PROGRAM ONE Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet consectetuer adipiscing elit dolore magna GET INVOLVED CONTACT US PROGRAM TWO Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet consectetuer adipiscing elit dolore magna PRESS ROOM GALLERY PROGRAM THREE Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet consectetuer adipiscing elit dolore magna Consectetuer adipiscing elit sed diam nonummy nibh Lorem Ipsum dolor sit amet
249. ing works Now let s go to the front page of your Plone site via localhost 8080 yoursite and see what happened Admire your beautiful un styled HTML page with the content from Plone inserted into it It should look something like the following The simplest possible example of xdv transforms Welcome to Plone Congratulations You have successfully installed Plone Also available in presentation mode If you re seeing this instead of the web site you were expecting the owner of this web site has just installed Plone Do not contact the Plone Team or the Plone mailing lists about this Not particularly visually exciting is it But what you have just set up is a very very powerful way to theme Plone sites that makes it possible to use any pre existing design with a Plone backend The reason this is exciting is that you re using your own HTML and CSS not modifying Plone s HTML and CSS Next let s step back a bit and explain how it all fits together How it works Let s look at a high level overview of what is going on in XDV and Deliverance The way XDV works is simple but since it might take a little tweaking to the mental model you re used to if you have done theming in Plone or other systems it s worth an explanation 290 Download at Boykma Com Chapter 15 The main difference is that you re not touching the templates and HTML from Plone itself at all Instead you create the layout and desi
250. ing your themes You should now have a basic idea of some of the tools that can be used to enhance your site and others that can help you during development We ll look next at how we can incorporate media into our theme products both on the theme side and on the end user site administrator side 256 Download at Boykma Com 15 Plone and Multimedia Now that you know how to customize the look and feel of your web site let s look at the window dressing that can really make your web site look more professional and more interactive multimedia In this chapter we will show you how to integrate tools such a Flash slideshows YouTube videos and more into your page We will also explore some Plone specific products that enhance Plone s handling of audio and video In this chapter we will not cover JavaScript or KSS a client side framework for implementing rich user interfaces with AJAX functionality but those with interest in these areas should look into some of the tutorials on plone org Flash integration Incorporating Flash in a Plone site is a not entirely a straightforward process but is actually quite simple once you know how to do it There are two options here embed Flash into your content or embed Flash into a page template Download at Boykma Com Plone and Multimedia Embedding Flash and other media in a page YouTube and other multimedia sites provide the HTML code necessary to embed a video on your own we
251. inner s Toolkit Clicking on the expand arrow next to any rule will give you more specific information about your web site such as here where we clicked on Add an Expires Header BP inspect Console HTML CSS Script DOM Net Ysiow Grade Components Statistics Tools Rutesets Ysiowtvz7 T Eat DS Printable View CP Help Grade amp Overall performance seare 79 Ruleset applied Slow V2 URL hnpe ballirarg ALL 22 FILTER RY CONTENT 6 COOKIE 2 CSS 6 IMAGES 2 JAVASCRIPT 4 SERVER 5 Make fewer HTTP requests B F Use a Content Delivery Network CON CE i TAE This page has 4 external Javascript scripts Try combining them into one F Add Expires headers This page has 3 external stylesheets Try combining them into one This page has 7 external background images Try combining them with CSS sprites A Compress components with gzip A Pur CSS ar tap Decreasing the number of components an a page reduces the number of HTTP requests required ta render the page resulting in faster page loads Some ways to reduce the number of components incude combine files combine multiple scripts into one script combine multiple CSS files into one style sheet and use CSS Sprites and image maps Put JavaScript at bottom A Avoid CSS expressions Read More N A Make JavaScript and CSS external A Reduce DNS lookups Copyright 2009 Yahoo inc All rigs reserved C Minify JavaScript and CSS A A
252. ins Open Source If you re working with an Open Source project that you would like us to publish on and subsequently pay royalties to please get in touch with us Writing for Packt We welcome all inquiries from people who are interested in authoring Book proposals should be sent to author packtpub com If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal contact us one of our commissioning editors will get in touch with you We re not just looking for published authors if you have strong technical skills but no writing experience our experienced editors can help you develop a writing career or simply get some additional reward for your expertise About Packt Publishing Packt pronounced packed published its first book Mastering phpMyAdmin for Effective MySQL Management in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today s systems applications and frameworks Our solution based books give you the knowledge and power to customize the software and technologies you re using to get the job done Packt books are more specific and less general than the IT books you have seen in the past Our unique business model allows us to bring you more focused information giving you more
253. installed You may also find this tutorial helpful http plone org documentation tutorial buildout 285 Download at Boykma Com The Future of Theming for Plone About the setup Setting up XDV takes some grunt work because it has _ some slightly unusual dependencies When this solution ships with Plone CR itself this will of course already be handled for you So bear with us GA through the install instructions and rest safe in the knowledge that this will be much easier in the future It s the price you pay for being on the forefront of technology but we can promise you that it will be worth it Platform notes As we don t know whether you ll be on Linux Mac OS X or Windows we have to assume that you know how to get to the command prompt or the terminal on your platform and know how to find your Plone instances and its associated files In the command line examples that follow we ll use the Linux and Mac OS X convention of slashes for directories and use backslash instead if you re on Windows The s marker indicates the command prompt if you re on Windows it ll be a gt instead You re not supposed to type that character it s just an indicator that there s a new command being entered With that out of the way let s get started Adding collective xdv 1 Locate the file buildout cfg in the root of your Plone instance directory on the file system and open it in a text editor Locate the
254. ions gt save Now if we go to our home page or any page and edit it we ll see the Orange Text option available in the Styles drop down list and if we add a table the Table with brown headers option will also be available The other styles that have been defined will also be exposed to our theme as children of the homeTable style but those items do not need to be added to the visual editor 235 Download at Boykma Com Custom Page Views and Sectional Styling In this way we can alter the default styling of a page s contents and create the illusion that more sophisticated code is at work Using a basic page template for a home page view Now let s look at the page template named homepage2_view pt located at mybuildout plonetheme guria plonetheme guria skins guria_templates We ll look at homepage_view pt ina bit We copied two files from mybuildout buildout cache eggs Plone some version number Products CMFPlone skins plone_templates into our theme product to create these new files document_view pt and document_view pt metadata We then renamed them as homepage2_view pt and homepage2_ view pt metadata and altered the name of the title in the metadata file default title Second Homepage View To the homepage2_view pt file we then added the following custom code directly below the plone belowcontenttitle provider lt div tal replace structure provider plone belowcontenttit
255. ip_links 0 1 hide Viewlet plone site actions 1 T 4 hide Site Map Accessibility Contact Site Setup Viewlet plone searchbox 2 T hide Search Site Search B only in current section Viewlet plone logo 3 Tt 1 hide Viewlet plone global_sections 4 T hide Home Users News Events Viewlet plone personal_bar 1 T hide amp vedaw Log out Viewlet plone app i18n locales languageselector 2 T hide Viewlet plone path_bar 3 t hide You are here Home 132 Download at Boykma Com Chapter 7 This interface can be used for quickly identifying where a viewlet is assigned and from a TTW perspective you can use the show and hide links to display or suppress certain viewlets as we ll discuss later It s cleaner to do this through the filesystem though This screen loses value as your theme is built out because your theme s rendered CSS often obscures the information you are trying to see The UI issue is likely something that will be fixed in a future version of Plone Moreover your theme product s GenericSetup may override any changes made through the web Now that we understand how viewlets are aggregated and how we can look at this aggregation through the web let s look at what we need to know in order to modify a viewlet Class based versus template bas
256. ipts work similar to CSS stylesheets with a few key differences If you add a file to the custom folder it must be of type file To add it to your registry through the web go to portal_javascripts and add it there Again you may need to enable debug mode to see your JavaScript changes Once again this is not the advisable way of adding JavaScripts and you will typically do this on the filesystem instead 109 Download at Boykma Com Making Manual TTW Changes or What Not to Do To add a JavaScript to your filesystem product add code like this to your profiles jsregistry xml file lt xml version 1 0 gt lt object name portal_ javascripts gt lt javascript cacheable True compression none cookable True enabled True expression id sifr js inline False gt lt object gt You can either add this script file to your skins plonetheme_mytheme_custom_ templates folder or you can create a folder that specifically holds JavaScripts and modify the boilerplate as needed The boilerplate code available for supporting images and stylesheets in the browser space is not provided for JavaScripts so there is no need to modify additional code Again you can start by adding JavaScript to the ZMI first or you can start by adding it to your theme product from the start It is generally easier to start with a filesystem product from the very beginning and is by far the recommended path Summary In this chap
257. irectory for example logo png can be accessed from this relative URL resource plonetheme mytheme images logo png It is best to register each of these resources separately not in a folder if you want to override them via ZCML directives The only way to override a resource in a resource directory is to override the entire directory all elements have to be copied over Instead you could simply register them like this 118 Download at Boykma Com Chapter 6 lt browser resource name myimage png image myimage png gt Notice that it is referred to as a resource and not a resourceDirectory Then you could address your image as http yoursite com resourcet myimage png Assuming this image was defined as a browser resource somewhere other than within our theme product such as in another Python package if we wanted to modify this image we could customize it for the IThemeSpecific layer With a custom image called new_myimage png in our own browser directory we would add the following in browser configure zcml lt configure xmlns http namespaces zope org zope xmlns browser http namespaces zope org browser i18n_domain example customization gt lt browser resource name myimage png image new_myimage png layer interfaces IThemeSpecific gt lt configure gt Without the layer attribute we would get a configuration conflict with the original resource myimage png defi
258. is case the product with the most precedence should be listed at the top Skin layers often get out of order when a new product is installed and as a result can cause some confusing behavior to occur so it is helpful x to monitor this area during product development and especially prior to going live with a Plone site In the next screenshot a theme product named plonetheme mytheme has been installed Observe the order of the skin layers and the new layers that display Contents Properties View Security Undo Plone Skins Tool at test site portal skins Skin selections Name Layers in order of precedence custom plonetheme_mytheme_custom_images 0 plonetheme_mytheme_custom_templa m tes My Theme plonetheme_mytheme_styles LanguageTool cmfeditions_views CMFEdgitions niaj custom LanguageTool cmfeditions_views O Plone Default Sontag kupu_plone kupu kupu_tests 4al Delete Save This theme looks first at the custom skin layer then at plonetheme_mytheme_ custom images plonetheme_mytheme_custom_templates plonetheme_mytheme_ styles and then down the list Items in the custom layer take precedence over all other resources in the skin layers below it as long as custom is at the top of the list In other words if you have a logo jpg that lives within your plonetheme_mytheme_ custom images folder and you have a different logo jpg in the custom folder the one in the custom f
259. it explains the basis of how skin layers are read For more information read the chapter on acquisition in The Zope Book found at http docs zope org zope2 zope2book source Acquisition html Using the portal_skins tool A tool called portal_skins was created to help manage the resources within Plone and to control the order of acquisition If you create a new Plone site and enter the portal_skins tool located in the ZMI just below the root and click on the Properties tab you will see a skin called Plone Default and next to it a listing of skin layers A skin often referred to as a theme is just an ordered list of skin layers Don t worry about the distinction between skins and themes there isn t much of one 95 Download at Boykma Com Making Manual TTW Changes or What Not to Do The skin layers listed on the Properties tab in the ZMI correspond to folders inside the portal_skins tool A skin s appearance depends heavily on the order in which these skin layers are listed A new Plone site with the Plone Default theme installed done automatically is illustrated next Contents Properties View Security u 9 Plone Skins Tool at testsite portal_ skins Skin selections Name Layers in order of precedence custom LanguageTool 0 cmfeditions_views O Plone Default Gases z a kupu_plone kupu bd kupu_tests A Delete Save Add a new skin Name Layers A add Default ski
260. ithout re adding it might be dangerous To add a new property enter a name type and value for the new property and click the Add button Name Type string z Value Add There s also some nice jQuery code available which means that you can write pretty simple markup and get graceful degradation for your video content 265 Download at Boykma Com Plone and Multimedia Slideshow Folder Slideshow Folder provides a simple elegant animated slideshow for Plone It can be downloaded from http plone org products slideshowfolder Written by Jon Baldivieso David Glick and Johnpaul Burbank it gives integrators an easy to use slideshow tool Sample Slideshow Email this page Print this Slideshow Folder integrates the Slideshow 2 JavaScript class into Plone and is a powerful feature rich and easy to customize slideshow library Slideshow Folder offers the following features e Animated slideshows with configurable transitions e Navigation thumbnails e Image captions e Intelligent preloading of images to save bandwidth 266 Download at Boykma Com Chapter 13 e Aplay pause forward reverse slideshow controller e Looping and random order slideshows e Optional support for lightbox style image pop ups e Look and feel completely customizable via CSS Once installed each folder and collection in your site will have a new option in its Actions drop down menu simply
261. ition not blazing hot gt We ll stay home lt p gt lt div gt Hence the statement resolves to We ll go swimming In the following variation the tal define statement has set the variable to evaluate to nothing lt div tal define blazing hot nothing gt lt p tal condition blazing hot sWe ll go swimming lt p gt lt p tal condition not blazing_hot gt We ll stay home lt p gt lt div gt In TALES nothing is a reserved word for null which is always false It s the same as None in Python 167 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language How this works in Plone An easy example of how a conditional works in Plone is in path bar pt located in plone app viewlets lt span tal condition view breadcrumbs class breadcrumbSeparator gt lt tal ltr condition not view is_rtl gt amp rarr lt tal ltr gt lt tal rtl condition view is rtl gt amp raquo lt tal rtl gt lt span gt This conditional states that depending on if you are reading right to left or left to right you will get a different type of arrow indicator Another example of how a conditional might be used in Plone is in site_actions pt which is also found in plone app layout This page template has a condition that states that if any site actions defined in portal actions through the ZMI are visible it will render them in an unordered list and assign attributes id i18n hooks
262. iv id portal header gt lt div tal replace structure provider plone portalheader gt lt div gt 141 Download at Boykma Com Customizing Viewlets and Portlets We have not moved or reordered this viewlet so there is no need to touch our theme product s viewlets xml file If you restart your Zope instance the viewlet should now show the title of your web site in the portal header area Next we look at how to modify a class based viewlet technically a viewlet that derives from a subclass located in plone app layout Overriding a non template based viewlet Modifying viewlets that use a derived class involves some extra manipulation of code because here we are also looking at how we might modify the behavior of a viewlet as defined in its derived Python class In this section we ll look at modifying the breadcrumbs so that they use a different divider between the crumbs If we open the configure zcml file in yourbuildout buildout cache eggs plone app layout plone app layout viewlets you can see the following code lt The breadcrumbs gt lt browser viewlet name plone path_bar manager interfaces IPortalTop class common PathBarViewlet permission zope2 View gt The class declaration here is what tells us that we are working with a template that is defined within a class We want to copy paste this code into our theme product s configure zcml file located at plonetheme yourtheme p
263. k on the border from Firefox double click it ok gt cancel Make sure the theme s a Decide what kind of workflow you want in your site The default is a website centric workflow if you want to use Plone as a closed intranet ly Just that easily you too can embed multimedia into your pages and you can disregard the warning at the bottom of the dialog box Security Considerations al There is a reason why object and embed tags are marked by default as nasty They may be used to launch attacks on other users in particular Q other users that may be logged in and have privileges on your site If you have untrusted users adding or editing content on your site you should probably not allow their use In the future it is hoped that transforms will be put into place which will mean that you do not need to manipulate the visual editor or HTML filter settings in order to insert multimedia the work is being done in this area 261 Download at Boykma Com Plone and Multimedia Embedding Flash in a page template The second and more programmatic way to build media into your web site is to embed it in a page template This is generally reserved for situations where the media is an integral part of the design for example a block of Flash that might be embedded into the header of your web site s home page or cases where security concerns prevent turning off safe html filte
264. ks but we re not going to go in too deep here 237 Download at Boykma Com Custom Page Views and Sectional Styling Like the view described above we copied CMFPlone s default document view pt and document_view pt metadata into our theme product s skins guria_ templates folder renamed them to homepage _view pt and homepage view pt metadata and altered the metadata file to read as follows default title Homepage View Next let s look at some of the code the homepage view pt contains This page template contains a table with three columns each of which is populated with the contents of a page and an image that is pulled in from a specific location Let s look at part of the first column s XHTML lt td id home cell one tal define items hp view getSlotliItems tal condition items gt lt div class cell wrapper gt lt th class hiddenStructure gt Column One lt th gt lt span class coll1 gt lt span gt lt img tal define img hp view getSlotiImage tal condition img tal attributes sre img class slotlimage height 68 width 167 gt lt div class folder listing tal repeat item items gt We see code like items hp_view getSlot1iItems This implies that there is a view somewhere that has a function named get SlotiiItems If we look closer at interfaces py located at mybuildout plonetheme guria plonetheme guria browser interfaces py we see that the following code matches up to what
265. ks uppercase navTreeItem padding 0 margin 0 navTreelItem a dd portletItem navTreeItem a border width 0px 0px 1px 0px border bottom 1px solid bbaf98 padding top 0 25em padding bottom 0 25em color fff6ab important text transform uppercase For the hover states we want the links to turn white We also have to remove borders around the hyperlinks as Plone applies these by default If you see your text jumping around when you drag mouse over it and you can t figure out where that jumping is coming from it s usually related to borders that are the same color as the background color navTreeItem a hover dd portletItem navTreeItem a hover background color transparent color fff important border width 0px 0px 1px 0px border bottom 1px solid bbaf98 Next we look at the currently selected item styling We don t want a background color so we remove that We again remove the borders that are given to us by base Plone and we want the hyperlinks to be white li navTreeItem a navTreeCurrentItem background color transparent border width 0px 0px 1px 0px important 230 Download at Boykma Com Chapter 10 border bottom 1px solid bbaf98 important color fff important 5 Finally we look at the sub navigation and make those items uppercase ul navTree navTreeLevell a text transform uppercase important Looking at the navtree css file provided by
266. late pt will replace the entire lt div gt with the rendered contents of the viewlets that are specified in the setup profile for plone portaltop specifically lt order manager plone portaltop skinname Plone Default gt lt viewlet name plone header gt lt viewlet name plone personal bar gt lt viewlet name plone app il8n locales languageselector gt lt viewlet name plone path bar gt lt order gt The tal replace expression is used because we don t have a need to retain the lt div gt wrapper in order to see the output of these viewlets 172 Download at Boykma Com Chapter 8 tal omit tag statement To leave the contents of a tag in place while omitting the surrounding start and end tag we can use the omit tag statement If its expression evaluates to a false value then normal processing of the element continues If the expression evaluates to a true value or there is no expression the statement tag is replaced with its contents For these purposes the value nothing is false which has the same effect as returning a false value For example lt b tal omit tag python True gt Omit expression is True lt b gt lt b tal omit tag python False gt Omit expression is False lt b gt lt b tal omit tag gt Omit expression is BLANK lt b gt The first line of code would render the first statement without bold tags the second would render with bold tags and the third would render with
267. le View Edit Sharing Size 86 5 AS sub types w Actions v Display v May 2009 Mo Tu We Th Fr Sa Su inte ETET 121 45678 4 0 P4A Video Example a gt 3 14 12 13 14 15 16 17 by yegave last modified May 28 2009 09 33 PM Here is a short description 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Manann sich Manasa paies File type Hash FLV video x thh Height 288 pixels Width 360 pacels Duration 6 0 barsandtone flv Fash Video 8 amp b 268 Download at Boykma Com Chapter 13 If you edit a video file that has been uploaded to your site you will see that there are additional fields available to you than you would normally see You can add formatted text and a thumbnail image that people can see when the video is not playing SiteMap Accessibility Contact Site Setup Search Site Search as FT only in current section Home Users News Events P4A Video Example amp vedaw Logout You are here Home gt P4A Video Example View Ed i May 2009 m i Mo Tu We Th Fr Sa Su Edit Video Data Title se t r 45678910 P4A Video Example 11 12 13 14 15 16 17 Description 18 19 20 21 22 23 24 Here is a short description 25 26 27 28 29 30 31 Manage portlets Rich Text Description m Normal paragraph z File Keep existing file barsandtone fiv Repla
268. le gt lt insert some custom code here to pull in the contents of some pages gt lt the pages must be have shortnames of ricil and ric2 gt lt tbody gt lt table id homepage table gt lt tr gt lt td tal define rlcl nocall portal homesection rici tal on error nothing gt lt th tal content structure ricl Title gt Column One Change this in homepage2_view lt th gt lt div tal replace structure ricl getText gt lt td gt lt td tal define rlc2 nocall portal homesection ric2 tal on error nothing gt lt th tal content structure ric2 Title gt Column Two Change this in homepage2_view lt th gt lt div tal replace structure ric2 getText gt lt td gt lt tr gt lt table gt lt tbody gt lt end custom code gt 236 Download at Boykma Com Chapter 11 All this code does is pull in the contents of two pages named ric1 symbolizing row 1 column 1 and ric2 row 1 column 2 These two page objects need to be created in a folder on your Plone site named homesection If an object is not found an error will not be raised In this way we can do some light customizations to a page to adjust the layout Additional rows and columns could be added with distinct styles Just make sure that their shortnames correspond accordingly To use this template 1 We need to go into the ZMI to portal_types Document Page and add homepage2_view as an available view method fo
269. lesheet logoName string logo jpg Clearly this is a pretty indirect way of rendering a logo The purpose of all this indirection is to make it possible for you to change the logo graphic via a property sheet In later chapters we ll look at other options available to you to customize your logo For now just understand that the Python class that controls the logo is what tells the logo pt page template what object to render and that we are using TAL to pull in that object Since the logo isn t necessarily the easiest place to start in terms of understanding TAL constructs let s look at some of the more basic ways in which TAL might be used About the Template Attribute Language TAL is a concise language and is not hard to follow once you understand the basic statements and what they do e tal attributes dynamically change element attributes e tal define define variables e tal condition test conditions e tal content replace the content of an element 164 Download at Boykma Com Chapter 8 e tal repeat iterate over a sequence e tal replace replace the content of an element and remove the element leaving the content e tal omit tag the same as tal content but also removes the wrapping tag on which the statement is applied e tal on error handle errors We will walk through these expressions in greater detail and also look at how the structure expression syntax TALES can be used
270. lhost 8080 reload and choosing the Reload Code and ZCML option A third egg that helps to developers by consolidating the buildout tree structure and thus making code easier to locate is omelette http pypi python org pypi collective recipe omelette Follow the ReadMe files for these eggs to understand how to install them Starting Zope and installing your product on a Plone site After running your buildout start your Zope in the foreground extremely helpful during development as it displays errors in your terminal window All the installer buildouts will start with bin plonect1 start It bin plonect1 fg will run a standalone install in foreground which is useful for debugging Type bin plonectl fg 70 Download at Boykma Com Chapter 4 You ll know your Zope is working when you see the phrase INFO Zope Ready to handle requests Once Zope is up and running you can connect to its management interface from any web browser We ll assume in this chapter that Zope is running on port 8080 which is the default In your browser go to http localhost 8080 manage_ main and log in using admin admin as your username and password Optionally at this point you can create a new user in the acl_users area of the ZMI Zope Management Interface create a secure password for that username and assign manager permissions Creating a Plone site As of Version 3 2 all the installers will create a Plone site by de
271. like this 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 globalBorderColor string 8cacbb globalBackgroundColor string dee7ec globalFontColor string 436976 snip 99 Download at Boykma Com Making Manual TTW Changes or What Not to Do The goal of this file is to provide default settings that can then be accessed by stylesheets at large by using variables For example the public css stylesheet contains certain declarations such as documentContent p a visited color amp dtml linkVisitedColor background color transparent This means that the color of the anchor tag within the paragraph after being visited will correspond to the amp dtml linkVisitedColor value defined in the base properties file Properties are inserted using an HTML named entity format that you ve seen before in code such as the amp nbsp specification for a non breaking space The dtml part means that such attributes are to be expanded by the DTML Dynamic Template Markup Language engine The base_properties are enabled in two ways First the stylesheet you
272. load at Boykma Com Add on Tools and Theming Tips You will need a couple of instances set up with the desired operating system installed Each instance could have a different version of Internet Explorer installed and at this point in time IE6 IE7 and IE8 are the recommended versions to install For IE6 and IE7 you should also install the IE Developer Toolbar which can be found at Microsoft com For IE8 the toolbar is built in Of course for Firefox you should install Firebug get irebug com and the Web Developer Toolbar https addons mozilla org en US firefox addon 60 Some minor differences exist between Mac and PC users versions of Firefox 3 and it s still a good idea to test against Firefox 2 so you may want to install different versions of Firefox as well Rather than creating new instances for Firefox 2 and 3 it s easier just to piggyback them on top of the existing Internet Explorer instances You can then tweak your CSS until it works well on Firefox 2 and 3 then Safari then any other browsers you want to support The only downside of using virtual machines is that they can be resource hogs but they are essential to doing proper testing Summary In this chapter we have learned about e Popular add on Plone products for changing your site s look and feel e Possible options for sub site theming e Non Plone products that can be used to alter your site s look and feel e Tools that can be helpful when debugg
273. lonetheme yourtheme browser configure zcml and modify it as follows lt The breadcrumbs gt lt browser viewlet name plone path_bar manager plone app layout viewlets interfaces IPortalTop class viewlets PathBarViewlet layer interfaces IThemeSpecific permission zope2 View gt Optionally you could name your viewlet something like name mytheme path_ bar 142 Download at Boykma Com Chapter 7 This can often help if you know that you will have project managers or other administrative types modifying viewlets through portal_view_customizations in the ZMI as it makes it easy to spot the viewlet but it s also a good thing to do because once you ve modified it it s no longer the original plone whatever viewlet Changing the name means that you will have to perform an extra step which we will cover at the end of this section For the purposes of this example we will change the name of the viewlet to mytheme path_bar Notice that in the above code we provided a dot delimited path back to the original viewlet manager s interface Also we specify the IThemeSpecific layer in order to keep our changes from affecting any other themes on our Zope instance Most importantly we change the class declaration to reference the viewlets py file located in our theme product at plonetheme yourtheme plonetheme yourtheme browser viewlets py Before we subclass our viewlet let s make a small change to the p
274. look at a default Plone site s portal_css registry you can see some of the more important features CSS Registry Merged CSS Composition Undo Ownership Interfaces Security Stylesheets Registry at testing portal css O Debug development mode In debug development mode stylesheets are not merged to composites and caching and compression of css is disabled The registry also sends http headers to prevent browsers from caching the stylesheets Recommended during css related development Remember to turn it off again as the debugmode affects performance O Automatic grouping mode In automatic grouping mode resources are first ordered into mergeable groups based on their settings and after that merged based on their position in the registry Save The order of the stylesheets in this form is the same as the order in the header of the resulting HTML code Use the up down arrows to change the rendering order Ms member css Pix Title CSS Media screen Condition not portal portal_membe rel stylesheet Merging allowed Render type import i Caching allowed M Compression type safe FH HF RTLcss ELR Title CSS Media screen Condition python portal restrictedT rel stylesheet Merging allowed 4 Render type import E Caching allowed Mi Compression type safe W rr EH base css Tix Title CSS Media screen Condition rel stylesheet Merging allowed 4 Render type import i Caching allowed 4 Compression
275. lt object gt When we install our theme product this CMF action category should automatically be created as well as a sample action that will render Register the viewlet in your theme product In your theme product s configure zcml file located at mybuildout source plonetheme test plonetheme test browser configure zcml we need to add a few lines so that our viewlet is registered with Zope lt Browser views gt lt browser page for We name audiencenavigation class audiences AudienceViewlet 125 Download at Boykma Com Working with Zope 3 Components template audiences pt layer interfaces IThemeSpecific permission zope2 View gt Then restart Zope so that it can read those lines of code bin instance fg Enable the browser page Finally to expose the viewlet to your Plone site you should install the theme product You can then call your view and see the sample action rendered in your web browser by going to the URL http localhost 8080 myplonesite audiencenavigation or http localhost 8080 myplonesite audiencenavigation Presto We now have a custom browser page that outputs the contents of our new CMF action category D 2 tt hup locathost 808 1 audiences2 0test audiencenavigation v le IG Google Q x Getting Started Latest Headlines bg G Recently Bookmarked v Disable v Cookies J CSS Forms E Images In
276. lt a href http akcenter org climate energy title sClimate and Energy lt a gt lt td gt lt td id portaltab wildlands and rivers table class plain gt lt a href http akcenter org wildland rivers title sWildland and Rivers lt a gt lt td gt lt td id portaltab oceans and marine life table class plain gt lt a href http akcenter org oceans marine title sOceans and Marine Life lt a gt lt td gt lt tr gt lt table gt lt div gt As you can see it s rendered as a series of lt td gt lt td gt tags with unique IDs that can be styled using CSS Notice that the Climate and Energy tab is marked as selected as it is the tab we are currently on That class allows us to style that tab differently if desired We often use tal repeat for generating unordered or ordered lists but certainly it could be used in other scenarios It s not uncommon to see it used in conjunction with built in methods to specify odd even start and end states to aid in styling Did you notice the lt tal tabs gt lt tal tabs gt tag in the example above When you use a lt tal block gt or lt tal anything gt tag the tag itself along with the closing tag will be completely removed in the output You may use this type of construct for defines and repeats if it clarifies your code as explained earlier 171 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Lang
277. ly designed for a 600x800 aspect ratio appropriate for web sites in countries where viewers may not have newer monitors If you want to add right hand portlets you might want to consider increasing the width of the visual portal wrapper the header image and the images that will appear in the center of the page f We now have some basic styling in place and it s time to move onto the other visual elements on the page Changing the logo One of the most common tasks users want to accomplish is changing the logo on their site In this case we want to alter the logo image and also add the description of our site to the viewlet First to alter the logo image I took the simplest approach and modified base_ properties props to look for a file named logo gif located at mybuildout plonetheme guria plonetheme guria skins guria_images If the image exists we re good to go 201 Download at Boykma Com General Styling and Templating Changes However it s worth knowing how the logo machinery works because it can be a bit intimidating If we look at the viewlet s class that renders the logo located in mybuildout buildout cache eggs plone app layout some version number plone app layout common py it reads as follows class LogoViewlet ViewletBase index ViewPageTemplateFile logo pt def update self super LogoViewlet self update self navigation_root_url self portal_state navigation_ root_url
278. me img gt Since there is no id directly on this image we just drop any lt img gt inside the user name id That s actually everything you need to know now the next steps are up to you 295 Download at Boykma Com The Future of Theming for Plone Summary You now have a new way to make themes for Plone where do you go from here The best way to learn is by doing so your next step should be to take one of your existing designs and map Plone into it If you don t have any themes yourself a great site for free designs is oswd org Open Source Web Design Here are some great themes you can download to get you started Invention http www oswd org design preview id 3293 Bitter Sweet http www oswd org design preview id 3569 Nonzero http www oswd org design preview id 3560 Transparentia http www oswd org design preview id 3515 Remember that if any of these themes are missing ids for easy mapping in the rule file just add them in the HTML Have fun with your new found theming superpowers 296 Download at Boykma Com Symbols lt append gt rule about 294 Real world examples 294 lt copy gt rule 295 lt drop gt rule about 295 Real world example 295 lt prepend gt rule about 294 Real world examples 294 lt replace gt rule about 293 Real world examples 293 A add on Plone products about 245 Collage 246 collection portlet 250 collective skinny 249
279. me page of your site and refresh the page you should see the background color of the home page changes to black Navigating elsewhere in the site will set the background color back to white If you do not see your changes remember to turn on debug mode in portal css You wouldn t ordinarily add a stylesheet through the web but clearly it is possible The corollary to doing this is to create a stylesheet in your filesystem product which we ll do next Creating a theme specific stylesheet in your filesystem product Since the plone3_theme recipe does not generate a stylesheet for your skins plonetheme_mytheme_custom_styles folder you should create one in that location and enable DTML support as indicated by the previous code You should also name your stylesheet in a meaningful way that is mytheme css dtm1 It helps to name your CSS after your theme product or client name to avoid confusion Next open your profiles cssregistry xml file We will add support for this new file by including the following code lt xml version 1 0 gt lt object name portal_css gt lt stylesheet title id mytheme css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt lt object gt 108 Download at Boykma Com Chapter 5 Notice the enabled flag here and also notice that it s not necessary to include the dtml indication in the id field e
280. me users news events viewlet plone personal_bar 1 FE ibe amp vedaw log out viewlet plone app i18n locales languageselector 2 FE he viewlet plone path_bar 3 veg L stow You Are Here Home viewlet plone searchbox 4 Io Search Site 192 Download at Boykma Com Chapter 9 This should move the searchbox into the proper location Next we want to add five new folders To do so use the Add menu located on the home page and choose the Folder option You should create some sub navigation items pages or folders are easiest for at least one of these sections to see the styling of sub navigation items Make sure you publish each of these items ST gt amp vedaw log out SITE MAP ACCESSIBILITY CONTACT SITE SETUP Ed jas d a A rules EEF history display add new state published w i co ector Welcome to Plone Ej event venei by vedaw last modified Jan 24 2009 05 13 PM D file ak 232 4 Congratulations You have successfully installed Plon folder s eo Fy a es 10 TN v p ARER Also available in presentation mode eae 5 14515167 ny ex link E 0 21 3 EEN ys 21 22 23 EJ news item SEE JESSE a B page d this Print this 26 27 28 29 3 Manage portlets snipped content for screenshot History Springfield OR 12345 powered by Plone Copyright
281. ment Python 2 4 Plone depends on Python 2 4 x Other versions are not compatible More recent Plone installers include the correct version of Plone by default Using the wrong version of Python is one of the more common mistakes made by new themers especially in the case of Macintosh users as OS X provides Python 2 5 as the system Python PIL Python Imaging Library PIL can be downloaded from PythonWare s sites http www pythonware com products pil The most recent version should be compatible Plone gives us this for free Wget GNU Wget is a free software package for retrieving files using HTTP HTTPS and FTP the most widely used Internet protocols For the next step you ll need to download Wget here http www gnu org prep ftp html easy_install To install ZopeSkel you first need to have easy install on your system If you don t download and run ez_setup py http peak telecommunity com dist ez_setup py for example wget peak telecommunity com dist ez setup py python ez setup py ZopeSkel To install the ZopeSkel egg and its dependencies including PasteScript run easy_install U ZopeSkel This will install the paster command in the place where your Python binaries go Keep an eye on the output of easy install if you can t find it afterwards If it s not in your PATH you may want to symlink it in there Buildout The Plone filestructure Now what you ask Assuming you ve installed Plone
282. mply install this product make sure your site s portal_css is in debug mode and test the following code portal column one float right portal column two float left If you re able to switch the position of these two columns the product works and you can style in full tableless mode There are a few issues with Plone and tableless layouts that are unrelated to this product but in general it works As of this writing the product was not tested against some of the newer browsers It can be downloaded here http plone org products plone tableless CSSManager End users often want to have some control over basic modifications to their site background color link colors and so on The WebLion Group from Penn State University created CSSManager a product that gives a simple through the web interface to let users change the colors borders site logo and other visual characteristics of their Plone site Essentially it uses the DTML variables defined in the base _properties props file available within Plone The product can be downloaded here http plone org products cssmanager To use it install the product go to your site s Site Setup area and find the configlet for this tool and try changing a few options 247 Download at Boykma Com Add on Tools and Theming Tips The CSSManager tool will supersede a theme product s base_properties if the CSSManager skin layer is above the theme product s skin l
283. n Plone bem 1 REQUEST variable name pione_skin Skin flexibility Allow arbitrary skins to be selected Skin Cookie persistence Make skin cookie persist indefinitely Save Plone uses something similar to acquisition to look through this list of skin layers giving precedence to the skin layers at the top of a list If Plone requests a resource such as logo jpg it will look for it in skin layers starting at the top of the list and going down until it finds one In this example it will start with the custom skin layer then move to LanguageTool cmfeditions_views and so on The Find tab in this section provides an opportunity to search for a resource within a selected skin if desired Notice that there is a drop down list below the skin layers called Default skin This area allows you to switch to a different theme product When a you install your theme it becomes the default theme GA A first rule of thumb is if your site is ever not finding a resource that you re expecting to see confirm that the layer it is contained within is found in the above list 96 Download at Boykma Com Chapter 5 The custom skin layer should always appear at the top of the list of skin layers generally followed by skin layers for a theme or product s images stylesheets and templates This configuration might change in the event that you have a product installed that you want to override the installed products beneath it in th
284. n build and manage content rich websites using Plone Plone 3 Extend Plone s skins and content types 4 Customize secure and optimize Plone websites J Cameron Cooper Expert Python Programming ISBN 978 1 847194 94 7 Paperback 372 pages Best practices for designing coding and distributing your Python software 1 Learn Python development best practices from an expert with detailed coverage of naming and coding conventions Expert Python Programming 2 Apply object oriented principles design patterns and advanced syntax tricks 3 Manage your code with distributed version control 4 Profile and optimize your code 5 Proactive test driven development and continuous integration Please check www PacktPub com for information on our titles Download at Boykma Com
285. n from the drop down menu Note that you should not delete any of the categories or the actions g ara GA It is safer to simply mark the actions as not visible by un checking the Visible checkbox Document actions category Default document actions include e rss displays an RSS button with a link to the aggregated page e sendto displays an email button with the logic needed to email the link of the page to a specified email address e print adds a print button and the logic needed to print the page e addtofavorites flags an item as a favorite This option only appears and works if you have user folders enabled in the security control panel actual support for this feature is unknown 83 Download at Boykma Com Making Manual TTW Changes or What Not to Do e full screen expands the content area to take up the full screen e extedit enables external editing if an editor is specified Only the first three are visible by default Display Y Add new State Published September 2008 Mo Tu We Th Fr Sa Su a 2 i 4 amp amp 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Manage portlets t Send this Print this Site actions category Within the site_actions category you will find the menu options that correspond to the top navigation on a default Plone installation By default these include Site
286. n instance via IThemeSpecific declarations If not for browser layer support a logo image that is registered as a browser resource might show up for all of the sites on a given Zope instance which would be a bad thing Using images as browser resources For the purposes of most themes images will not be browser resources but instead will be used as standard skin layer components as described previously However we will cover this in the interest of explaining that it is possible to expose images to the browser layer if desired Zope 3 allows browser resources notably images and stylesheets to be registered under a special namespace For example if you register an image resource in your browser folder with the name myimage gif the browser resource would be addressable as http yoursite com resource myimage gif This serves to get the resource out of the flat global namespace Like all Zope 3 browser components browser resources are registered with a ZCML directive in the browser namespace that among other things takes a layer attribute The layer should resolve to an interface The browser images folder is a Zope 3 resource directory acting as a repository for images and its declaration is located in browser configure zcml cfg lt Resource directory for images gt lt browser resourceDirectory name plonetheme mytheme images directory images layer interfaces IThemeSpecific gt An image placed in this d
287. n manager plone portalheader skinname Guria Theme for the Plone Theming Book gt 220 Download at Boykma Com Chapter 10 lt viewlet name plone searchbox gt lt viewlet name plone global sections gt lt hidden gt lt object gt Again this change would require importing the viewlets GenericSetup step via portal setup Moving and styling the breadcrumbs Next let s look at the breadcrumbs By default Plone displays the breadcrumbs above the three columns that comprise the left right and middle content areas In our case we want to move these breadcrumbs directly above the center content above the tabs available for logged in and permissioned users for managing content Contents Edit and so on We know that we need to move the viewlet in our viewlets xml file lt xml version 1 0 gt lt object gt lt order manager plone contentviews skinname Guria Theme for the Plone Theming Book based on Plone Default gt lt viewlet name plone path bar gt lt order gt lt hidden manager plone portaltop skinname Guria Theme for the Plone Theming Book gt lt viewlet name plone path bar gt lt hidden gt lt object gt The viewlet manager known as plone contentviews displays directly above the center content We can use manage viewlets to verify this if necessary http localhost 8080 mysite manage viewlets Next we need to see if we are dealing with a cla
288. navigation tree This is affected by the Start level setting FT Only show the contents of the current folder If selected the navigation tree will only show the current folder and its children at all times Start level An integer value that specifies the number of folder levels below the site root that must be exceeded before the navigation tree will display 0 means that the navigation tree should be displayed everywhere including pages in the root of the site 1 means the tree only shows up inside folders located in the root and downwards never showing at the top level ol Navigation tree depth How many folders should be included before the navigation tree stops 0 means no limit 1 only includes the root folder 0 gt save gt cancel 194 Download at Boykma Com Chapter 9 Give the portlet a name and set the start level to 0 This will allow the navigation portlet to show on the home page Choose Save and then on the main manage portlets screen we want to remove the right hand portlets As you can see these include review List News Events and calendar Search Site Fd CONTACT SITESETUP Description of the site BE amp vedaw logout You Are Here Home e Manage portlets for Guria Test Site Portlets assigned here Add portlet Add portlet z The portlet columns will now display only those portlets explicitly assigned in this context Use th
289. nd Plone themes development Originally working as a freelancer in Ukraine Denys has established one of the first Plone 3 projects in the world Web Couturier some days before the official release of Plone 3 The project doesn t exist in its original form any more but has provided some previously commercial packages as open source products for the Plone Collective In 2008 Denys moved to Norway to work with one of the leading Plone consulting companies Jarn ex Plone Solutions Steve McMahon is a Plone developer based in Davis California He s the creator of PloneFormGen and is currently the maintainer for PloneHelpCenter and Plone s Unified Installer and the OS X Installer He s serving his second term on the Plone Foundation Board of Directors Steve is a partner in Reid McMahon LLC a Plone consultancy specializing in non profits He is one of the many authors of Practical Plone 3 http www packtpub com practical plone 3 beginners guide to building powerful websites book Download at Boykma Com Download at Boykma Com Table of Contents Preface 1 Chapter 1 Theming Plone 3 An Overview 7 Background 7 What is Plone really 9 Technical overview 11 Books about Plone 11 Theming and other CMS frameworks 12 The evolution of skinning for Plone 14 Summary 16 Chapter 2 Skinner s Toolkit 17 Graphic design tools 17 Adobe Photoshop 18 Adobe Fireworks 20 GIMP 21 Browser add ons and important notes 21 Internet Explor
290. nd Portlets lt p gt lt div metal use macro here global_siteactions macros site_actions gt Site wide actions Contact Sitemap Help Style Switcher etc lt div gt lt div metal use macro here global_searchbox macros quick search gt The quicksearch box normally placed at the top right lt div gt lt a metal use macro here global_logo macros portal_logo gt The portal logo linked to the portal root lt a gt lt div metal use macro here global_skinswitcher macros skin_tabs gt The skin switcher tabs Based on which role you have you get a selection of skins that you can switch between lt div gt lt div metal use macro here global_sections macros portal_tabs gt The global sections tabs Welcome News etc lt div gt lt div gt lt div metal use macro here global_personalbar macros personal_bar gt The personal bar log in logout etc lt div gt lt div metal use macro here global_pathbar macros path_bar gt The breadcrumb navigation you are here lt div gt lt div gt In Plone 3 if you look at the main_template pt found in your buildout s buildout cache eggs Plone version egg Products CMFPlone skins plone_templates folder you will see that the code that controls the portal header mentioned above has now been rewritten to be much slimmer lt div id portal top i18n domain plone gt lt div tal replace structure provider plone portaltop gt lt div gt T
291. nd how to tie them together and that will come after this introduction to the general concepts As part of this chapter we ll cover how images stylesheets and templates can be exposed as Zope 3 browser resources instead of being used as old school skin layers as discussed in the previous chapter We ll also cover some of the jargon y terms that you ll need to know about but not understand in depth About the architecture Prior to Plone 2 5 Plone was built on top of the powerful but relatively inflexible Zope 2 architecture As Plone evolved more flexible Zope 3 technologies became necessary but a full transition was impractical In order to remain compatible with earlier versions of Plone and provide a migration path it was important to provide a bridge between these two versions You might have heard the name Five which is a product that helped bridge the gap between Zope 2 and Zope 3 2 3 5 by backporting Zope 3 capabilities to Zope 2 Five is now baked into Plone and is the basis of the Plone 3 architecture What this means is that Plone runs on Zope 2 but uses some of the features provided by Zope 3 and thus is not a pure Zope 3 implementation Download at Boykma Com Working with Zope 3 Components Zope 2 plus CMF the Content Management Framework is best described as a framework that uses skin layers and acquisition to produce results If you know some of the concepts of object oriented programming you might thi
292. ne myvariable string hello world gt This text is just a placeholder lt p gt We re not doing anything with myvariable but note that it is only in scope within the lt p gt lt p gt tags Compare this to the following tal define expressions lt p tal define myvariable string hello gt This text is just a placeholder lt p gt lt p tal attributes class myvariable gt We want this to show up Will it lt p gt In this second example it is not possible to assign the class named myvariable to myvariable defined in the first lt p gt lt p gt tag as myvariable is only within scope in the first paragraph unless it is defined elsewhere in the XHTML tree hierarchy An error would occur in this case How this works in Plone If you are going to use tal define you need to make sure you use it in your page template in a way that respects the scope of a defined variable For example the following is a sample testimonial portlet that defines a variable named source at the top that can be used throughout the entire page template if desired lt dl class portlet portletTestimonial i118n domain plone tal define source view getSource gt lt dt class portletHeader gt lt span class portletTopLeft gt lt span class portletTopRight gt lt dt gt lt dd class portletItem gt lt span tal replace source getText gt Text lt span gt Testimonial Body lt tal body gt lt dd gt lt dl gt
293. ng and Tweaking our Theme Let s select the extension profile named Guria Theme for the Plone Theming Book and click the Install button At this point we should also put our site s portal_css in debug mode so that we can see any CSS changes instantly You should not leave a production site in debug mode as it can negatively impact performance You can reach the portal_css area at http localhost 8080 mysite portal_css manage_cssForm Simply select the Debug development mode checkbox and press Save The Save button may appear at the bottom of the page CSS Registry Merged CSS Composition Undo Ownership Interfaces Security 3 Stylesheets Registry at mysite portal css Debug development mode In debug development mode stylesheets are not merged to composites and caching and compression of css is disabled The registry also sends http headers to prevent browsers from caching the stylesheets Recommended during css related development Remember to turn it off again as the debugmode affects performance FT Automatic grouping mode In automatic grouping mode resources are first ordered into mergeable groups based on their settings and after that merged based on their position in the registry Save The order of the stylesheets in this form is the same as the order in the header of the resulting HTML code Use the up down arrows to change the rendering order I memeress 1 YX Merging allowed 7 Caching allowed
294. ng 229 231 personal bar adjusting 219 portal actions customizing 207 213 searchbox moving 218 219 searchbox display adjusting 214 218 top navigation suppressing 220 page templates 113 paster 53 paster templates 63 PasteScript 53 Pdb features 255 Plone about 7 advantages 8 300 Download at Boykma Com background 7 8 books 11 browser add ons 21 buildout 49 development environment setting up 54 downloading 56 features 7 10 graphic design tools 17 installing 56 new stylesheets adding 106 107 overview 9 skinning evolution 14 technical overview 11 text editors 39 themes 12 theming 12 validation tools 38 Plone downloading Macintosh dependencies for Unified Installer 56 operating system agnostic dependencies 57 Windows dependencies for Unified Installer 57 Plone 3 portlets modifying in theme product 148 149 Plone add ons about 264 collective flowplayer 264 P4ArtistsAudio 271 P4Artists Video 268 Plumi 272 slideshow folder 266 Plone architecture about 111 Zope 2 components 112 Zope 3 components 112 Plone development terminology 50 Plone development environment See development environment Plone site Flash integrating with 257 multimedia code inserting 263 testing against browsers 242 Plone theme about 179 181 default home page display changing 233 deploying for public use 279 deploying on server 273 Internet Explorer fixes applying 242 page sections modifying 197 sectional
295. ng Viewlets and Portlets There are several key differences between portlets and viewlets With portlets a portlet is always registered in ZCML with renderer declaration pointing at a renderer Class That class has a render method in Python that returns the HTML for the portlet Frequently this is just a ViewPageTemplateFile that parses a template from the filesystem For example the default News portlet is described in a package commonly known as plone app portlets and found in yourbuildout buildout cache eggs plone app portlets plone app portlets portlets configure zcml as follows lt plone portlet name portlets News interface news INewsPortlet assignment news Assignment renderer news Renderer addview news AddForm editview news EditForm gt In addition to a renderer class add and edit declarations GA are also specified to support the portlet manager s portlet add configure functionality The renderer class code returns the output that comes from news pt also located in yourbuildout buildout cache eggs plone app portlets plone app portlets portlets configure zcml We can verify that it uses news pt if we look at the news py file located in this folder class Renderer base Renderer _template ViewPageTemplateFile news pt As you can see in Plone 3 more than one file is involved in the rendering of a portlet Usually it s just a matter of walking around the plone app portlets tree to find
296. ng is but what you need to know here is that some flavor of Deliverance or collective xdv will be the de facto standard for theming in the future In fact it even works now with some effort and understanding Plone org was even redesigned using collective xdv with obvious success Basically rules based theming reduces the process of theming to mere CSS no fancy viewlet work no understanding of Zope 2 versus Zope 3 technologies CMF and so on It may introduce more complexity in other ways themers will need to learn XSLT for instance but that remains to be seen Best of all It s not just for Plone It s available to any technologies that use WSGI Web Server Gateway Interface or have an XSLT processor available WSGI is a specification for web servers and application servers to communicate with web applications though it can also be used for more than that It is a Python standard described in depth at http www python org dev peps pep 0333 You can also read more about Apache s mod_xslt at http www mod xs1t2 com Read the last chapter to get a better understanding of how this changes the Plone theming landscape 252 Download at Boykma Com Chapter 12 Debugging tools and tips While add on tools are great for enhancing a web site debugging tools are also very handy In this section we ll look at a Plone product that helps with introspection and we ll also learn about tracebacks and ways to effecti
297. ng our browser page 123 Create a page template for our view 124 Write the GenericSetup steps to create the new CMF action category 125 Register the viewlet in your theme product 125 Enable the browser page 126 Summary 126 iii Download at Boykma Com Table of Contents Chapter 7 Customizing Viewlets and Portlets 127 Viewlets 127 Class based versus template based viewlets 133 Registering viewlets in a viewlet manager 135 Reordering viewlets within a viewlet manager 137 Showing hiding and unhiding viewlets within a viewlet manager 139 Overriding a viewlet template 140 Overriding a non template based viewlet 142 Portlets 147 Modifying Plone 3 portlets in a theme product 148 Creating a new Zope 3 portlet 150 Add the interface for our browser page 152 Create a page template for our view 152 Write the GenericSetup steps to create the new portlet 153 Write the GenericSetup to create a new CMFAction category and actions 153 Register the portlet in your theme product 154 Enable the portlet 155 Using Classic portlets in a theme product 155 Using portal_view_customizations 157 Summary 159 Chapter 8 Understanding Zope Page Templates and the Template Attribute Language 161 About ZPT 162 What does TAL look like in practice 163 About the Template Attribute Language 164 tal attributes statement 165 Multiple attributes 165 tal define statement 166 How this works in Plone 166 tal condition statement 167 How this works in Plone 1
298. nition Similarly a new Zope 3 browser resource is declared like this in browser configure zcml lt browser resource name logo png file logo png layer interfaces IThemeSpecific gt This image can be accessed from this relative URL resourcet logo png Note also that images registered as Zope 3 browser resources don t have all the attributes that Zope 2 image objects have that is the title property and the tag and get_size methods which is unfortunate 119 Download at Boykma Com Working with Zope 3 Components This means that if you want the html tag of your image to be auto generated this is the case by default for the logo you should store it in a directory that is located in the skins folder of your package Customizing or overriding images that are originally accessed from the portal_skins tool for example Plone default logo and icons can be done inside of the ZMI via the portal_skins Zope 2 way tool or in your theme product s skins folder which is the preferred way There is no known way to alter images declared as Zope 3 browser resources via the ZMI In other words images listed in the browser images folder cannot be customized via portal_skins as these images are not considered skin layer elements To override them the images must be added to your browser images folder and be given a new name and IThemeSpecific designation in configure zcml file The takeaway here is th
299. nk of acquisition as a framework in which behavior can be inherited from context as well as class ancestry Pure Zope 3 uses explicit acquisition plus the concept of adapters or reusable components The name Zope 3 is unfortunate because it implies that Zope 3 is the successor to Zope 2 While this may have been the original intention Zope 3 has become more of a component toolkit than a standalone application server All of this component toolkit is built into the latest versions of Zope 2 It is very uncommon for applications to be built on a 100 Zope 3 architecture Let s now take a look at the most common Zope 2 and Zope 3 components and programming languages highlighted in gray that come into play when theming a web site Theme Product Component Architecture Configuration Settings Skin Layers Zope 3 Components Programming Templating Generic Setup Profiles CMF Action Categories Browser Pages Languages XML Javascripts Viewlets KSS Portlets Python ZCML Stylesheets Page Templates XML Images Adapters and interfaces Tal Metal Macros Page Templates Images Stylesheets The components we re primarily concerned with when theming are viewlets templates browser pages adapters and interfaces In the case of images stylesheets and page templates these can be either Zope 3 elements or skin layer elements Specifically we are going to focus on the Zope
300. not have to worry about it yourself e It gives you a safety net against certain kinds of cross site scripting attacks But what if you want to insert some actual HTML code The escaping would defeat you If we use the structure keyword in a TALES expression it will render written HTML as actual HTML Note that structure is not the same as a TAL attribute it s actually part of the TAL syntax For example lt p tal content structure string lt strong gt hello lt strong gt gt Becomes lt p gt lt strong gt hello lt strong gt lt p gt This may even be a bit trickier You may use the following to get the same result lt p tal content structure string amp lt strong amp gt hello amp lt strong gt gt TAL will translate the key HTML entities in a structure expression Why bother Because the first version will confuse many HTML editors and validators How this works in Plone The structure expression syntax can be very useful when we attempt to control image display One example of how we use the structure expression is inside of our newsitem_view pt page template located in CMFPlone skins plone_content lt div class newsImageContainer tal condition here image_mini nothing gt lt a href tal attributes href string S here url image image view fullscreen id parent fieldname image gt lt img tal replace structure python here tag scale mini css_class newsImage src alt gt lt a gt
301. ntviews e Byline 6 plone belowcontenttitle documentbyline e History 7 plone belowcontentbody contenthistory e Footer 8 plone footer e Colophon 9 plone colophon e Utility navigation site actions 10 plone site actions e Searchbox 11 plone searchbox e Personal bar 12 plone personal_bar e Contact actions 13 plone contentactions e Document actions 14 plone abovecontenttitle documentactions 128 Download at Boykma Com Chapter 7 Don t worry too much about what really drives these viewlets the objective here is to understand where elements can be found and organized where to put items you are modifying and patterns to follow to successfully modify your viewlets In Plone viewlets are not looked up directly In order to be able to organize viewlets with maximum flexibility they are aggregated using viewlet managers A viewlet manager is also a Zope 3 content provider and these managers render the viewlets that are registered for them Viewlet managers are typically given charge of presenting their assigned viewlets in a particular section of a page Viewlets are technically considered browser views but they are more commonly referred to as viewlets because they encapsulate smaller bits of code They are a type of content provider meaning they are components of a page that render small pieces of HTML code Most viewlets were formerly implemented in Plone 2 x as page templates skin layer
302. nys Mishunov Acquisition Editor Rashmi Phadnis Development Editor Siddharth Mangarole Technical Editor Mithun Sehgal Indexer Hemangini Bari Editorial Team Leader Abhijeet Deobhakta Project Team Leader Lata Basantani Project Coordinator Neelkanth Mehta Proofreader Angie Butcher Production Coordinator Shantanu Zagade Cover Work Shantanu Zagade Download at Boykma Com About the Author Veda Williams has worked in software development for more than eighteen years and as a Plone themer for three of those years She currently works for ONE Northwest in Seattle Washington Veda is an editor for the documentation section for plone org and was an author and the managing editor for Practical Plone 3 I would like to thank my colleagues Andrew Burkhalter Jon Baldivieso David Glick and Josh Boese for their help in answering my many questions I d also like to thank my reviewers Steve McMahon and Denys Mishunov for their time and attention to detail Most of all I d like to thank Jamie Bishop and Mark Porcaro for getting me started with Plone in the first place Download at Boykma Com About the Reviewers Denys Mishunov is the Plone expert specializing in Plone themes development since early 2004 During his Plone career Denys worked as a freelancer with a lot of Plone consulting companies distributed all over the world and participated in more than 200 Plone projects by providing services in design a
303. o add a new style in the right pane by choosing New property The changes you insert will be immediately rendered on your page but for these changes to make it into your skin product you must either make the changes through the Web or in your filesystem product Firebug will not add them to your site s CSS files for you Another great feature is that if you refresh your browser while you have selected an element on the page to clear out your on the fly CSS changes when the page refreshes Firebug will reopen to that exact ID or class Additionally using the Inspect Script combination setting will expose your site s JavaScript and allow you to step through your code 29 Download at Boykma Com Skinner s Toolkit Also helpful is the Network Monitoring tab seen here which lets you monitor how much time is spent when loading a web page Use the Net tab to see the bar that shows when a file started and stopped loading relative to all the other files Network Monitor breaks up the traffic on a file by file basis so you can see how much time was spent loading images JavaScript HTML and so forth You can also see whether resources were loaded from the browser cache Expanding each item listed shows additional HTTP header information Debug mode in Plone which we ll discuss in the future needs to be OFF in order for this feature to work correctly PO mk 7 SEARCH ee Ry One Sky earen Tem 4 2 One UG i WHAT
304. o experience a the natural wonders that surround them Snerre adrot iye Aquacoustics Inc and LGL Alaska 9 v main content Research Associates will be operating the In ways that are both exciting and privacy policy long term escapement monitoring project educational Located in the beautiful TJ RO e entitled Indexing the Inseason Abundance Prince William Sound and Copper River of Copper River Sockeye in the lower Delta region of South Central Alaska our i reaches of the Copper River Delta programs are set in one of the world s js T You are here Home best outdoor classrooms It is a place of Copper River unmatched natural beauty and is home a Chinook Escapement to many species of plants and wildlife gt E events Monitoring by the N is Native Village of Eyak Oceanography of Prince William Sound is v news From 2001 to 2003 the June 15 2008 Native village of Eyak Presented by Copper River Watershed is T news conducted a feasibility study on using Lorem ipsum dolor sit amet consectetur fishwheels to mark and recapture chinook adipisicing elit sed do eiusmod tempor salmon and thus derive an abundance incididunt ut labore et dolore magna js T More news estimate of Copper River chinook salmon aliqua The conclusions of this three year study i gt Ge news deduced this sampling method A 8 Day Salmon Eco Adventure accurate and in 2004 the NVE wil commence another three year project to Jun RO 2008 fe gt EM n
305. o helpful when re cataloging your site for this same reason The snapshot that is generated is given a title that is likely not very helpful Click on the Snapshots tab again select the checkbox next to the snapshot and give it a more meaningful name If you make additional changes to your GenericSetup either through the filesystem or the ZMI you can create a second snapshot export both profiles to your desktop using the Import Export button and then use the Comparison tab in portal_setup to examine the differences Export profile Occasionally you just want to know what your current profile looks like for a select set of items For example you might want to know what the profile for your portal_tabs is In this case click on the Export tab Select the checkbox next to Action Providers and click on the Export Selected Steps button Extract the tar file and you will see a file called actions xm1 which outlines the current state of affairs for your site This file may be quite lengthy so generally if you want to make a small change within your profile remove all of the pieces you don t want and insert the pieces you do want in your theme product s actions xml file being careful to escape the lines correctly Your next step would then be to import your new changes into your site Import profile Click on the Import tab Select your theme product as the default profile very important Then import the selected steps 92
306. o on in my skins folder The only pieces that I keep in my browser folder are Zope 3 related components viewlets portlets and so on which we ll cover later However if you do want your stylesheets in your browser layer they should be directly in the browser folder and not in a subfolder beneath that This is because if you want to customize one item within a folder you must customize them all It s best to register your resources one at a time not in a nested hierarchy 105 Download at Boykma Com Making Manual TTW Changes or What Not to Do The behavior of the plone3_theme recipe may change in the future but has not occurred because the community wanted to make sure that existing documentation did not fall out of date The key here is that you can modify your boilerplate if need be and feel confident that the documentation will reflect the truth of what the plone3_theme recipe generates Ultimately your options here are to e Use the functionality from the plone3_theme not a problem but complicates some of the code you ll need to write and means that you ll have to pull the stylesheets and images out of their subfolders and fix some of the boilerplate to reflect this e Ignore it and work in the skins directory anyways leaves bloat e Remove it takes a while but slims down your theme e Write your own recipe that gives you a theme customized to your specifications Adding new stylesheets If you
307. obe Fireworks excels at both While Adobe Fireworks is not as feature rich as Adobe Photoshop it is still an extremely competent tool for slicing and exporting design elements at implementation time not to mention more affordable 20 Download at Boykma Com Chapter 2 GIMP GIMP also known as the GNU Image Manipulation Program can be downloaded for free from http www gimp org It is a freely distributed program for such tasks as photo retouching image composition and image authoring and is covered by the GNU GPL license According to the GIMP s web site it can be used as a simple paint program an expert quality photo retouching program an online batch processing system a mass production image renderer an image format converter and more From the perspective of how it compares to the key aspects of Adobe Photoshop and Adobe Fireworks it has full support of layers and channels plug ins that allow for the easy addition of new file formats that is it can read Adobe Photoshop or Adobe Fireworks files and best of all it is open source You can visit http www gimp org docs to download the user manual for the current release GIMP also lists several user groups and resources at http www gimp org links that may be helpful Even so the latest releases are still quite recent so development is still happening For a free solution to the image processing needs GIMP is an excellent choice but weak in t
308. ocated in the etc folder of the Zope instance on the file system If you are using buildout debug mode can be set from the instance part of a buildout configuration file Zope debug mode is automatic when you re running in foreground mode It is also probable that you will need to put your entire Zope instance into debug mode just to theme a web site and you may occasionally also need to put your portal_javascripts and portal_kss into debug mode In the future debug modes may be consolidated and possibly enabled by default so stay tuned Summary In this chapter we have learned e How to create a theme product e What a theme product s filestructure looks like e How to add a theme product to a buildout e How to start Zope create a Plone site and install your theme product e How to enable debug mode to ease theme development Now that you have a theme installed on your Plone site we are almost ready to start skinning it First we ll cover some aspects of Plone s inner workings that will shape the skinning process 73 Download at Boykma Com Download at Boykma Com Making Manual TTW Changes or What Not to Do You can customize Plone by changing settings through the web TTW in the ZMI Zope Management Interface or by making changes to an installable filesystem product TTW changes are hard to back up hard to share hard to repeat and generally tough to work with In Plone 3 the recommended method of theme dev
309. oduct s architecture 81 Changing your site via CMF action categories 82 Document actions category 83 Site actions category 84 Folder buttons category 85 Object category 86 ii Download at Boykma Com Table of Contents Object buttons category 86 Portal tabs category 87 User category 87 About GenericSetup 88 Base profile 89 Extension profiles 90 An example extension profile 90 Taking snapshots 92 Export profile 92 Import profile 92 Moving portal_actions configurations into a filesystem product 93 Skin layer customization the old fashioned way 95 Using the portal_skins tool 95 Changing base_properties 99 Modifying images using the custom folder 101 Extracting items from the custom folder 102 Using stylesheets and the CSS resource registry tool 103 Common conventions for using stylesheets in Plone 104 Overriding base Plone stylesheets 104 DTML support 105 Location of files and controlling bloat 105 Adding new stylesheets 106 Starting with CSS in the ZMI 107 Creating a theme specific stylesheet in your filesystem product 108 Working with JavaScripts in your theme product 109 Summary 110 Chapter 6 Working with Zope 3 Components 111 About the architecture 111 Introduction to ZCML 114 Zope 3 browser layers and resources 117 Using images as browser resources 118 Using stylesheets as browser resources 120 Browser pages 121 Create a Python class for our browser page 122 Add the interface for our browser page 123 Registeri
310. of Contents Chapter 15 The Future of Theming for Plone 281 Why a new approach 281 About the future of theming in Plone 282 Is XDV ready for serious deployments 282 Background and history 282 Choosing the appropriate theming approach 283 Which one should use 284 Tools and prerequisites 285 Adding XDV to your Plone instance 285 Platform notes 286 Adding collective xdv 286 Running buildout 287 Activating XDV 288 Adding the HTML and rule files 288 Enabling the theme transform 289 Testing that everything works 290 How it works 290 The rule file 292 Rules Overview 293 lt replace gt 293 lt append gt and lt prepend gt 294 lt copy gt 295 lt drop gt 295 Summary 296 Index 297 vii Download at Boykma Com Download at Boykma Com Preface Themes are among the most powerful features that can be used to customize a web site especially in Plone Using custom themes can help you brand your site for a particular corporate image it ensures standards compliance and creates easily navigable layouts But most Plone users still continue to use default themes as developing and deploying themes that are flexible and easily maintainable is not always straightforward This book teaches best practices of Plone theme development focusing on Plone 3 It provides you with all the information useful for creating a robust and flexible Plone theme It also provides a sneak peek into the future of Plone s theming system
311. of a new viewlet manager Creation of viewlet managers is discussed at http plone org documentat ion how to adding portlet managers and http plone org documentation manual theme reference elements viewletmanager override Creating a theme product Using the lessons learned from Chapter 3 Setting up Your Development Environment I created a theme product named plonetheme guria using the command line syntax paster create t plone3_theme while we were located in the src directory of our buildout as seen next bash opt mybuildout src paster create t plone3 theme plonetheme guria Selected and implied templates ZopeSkel basic_ namespace A project with a namespace package ZopeSkel plone A Plone project ZopeSkel plone3_ theme A Theme for Plone 3 0 Variables egg plonetheme guria package plonethemeguria project plonetheme guria Enter namespace package Namespace package like plonetheme plonetheme Enter package The package contained namespace package like xample example guria Enter skinname The skin selection to be added to portal_skins like My Theme Guria Theme for the Plone Theming Book Enter skinbase Name of the skin selection from which the new one will be copied Plone Default Enter empty styles Override default public stylesheets with empty ones True False Enter include_doc Include in line documentation in generated code False Enter zope2product Are you creat
312. ogo tag gt lt a gt lt span class description tal define portal context plone portal state portal tal content portal Description gt So now if we restart our Zope to make our ZCML changes take effect and look at the code on our home page using Firebug we can see that the logo viewlet now displays the description of our web site assuming one has been specified in addition to the logo image We can then position it as follows description color fff position absolute top 155px left 10px font size 140 205 Download at Boykma Com General Styling and Templating Changes We might as well define some basic styles for the portal 1logo id and the image it contains in our guria_styles guria css dtml stylesheet HEADER AREA portal logo height 180px width 190px background color 94582e float left portal logo img margin 115px Oem Oem 0em float left All we are doing is positioning the image defining a height width and background color for the logo s lt a gt lt a gt tags see logo pt and doing some additional positioning As we ve observed we can modify the logo pt file to render differently either to include additional information or even to modify how the theme product finds the logo image For example we could easily modify the logo pt to look specifically in our theme product for an image and bypass the logo image defined in base_
313. ogoViewlet parent class does except where we override the parent by telling it to look for a page template known as logo pt You may remember that the original LogoViewlet class also used 204 Download at Boykma Com Chapter 10 logo pt but there s a big difference this time Because the new class is inside our theme product it will find our version of logo pt rather than the template in plone app layout We also include a docstring here to explain what we re trying to achieve This documentation on plone org shows slightly different syntax when subclassing a viewlet http plone org documentation tutorial customizing main template viewlets overriding a class viewlet We ve used the code seen above to ensure backwards compatibility with all 3 x Plone sites but you could use the simplified code if you re not concerned with backwards compatibility S a Based on our modifications to configure zcm1 our theme product knows to look in our browser directory for this logo pt file Next we copy the logo pt file from plone app layout into our theme product s browser folder We want to modify this logo pt file slightly to add an extra HTML tag that will contain the description of our web site as seen here lt a metal define macro portal_ logo id portal logo accesskey 1 tal attributes href view navigation_root_url i118n domain plone gt lt img src logo jpg alt tal replace structure view l
314. older will take precedence 97 Download at Boykma Com Making Manual TTW Changes or What Not to Do Most skin layers are provided by filesystem files that are mapped into portal skins The advantage of the custom folder is that it is a normal Zope folder and its contents may be changed through the web This can be helpful for integrators to make quick changes for example you want to swap out the logo with a different colored logo and want to make that change immediately visible without having to worry about backing up your theme in Subversion updating your server s version of the theme product restarting your server and so on To make quick changes all you have to do is to edit that item by first finding the image in an existing skin layer and then modifying it in the custom folder Click on portal_skins again to get to the main page that displays all of the available filesystem views which in turn contain pages templates and other resources To modify one of these resources locate an item listed there for example plone_images logo jpg or plone_templates main_template and click on it You will then be given the opportunity to customize that item in the custom folder This makes a copy of the original in the custom folder filesystem item provided by Plone Removing that item from the custom folder after customizing it means that a site will use the original not customized version You cannot customize items within
315. on on them in The Definitive Guide to Plone http plone org documentat ion books definitive guide to plone pdf and also in Zope s documentation http www zope org Documentation Books ZopeBook 2_6Edition AppendixC stx We ll also briefly mention ZCML XML and Python but will dig deeper into that later What this chapter will not cover Beyond the realm of theming there are a number of minor tweaks that integrators can make to a Plone site and will likely need to make during the course of theming a site but these tasks do not constitute theming per se These configurations enable the theming process however For example when you add a portlet the portlet may give you a few options that allow you to control the look and feel of your portlets such as including borders including a header or a hyperlink and so on If you add a navigation portlet and modify it or you modify the one that is installed by default it gives you options to control whether that navigation displays at the root level whether it shows all parents and children whether to add borders provide hyperlinks and so on Every portlet is different of course and may not provide all of these options Additionally in Site Setup configuration screens called configlets exist for various pieces of the Plone UI These can be adjusted and may affect what displays on your web site However it s rare that most of these configuration changes will ever be incorporate
316. oneSkinDump Another popular dumper product is known as Plone Skin Dump qPloneSkinDump by Quintagroup Plone Skin Dump allows users to create a Plone product in the Products namespace by exporting the custom folder It creates an old school Plone theme product for you but it does not provide the plonetheme type of product The product has not been tested against Plone 3 so it may not be the best option Moreover at the time this chapter was written it was not possible to download the product from its SourceForge repository In the event you wish to try this product you can find it here http plone org products plone skin dump Again it is in the Products namespace so all you need to do is drop it in your buildout s products folder You can then follow the directions posted on the product page It s a bit more complicated than FS Dump but obviously it does a bit more Collection and static portlets While portlets are not add on products they are tools that can greatly enhance the impact of your site and worth mentioning Default Plone provides collection and static portlets that can be added on any page by clicking on the Manage Portlets link on your site These portlets provide great power and can be styled using CSS A collection portlet for example can be set to display random contents fitting certain criteria maybe a randomized spotlight content type tagged with a special keyword This keeps the look and feel of a site f
317. ons performed using this tool cannot be extracted out to the filesystem You re essentially making customizations using the portal_view_customizations tool and by altering GenericSetup TTW neither of which are easily extracted out This is less a limitation of the product and more due to the nature of Plone In time GloWorm may become an integral part of theming though that remains to be seen The version current at the time of this writing has some instability but it s a product worth watching For a demo of this product visit this web page http weblion psu edu news gloworm 1 0 screencast For more information you may wish to follow the WebLion Group s blog http weblion psu edu news or visit their IRC chatroom weblion 254 Download at Boykma Com Chapter 12 About tracebacks and Pdb the Python debugger A Python traceback is a detailed error message that is generated when an error occurs in executing Python code Since Plone running atop Zope is a Python application most Plone errors will generate a Python traceback To find the traceback check your event log log file or go into the error log panel in the ZMI Alternatively use the ZMI to check the error log object in your Plone instance Or if you re running your Zope instance in foreground mode you ll see it in your terminal window A traceback will be included with nearly all error entries A traceback will look something like this Trac
318. ontents tab itself not the view you get when you click on it For this item and the items next the actual views can be either skin layer templates or browser views and those are configured elsewhere e syndication provides the logic for determining if an object is able to be syndicated e content rules provides the logic for displaying the view for the Rules tab e local roles provides the logic for accessing the Sharing tab e history provides the logic for displaying an object s history that you get when clicking on the History tab You will rarely need to modify these category actions Object buttons category Within this category there are actions that define the buttons that are shown in the Actions drop down list on the contentActions bar for each content object in the site These include Cut Copy Paste Delete and Rename actions 86 Download at Boykma Com Chapter 5 2 Search Home Users News Events amp admin Log out You are here Home News July 2009 Mo Tu We Th Fr Sa Su News by admin last modified Jul 07 2009 09 01 PM 1224 5 Up one level 6 7 9 10 11 12 Site News 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Select All 27 28 29 30 31 Title Size Modified State Ej News 1k8 Jul 07 2009 09 01 PM Published Manage portlets Copy Cut Rename Delete Change State Again you will rarely need to modify these actions Portal
319. or all kinds of web sites from large enterprise sites to educational and government sites and even small environmental sites I work at an environmental non profit named ONE Northwest We hosted the 2006 Plone Conference in Seattle ONE Northwest has produced almost 200 attractive high quality but generally small Plone sites that empower other environmental groups These web sites give our clients the tools they need to reach their audiences and to hopefully preserve our natural environment Every day brings new excitement revelations more complex sites and plenty of ideas on how to improve Plone As an open source CMS it s especially thrilling to be able to contribute ideas and put efforts that incrementally improve Plone For many members of the Plone community we stay with it because it s all about contributing and the community We are a vast and far flung crowd yet surprisingly close knit At any given point in time on plone the IRC channel for Plone users on freenode net you can be talking simultaneously to the people in Belgium South Africa Australia Israel or the United States Sometimes the community gets together in person to work sometimes at conferences but more often at sprints small gatherings geared toward solving a particular problem People have sprinted on projects in castles on archipelagos on beaches in the swank offices of Google Corporation and online all over the world The community has proven to be e
320. or theme development your theme products will go in the src directory products This directory is analogous to a Zope instance s Products directory note the difference in capitalization Old style non egg based Zope 2 products belong here not newer theme products Note that themers will rarely need to use this directory but some publicly available themes on plone org were not built with paster and might belong in this directory The important takeaway here is that e You will use a terminal window to execute commands in the bin directory to start and stop your Zope instance e You will use the src directory as the primary directory in which to work e You may need to make changes to your buildout cfg file to recognize data fs files located in the var directory and any new theme products that you may have added to the src directory Other than that you really don t need to know a lot about how buildout works You just need to know a few basics which we ll get to in the next chapter 60 Download at Boykma Com Chapter 3 Summary In this chapter we have learned How buildout fits into the Plone development process What terminology is commonly used in Plone development How you can use Subversion to safely store your code in a central versioned repository How to set up your development environment What the buildout filestructure looks like and what parts of it are important to themers Now tha
321. ore we attempt to override any portlets because we are now using the port letRenderer directive If we are editing only the rendering of an existing portlet we use the BK lt plone portletRenderer gt syntax but if we are creating a new portlet we use the standard lt plone portlet gt syntax at the beginning of our ZCML declaration This code tells us that we are using the portletRenderer directive to indicate that we are using the default Python code that renders the portlet hence the dot delimited patch back to IEventsPort let we are altering the portlet to refer to a local template named events pt and our modifications will only affect the current theme product We then need to copy events pt to our filesystem product s browser folder along with any associated metadata files You don t need to copy events py but you will need to subclass it You could optionally put your portlets in a portlets folder but that is optional and requires some extra boilerplate See the plone app portlets package for more information Assuming we want to change the name of the page template to mytheme_events pt we now define a new portlet renderer for our new layer 149 Download at Boykma Com Customizing Viewlets and Portlets Instead of using a custom template we could use a whole new renderer class In this case we can use identical renderer class code but change the name of the template it renders If
322. ortal header code we ll see that it does not have a class declaration and that it instead specifies a template This means that all of its logic is contained in that template and that it can be thought of as template based In reality though it is using an inherited class lt The portal header gt lt browser viewlet name plone header manager interfaces IPortalTop template portal header pt permission zope2 View gt The important thing to understand here is that when modifying viewlets we first need to know if they are class based using a derived class or not in order to know how to treat them and we have to explicitly look at the code in configure zcm1 to verify if there is an associated page template or not Other vital information is found in common py located in yourbuildout buildout cache eggs plone app layout some version number plone app layout viewlets common py This file contains many of the Python classes used by the viewlets with class declarations Other viewlets can be found in eggs directories such as plone app content Obviously viewlets that are template based do not use this file 134 Download at Boykma Com Chapter 7 This file is located in your buildout at buildout cache eggs plone app layout plone app layout viewlets common py Search the file for the word logo and it gives us the following information class LogoViewlet ViewletBase render ViewPage
323. ortal_setup Click on the Import tab at the top then choose the name of your theme product Select the viewlets step found on the page and choose Import Selected Step Your viewlet changes should now be registered and appear if you refresh your page Portlets In this section we will cover some of the basic concepts associated with portlet manipulation Generally speaking portlets are similar to viewlets in terms of their basic functionality They render a portion of a page under control of a manager that maintains order As of Plone 3 portlets can be designated to appear in either the left column or the right column formerly known as left slots and right slots but they cannot yet display elsewhere in a site s structure without additional code This is a limitation that Plone hopes to overcome You can adjust the portlet settings on a given folder or page using the manage portlets page accessible via the manage portlets links in the right or left columns of your site See the Plone Users Manual http plone org documentation manual plone 3 user manual for more information on how to configure portlets on your site Most importantly you can define portlets at your site root that can cascade throughout your site s structure or you can block parent portlets for a given section Optionally you can also manage portlets by the group that a user falls in or by the content type involved 147 Download at Boykma Com Customizi
324. osen not to override Plone s default stylesheets and instead we want to build on top of Plone s default and excellent stylesheets I prefer this method mostly because the layout needed for Plone s Contents view and other complex structural pieces are already taken care of by Plone s base stylesheets It s easier than trying to rebuild those from scratch every time but this is merely a personal preference Following the creation of the theme we register the theme product in our buildout cfg using the following syntax buildout develop src plonetheme guria instance eggs plonetheme guria zcml plonetheme guria 182 Download at Boykma Com Chapter 9 If we were using the eggt ractor egg there would be no need to add these lines of code to our buildout cfg all we would need to do is rebuild our buildout and it would automatically recognize the new egg eggtractor can be found at http pypi python org pypi buildout eggtractor and is documented thoroughly Assuming we are not using eggtractor we must rebuild our buildout as we have altered ZCML code and added a new egg bash opt mybuildout src bin buildout This would be a good time to check your vanilla theme product into Subversion so that you can track back to the original version if needed However since this is an existing theme there is no need to do so For the purposes of following along it might be best if you do not yet M
325. ources might be flagged as not found in the portal css tool in the ZML if the layer they are registered for doesn t match the default skin set in portal_skins This can be confusing but it must be considered as a minor bug in the CSS registry instead of a lack in the way Zope 3 resources are handled in Zope 2 It is possible to interpret DTML from a Zope 3 resource view However if you need to use DTML for setting values in a stylesheet the same way as default Plone stylesheets where values are read from base_properties props it is much easier to store it ina directory that is located in the skins folder of your package as a skin layer Customizing overriding stylesheets that are originally accessed from the portal_skins tool in the ZMI for example Plone default stylesheets can be done inside that tool There is no known way to do it with Zope 3 browser resources using the portal_skins tool The takeaway here is that for the purposes of this book we will be treating stylesheets as skin layer elements rather than treating them as Zope 3 browser resources Browser pages Creating custom views for a web site is a common request In Plone 2 x this was handled primarily via skin layers but in Plone 3 we often create these as browser layer resources In fact the browser layer has been available and in use since Plone 2 5 The key change is that more of the templates have been moved to the browser layer in Plone 3 and thus can t be o
326. out audio support for Plone 3 Plone4ArtistsAudio can also sniff out any additional metadata that may already be attached to the MP3 file such as artist name album name or artwork Once the file is uploaded it is automatically displayed along with the associated metadata If we edit the audio file in Plone any changes are automatically written directly to the audio file The audio file can then be listened to right on the page in a pop up player It can be streamed or it can be downloaded to your hard drive Plone4ArtistsAudio also provides functionality similar to the Video Container folder except this time it s an Audio Container Select Activate Audio from the Actions drop down menu in your Plone site to see a more informative display Available on that view is a button that allows you to listen to all of the audio in the folder as well as a podcasting button This same behavior is also available to collections in Plone Simply create a collection whose criteria pulls in items whose MIME type is audio mpeg and any other desired metadata Then activate the audio via the Actions drop down menu 271 Download at Boykma Com Plone and Multimedia Plone4ArtistsAudio works together with Plone s blob file product to support external storage of audio data This keeps your data fs nice and slim After the blob file product is installed on your site you add your audio files to your Plone site as blob file objects via the Ad
327. out bold tags How this works in Plone In Plone you will often see the tal omit tag statement used in i18n scenarios internationalization but you can also see it in the breadcrumbs viewlet lt span tal repeat crumb view breadcrumbs tal attributes dir python view is rtl and rtl or ltr s lt tal last tal define is last repeat crumb end gt lt a href tal omit tag not crumb absolute url tal condition python not is last tal attributes href crumb absolute url tal content crumb Title gt crumb lt a gt lt tal last gt lt span gt This code basically tells us that a breadcrumb s Title will be wrapped with an href tag if an URL exists assuming that it s not the last item in the list of breadcrumbs If there is no URL then it will be rendered without the href tag 173 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language tal on error statement You can provide error handling for your document using the tal on error statement When a TAL statement produces an error the TAL interpreter searches for an on error statement on the same element then on the enclosing element and so forth The first on error found is invoked It is treated as a content statement because it causes the content of the tag to be replaced but it s triggered only when an error occurs In this example if the following tal content statement fails the words This is not the homep
328. ow about 31 activating 31 features 31 32 Z ZCML about 114 117 introducing 114 ZCML slug 116 ZMI 116 Zope about 7 starting 70 Zope Plone TextMate support bundle 42 304 Download at Boykma Com Zope 3 browser layer 117 118 Zope 3 components about 112 adapter 112 browser pages 112 interfaces 112 templates 112 viewlets 112 Zope 3 portlet creating 150 enabling 155 GenericSetup steps writing to create CMFAction category 153 154 GenericSetup steps writing to create new portlet 153 interface adding for browser 152 page template creating 152 registering in theme product 154 155 Zope Configuration Markup Language See ZCML Zope installation 50 Zope instance 50 Zope Page Templates See ZPT Zope product 51 ZopeSkel 53 ZPT 161 162 305 Download at Boykma Com Download at Boykma Com PACKT Thank you for buying eusuisuingc d Plone 3 Theming Packt Open Source Project Royalties When we sell a book written on an Open Source project we pay a royalty directly to that project Therefore by purchasing Plone 3 Theming Packt will have given some of the money received to the Plone project In the long term we see ourselves and you customers and readers of our books as part of the Open Source ecosystem providing sustainable revenue for the projects we publish on Our aim at Packt is to establish publishing royalties as an essential part of the service and support a business model that susta
329. ow IPortalTop f If we want to see our changes take effect we must either install the theme on a fresh Plone site or we can import the viewlets xm1 GenericSetup step via portal_setup in the ZMI making sure we select our theme as the profile http localhost 8081 mysite portal_setup manage_importSteps We ll also need to restart our Zope instance because we altered configure zcml Reinstalling the theme product is not advised Adjusting the personal bar Next we look at the personal bar This is the bar that lists the login logout links and also displays the user icon with a link to a Preferences panel We want to adjust the location of this bar We don t really need to move it to a new viewlet manager we only want to move it so that it appears below the searchbox _ Again due to accessibility reasons this may not be the best thing to do It might make more sense to move the personal bar to the footer area where y itis less likely to interfere with the look and feel of the site but that s a task for another day 219 Download at Boykma Com General Styling and Templating Changes To do so we make a quick adjustment in our theme product s profiles default viewlets xml file lt xml version 1 0 gt lt object gt lt order manager plone portaltop skinname Guria Theme for the Plone Theming Book based on Plone Default gt lt viewlet name plone searchbox gt lt viewlet name plone personal bar
330. p Document files Adobe Photoshop meets the basic requirements of being able to manipulate the vector and raster images layers and slices and offers a lot of additional functionality The ability to control anti aliasing and the quality and size of an exported image is essential in web design and Adobe Photoshop also Adobe Fireworks is quite powerful in this respect A quick look at the Layers panel illustrates how sections can be grouped together moved or be shown or hidden via the eyeball icon WELCOME Lorem ipsum dolor sit amet consectetuer adipiscing elit Aliquam imperdiet lacus vitae neque placerat elementum Aliquam erat volutpat Suspendisse lobortis nibh a consequat tristique magna arcu viverra metus vel bibendum nisl velit et urna Sed Our Tribes Our Businesses Our Commercial Fishers tincidunt odio Donec sed dolor vitae pede venenatis dignissim Nullam dapibus Our Local Leaders iss x Nen vestibulum condimentum ligula sit amet ante Visitors Grace 3 TE DC NEWS EVENTS Lock Ea Fit 100 fA eM Test Fishery in Lower Community Kayak Day Const Give byiNative April 9 2008 JOIN OUR EMAIL List P gt amp 1000 illage of Eyal t For he pe Se den the WSSC Summer Education Programs Keep up to date with s Bi Native Village of Eyak in provide an opportunity for participants our newsletter main nav association with from Alaska and beyond t
331. pecific template colophon pt permission zope2 View gt interfaces IPortalFooter interfaces IPortalFooter 227 Download at Boykma Com General Styling and Templating Changes For both of these elements we provide a dot delimited path back to the IPortalFooter viewlet manager We don t need to move these items so it s fine to leave them assigned to IPortalFooter We also notice that neither of these viewlets is class based and hence they list the footer pt and colophon pt page templates That means we don t need to do anything to viewlets py We also use the IThemeSpecific designation here to apply our changes to this theme product only Next we copy the footer pt and colophon pt files found in plone app layout into our theme product s browser folder We then modify the footer pt as follows lt div class vcard id portal footer metal define macro portal_ footer i118n domain plone gt lt tal comment tal condition nothing gt Use hCard formatting for contact info lt tal comment gt lt div class fn org hiddenStructure i18n translate footer_txt_org_name gt ORGANIZATION S NAME GOES HERE It will be hidden by CSS we need it only for hCard compliance This should be filled in if you use this theme for your site lt div gt lt div class adr gt lt span class street address 118n translate footer txt _addr gt 123 Street 7 7 Road lt span gt lt span class extended ad
332. plates simple and readable maintainable by designers After all if you re intermixing complex logic and presentation you re going to get a kind of spidery mess that s typical of PHP or ASP Summary In this chapter we have learned e What the Zope Page Templating system is e That the Templating Attribute Language TAL is used by Zope and follows the rules of XHTML e What the common TAL expressions are e How these TAL expressions manifest themselves in CMFPlone s page templates and in templates that render viewlets and portlets As we move forward we will take these lessons and apply them to an actual theme product Let s take a closer look at a real world theme product now 177 Download at Boykma Com Download at Boykma Com Creating Installing and Tweaking our Theme Now that we have a basic introduction to the machinery that makes themes possible we are going to use these concepts to dissect an actual theme product We will first inspect a few structural changes and install them and then finally examine the various components and skin layer items that have been changed one at a time Where restarting Zope or rerunning your buildout would be required this will be noted About the theme This theme and its design are available for personal and professional use to anyone and can be freely modified You can and should download the files from https svn plone org svn collective plonetheme guria trunk us
333. properties props This could be accomplished with the following code lt a metal define macro portal_logol id portal logol accesskey 1 tal attributes href view navigation_root_url i118n domain plone gt lt img src tal define img nocall context my_ logo gif tal attributes sre img absolute_url tal on error nothing alt background image gt lt a gt v Be warned that this approach may or may not work in Internet GA Explorer I personally have not had issues with it but there have been reports to the contrary 206 Download at Boykma Com Chapter 10 Adding a banner image If you examine the original design you ll see that we also want to have a header image in the top area of our site the daisies An easy way to add a banner is to apply it to an existing data structure In our case we re going to apply it to the portal header id given to us by the portal header pt viewlet We can find this CSS hook by viewing the source on our site All we need to do is describe the properties that define that id in our guria_styles guria css dtml stylesheet portal header background image url amp dtml portal_url homepage_banner jpg background position bottom right background repeat no repeat height 176px width 733px position relative padding top 3px This code assigns a background image named homepage_banner jpg to the portal header id the image can be found in our theme p
334. px It s worth stating that IE8 tends to be pretty standards compliant so you should try to write your CSS cleanly to appease it Moreover there are not CSS hacks available to you so writing clean code is the best solution However if you find that you are having problems or you have old sites you don t want to spend time reworking with you may want to tell your sites to behave as though they were being viewed in IE7 This can be done using an Apache tweak explained here http blogs msdn com hanuk archive 2008 08 28 apache httpd configuration for ie7 standard mode rendering in ie8 aspx At this point we ve covered most of the basics involved in theming a site and a few extras as well Now that our site is browser compliant we re officially done here 243 Download at Boykma Com Custom Page Views and Sectional Styling Summary In this chapter we have learned how to e Create custom home page views from simple to complex e Do sectional styling e Enable and create sectional banners e Test our site against multiple browsers Skinning is a complex but rewarding affair and understanding the various ways in which you can make changes is the first step towards making educated decisions about how you would implement a design Next we will look at additional tools product and skinning tricks that can help you be more effective and creative during the skinning process 244 Download at Boykma
335. r Plone This chapter will feature a complete walk through of theming a site using the collective xdv add on Why a new approach The current approach to theming also known as skinning the Plone sites Plone 1 0 to 3 x has been steadily evolving over a number of years and is powerful but somewhat complex As with most software the reason for this complexity is usually a side effect of the evolution of the product adding more functionality and more flexibility to meet the needs of power users while still retaining the same approach to the problem space For Plone the current theming approach has served us well for the last 8 years but we realized it was time to reevaluate how theming was done as it s such an integral part of managing a Plone site The main goals for a new approach were No requirement for the people doing the theming to know anything about Plone or Python Use standard tools and libraries whenever they are available Reduce the number of concepts you have to learn in order to get started When requiring you to learn something new let it be a standard solution that is useful even outside of the Plone world Download at Boykma Com The Future of Theming for Plone e Try to stay as close to the HTML and CSS mindset as possible as the people doing theming are usually the same people who write the HTML code for the design e Make it possible to apply an existing HTML CSS design to a Plone site while
336. r Solaris development box The dependencies are also fulfilled on OS X by the XCode toolkit Anyone using an OS X box for theme or product development should use the OS X binary installer You ll benefit from a GUI installer and launcher For themers this is generally what you want Anyone installing on an OS X server should probably install XCode and use the Unified Installer for greater flexibility You ll also need a custom buildout when working off of a server Macintosh dependencies for the Unified Installer There is one important dependency when using the Unified Installer that must be resolved for Macintosh users but thankfully this dependency is now handled by the newer installers and by XCode 56 Download at Boykma Com Chapter 3 GCC GNU Compiler Collection GCC is an integrated distribution of compilers available for several major programming languages Windows dependencies for the Unified Installer The newer Plone binary installers take care of all of the Windows dependencies and you can just install it and go Note that nobody but a very serious developer should even consider installing their own GCC Python and so on What they get from the Plone Windows binary installer is more than adequate for theme and product level development However if you really want to install Plone on Windows without using the binary installer there are a few additional things you need to do to satisfy Plone s depen
337. r core stylesheets though you could optionally do that In order to test the functionality of this product it requires you to x purchase the product if your site has over 2500 characters of code in it According to the developers of CSS Edit it offers real time styling of absolutely any web page Even if your site is powered by a complex database or makes use of advanced AJAX you can style and analyze it without the hassle of uploading or refreshing 44 Download at Boykma Com Chapter 2 The Selector Builder lets you describe what elements to style in plain English Advanced CSS selectors have a steep learning curve but with this product there is help In the case of some of the more convoluted areas of Plone to style such as the navigational structures this feature is helpful You can also take advantage of a feature called CodeSense Instead of merely suggesting a list of predefined keywords it analyzes your stylesheet and behavior to offer context sensitive suggestions Additionally you can use the Validation inspector to check your site against W3C conventions Finally using a Milestones interface you make big changes without any risk of losing your work and still have the option to roll back All in all this is a slick tool It s a bit pricey but for people who want a little extra assistance with their CSS it s invaluable The downside of this tool is actually not the tool itself it s Plone For theme
338. r documents http localhost 8080 mysite portal_types Document manage __ propertiesForm 2 Then from the home page or whatever page you want to apply this view to choose Second Homepage View from the Display drop down list It may be necessary to access the home page by selecting it via the Contents tab It s also not uncommon to customize the page template that provides the view of a collection This file is named atct topic view pt and is located at mybuildout buildout cache eggs Products ATContentTypes some version number Products ATContentTypes skins ATContentTypes We will not cover modification of a collection view as it is very similar to modifying a document view but you should know that at this point knowledge of Python and advanced TAL becomes very helpful Using Python code to render a home page view The next example is pretty dense and is provided only to show an alternate solution It s similar to the example where you want to pull in the content of a page or other object but this one also allows you to pull in images and collections and limit the number of items they return It also uses memoize a Python function decorator for caching the values of functions and methods This might be of interest to the geeks in the crowd It is recommended at this point that if you have not downloaded the theme you definitely do so and walk through the code yourself I ll explain in theory how it s hooked up and how it wor
339. r site let s look at a few add ons that can be used to add visual interest and extra metadata 263 Download at Boykma Com Plone and Multimedia collective flowplayer Written by the talented Martin Aspeli this tool is a lightweight Plone integration layer for Flowplayer a great GPL d Flash based player for FLV Flash Video and MP3 audio files More information on Flowplayer can be found at http flowplayer org and the product can be downloaded from http pypi python org pypi collective flowplayer The integration is nearly seamless You can upload a FLV or MP3 file as a standard file object and from that you get a video player There s no special content type and no complex configuration involved Site Map Accessibility Contact Site Setup Search Site A Search FT only in current section Home Users News Events Bars and Tone amp vedaw Log out You are here Home Bars and Tone vew Edit Sharing Actions vii Display May2009 Mo Tu We Th Fr Sa Su hi nto Changes saved be g 45 67 8 9 10 Bars and Tone 11 12 13 14 15 16 17 by vedaw last modified Ma 18 19 20 21 22 23 24 25 26 27 28 29 30 31 28 2009 02 35 PM Manage portlets Send this Print this The Plone CMS Open Source Content Management System is 2000 2009 by the Plone Foundation et al Plone and the Plone logo are registered tradema
340. r theme product s configure zcml file located at mybuildout src plonetheme guria plonetheme guria browser below the viewlets registration We adjust the code like this lt Viewlets registration gt lt The logo gt lt browser viewlet name plone logo manager plone app layout viewlets interfaces IPortalHeader class viewlets LogoViewlet permission zope2 View layer interfaces IThemeSpecific gt In this case we are providing a dot delimited path back to the original IPortalHeader viewlet manager provided by plone app layout We do this because we are not moving anything and the default behavior suits us _ You could rename the viewlet here to something like mytheme logo amp if you wanted to be very explicit about indicating that the viewlet GS is now different from the original viewlet but that s ultimately a personal preference 203 Download at Boykma Com General Styling and Templating Changes Next we adjust the class path so that it points to a Python class in our own viewlets py file here designated as viewlets LogoViewlet Note that since this starts with a dot it s relative to the directory containing the ZCML file We have not yet added this class to our theme product subclassed it from the original actually so let s do that now In common py which we opened above search for logo We want to borrow only the first two lines of the code which tell us the name o
341. rall it has a clean stripped down interface that is a pleasure to use The only apparent downside is that it pops the inspector up in a separate window which means it requires slightly more real estate Validation tools Having a good graphical editor and a solid set of CSS browser add ons is a step in the right direction but as with any project the proof is in the finished product At the end of every project any good CSS themer needs to check his her CSS and his her HTML for cleanliness and adherence to the W3C standard The best resource here is the official W3C validation web site known as Jigsaw which is used by the Validate Local CSS and Validate Local HTML options available with Firefox s Web Developer Toolbar We ll talk about this more in future chapters but Plone gives us approximately 20 stylesheets out of the box that you can extend and override by using a stylesheet named mytheme css or similar This means that when using the Jigsaw service it s important to fix the inconsistencies located in mytheme css but there isn t much need to worry about issues in the original Plone stylesheets which are fairly clean already and the errors Jigsaw points out are not that significant The only real downside of Jigsaw s validator and pretty much every other validator is that it only works on live web sites and not on web sites being run on localhost Hence be sure to use the Validate Local options prior to deployment
342. re of here is that some port letHeader elements have an anchor tag contained within them and those anchor tags might accidentally pick up a font color defined by base properties It s important to write code to support that possible scenario as we ve done here Adjusting the footer and the colophon Now we can also do some basic adjustment to the footer and the colophon Based on the design we see that the footer and the colophon are contained within a box with a brown background color and that the elements are in approximately the same location as they would be in a default Plone site We need to add a wrapper around these elements to create that brown container One of the easiest ways to accomplish this is to modify the main_template pt found in CMFPlone at mybuildout buildout cache eggs Plone some version number Products CMFPlone skins plone_templates You could certainly create a new viewlet manager if you wished and thereby minimize upgrade issues that might involve changes to the main_template pt but you should not be afraid of modifying main_template pt _ Viewlet managers are explained at http plone org lt n documentation how to adding portlet managers and GA http plone org documentation manual theme reference elements viewletmanager override For now we re just going to modify main_template pt by adding the wrapper First we need to copy the file from CMFPlone and put it into our theme product s skins guria_templ
343. replace content id content theme id my content area gt lt rules gt Ignoring the preamble lt rules gt and the comment there s one single instruction here So what does it do 1 It looks at the Plone side of things content and locates the part of the HTML that has id content 2 It then replaces the part of your theme s HTML that has id my content area with the content it got from Plone The syntax inside the content and the theme attributes can be a bit intimidating luckily we have great tools to make it very easy to get this right The syntax is called XPath and is a standard for addressing nodes in the DOM It s also directly supported in Firebug A full treatment of how Firebug works is outside the scope of this tutorial but if you have done any web design in the past you have probably used it If not head over to the Firebug web site http get firebug com to learn more they have documentation and screencasts showing you how to use it I will show you a screenshot of the part we re interested in However when you re looking at the Plone source code using Firebug locate the content area as shown next and right click the node HTML CSS Script DOM Net gt lt div id VviewLet above content gt Ad lt div id content gt gt lt h1 class do Copy HTML gt lt div id plond Copy innerHTML tcl gt lt p class doc Copy XPath gt lt p id Link py
344. resh and gives some power to the end user These portlets have the same structure as other portlets so they will use any default styling that may be applied Sectional theming As discussed earlier a very common need for Plone users is the ability to create sub sites sectional theming and URL based theme switching We already looked at how to do sectional theming by using the CSS hooks provided by Plone using shortnames Another option is sectional theming via the use of Apache s mod_proxy and Zope rewrite rules This approach will not be covered here due to its complexity but tutorials on how this can be accomplished can be found at http www plone org documentation To make sectional theming even easier a product named themetweaker themeswitcher was written 250 Download at Boykma Com Chapter 12 themetweaker themeswitcher This product is another gem written by the great folks at WebLion It is described as a product for switching themes on folders only those with the IATFolder interface as of this writing in Plone It works only with theme products that are registered as a browser layer which is not a concept we will cover here Browser layer declaration is a more programming oriented process and is described in Professional Plone Development Martin Aspeli Packt Publishing and at http plone org documentation tutorial customization for developers browser layers The themetweaker themeswitcher produ
345. return the following items e homepage images slotl jpg e homepage images slot2 jpg e homepage images slot3 jpg And the first three items returned by collections are created at e homepage slotli e homepage slot2 e homepage slot3 Where sloti slot2 and slot3 are the shortnames of the collections As with the previously discussed home page view to make this available for selection you must go to the ZMI and add homepage_view to the available views for Document Page http localhost 8080 mysite portal_types Document manage_propertiesForm Then from the home page or whatever page you want to apply this view to choose Homepage View from the Display drop down list Again you may have to access the home page s default page via the Contents tab 239 Download at Boykma Com Custom Page Views and Sectional Styling Clearly there are a number of ways in which to modify the look and feel of page even if you are not a programmer If you are a programmer the sky is the limit Next we ll look at how we can change the look and feel of our Plone site from section to section Sectional styling Here we will learn how to do sectional styling using a CSS hook that Plone gives us for free This type of sectional styling is not used in our theme product except to suppress the breadcrumbs from the home page but we discuss it here as a prelude to the advanced topic of sectional banners that follows it The body
346. ring You generally will not want to embed media into your site s main_template as every page uses that main_template and the media will be reloaded each time you navigate to a different page More likely you will want to embed your media into a homepage _view pt file or some other alternate document view In the case of this site http www resource media org the homepage view pt displays a large block of Flash video framed by navigation resource media ABOUTUS OURPARTNERS CONTACT US explore our services a research EJ resources gt New Communications Initiative work SAN FRANCISCO SEATTLE KALISPELL BOULDER SACRAMENTO BOZEMAN ANCHORAGE SALT LAKE CITY If we then examine the code in its homepage_view pt based off of CMFPlone s default document_view found in mybuildout parts plone CMFPlone skins plone_content we can see that the Flash is embedded directly into the content area of the view lt html xmlns http www w3 org 1999 xhtml xml lang en xmlns tal http xml zope org namespaces tal xmlns metal http xml zope org namespaces metal 262 Download at Boykma Com Chapter 13 xmlns i18n http xml zope org namespaces i18n lang en metal use macro here main_template macros master i118n domain plone gt lt body gt lt metal content fill slot content gt lt tal content macro metal define macro content tal define dummy python request set disable
347. rks of the Plone Foundation Distributed under the GNU GPL license Powered by Plone Valid XHTML Valid CSS Section 508 WCAG 264 Download at Boykma Com Chapter 13 Other features include the following e It works with ZODB blob files e You get playlists for folders or collections e You can put videos in portlets e You can put video content into your content pages with Kupu integration Flowplayer is highly configurable The collective flowplayer package exposes almost its entire configuration through a property sheet in portal_properties allowing you to do things such as applying a custom watermark or a default splash image Properties Undo Ownership Plone Property Sheet at test portal_properties flowplayer properties Interfaces Security Help Properties allow you to assign simple values to Zope objects To change property values edit the values and click Save Changes Value Type title Flow player properties string I player resource collective flowplayer FlowPlay string FT loop boolean FT autoPlay Is boolean IT autoBuffering EJ boolean J usePlayOverlay F boolean IF initialScale fc string I initialvolumePercentage fo LS i int FT useNativeFullScreen F boolean IT showVolumeSlider Is boolean FT controlsOverVideo ease string controlBarBackgroundColor BE d int FT controlBarGloss low string Save Changes Delete Warning be aware that removing title w
348. roduct s guria_images folder assigns a default width and height makes sure that the image doesn t repeat and positions it We ll look at how you can assign different header images to different areas of your site in a few moments Customizing the portal actions The portal actions are the links at the top of the page specifically Site Map Accessibility Contact and Site Setup These links are added to the site via portal actions found at http localhost 8080 mysite portal_ actions site actions manage main in the ZMI Plone already gives you a few of these when a site is created but you can also control them through the ZMI or through your filesystem based theme product 207 Download at Boykma Com General Styling and Templating Changes If you wished to make certain that additional items could be added to the portal_actions area of the page when a theme is installed you could add a file named actions xm1 to the theme product s profiles directory located at mybuildout src plonetheme guria plonetheme guria profiles default The code might contain information such as the following lt object name site actions meta_type CMF Action Category gt lt object name library meta_type CMF Action i118n domain plone gt lt property name title i18n translate gt Library lt property gt lt property name description i18n translate gt lt property gt lt property name url_expr gt string port
349. roduct that is base Plone so that we can get the appropriate formatting specifically DTML support Go to your buildout drill down to parts plone CMFPlone skins plone_styles and open ploneCustom css 2 Copy the formatting that provides DTML support Then go to the custom folder and add a DTML Method to this folder using the drop down list not a file and so on 3 Name it sections css choose add and edit and add the following code The key portion you ll need is this lt dtml with base properties gt do not remove this lt dtml call REQUEST set portal_url portal_url gt not this either DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE section front page visual portal wrapper background color 000 lt dtml withs Just so you can tell if your stylesheet is getting picked up we re adding a temporary style here that looks at the shortname of the home page This corresponds to the URL http www mysite com front page 107 Download at Boykma Com Making Manual TTW Changes or What Not to Do 4 Next we have to add the stylesheet to the registry itself Go to portal css and add a new stylesheet rr Add a new stylesheet ID sections gss Title Condition CSS Media screen rel stylesheet Render type import P Compression type safe Enabled 4 Merging allowed 4 Caching allowed F Add If you now visit the ho
350. ronment While using buildout seems like a lot of overhead for themers and in fact it can seem downright scary Plone has made it easy by distributing the Plone installers with buildout by default Also theme products are now egg based and can be easily installed just like any other Python package generally just by adding a few lines of code to a configuration file We will take advantage of the default buildout generated by Plone although it is possible to create buildout environments specific to your own needs separate from the installer It s not important to understand everything about buildout but witha few key pointers it s relatively simple for themers to get started Much of buildout is documented on plone org but the goal in this chapter is to show themers only the pieces they need to care about Understanding the terminology Before we begin we need to get a general introduction to some of the terminology associated with Plone development Don t worry if the terms sound overly technical in many cases themers do not need to know about these terms in much detail Buildout A buildout is a self contained environment where you can manage the dependencies including Zope and Plone and any third party products or libraries you need and custom code for your project Even if you are not planning on writing any custom code the buildout approach is an easy way to install Plone in a robust well tested manner It is document
351. rs who will be working on the filesystem you ll quickly learn that Plone s file structure is scattered and it s important to be able to access the various pieces and parts quickly this tool doesn t provide that flexibility Ultimately this tool is best for CSS only tasks not for filesystem development of themes As Plone development evolves and the Deliverance and collective xdv tools for theming covered in the last chapter becomes more of a reality this tool may have more applicability E Text Editor As a Windows alternative to TextMate E Text Editor provides much of the same functionality http www e texteditor com for a mere 34 95 It can automate manual work via snippets and it supports Text Mate bundles It gives you access to the full range of UNIX shell tools and lets you extend e with your choice of languages such as Python and Ruby Moreover e users get the luxury of a personal revision control system As with TextMate you can even open up a directory full of files all at once which can be invaluable in Plone development As a Windows based text editor e is an excellent first choice 45 Download at Boykma Com Skinner s Toolkit Notepad As a text pad alternative for Windows users the Windows default Notepad will certainly suffice Notepad does not support formatting of any kind If rich text is copied from a web page and pasted into Notepad then copied again from Notepad before being p
352. ry or via the enable flag in cssregistry xml found in your stylesheet If you intend to layer more than one product on top of a Plone site you likely do not want to disable your stylesheets through the registries as those registries will affect all of the products layered on top If you know that you will not be laying stylesheets from multiple products on top of a Plone site it s probably safe to disable the stylesheets through the registries DTML support The plone3_theme at the time of this writing also generates a main css stylesheet located in the browser folder of your theme product While this may technically work it s not the most practical way to handle stylesheets The stylesheet should be named main css dtml or preferably mytheme css dtm1 It s important to provide support for DTML though it s optional for advanced users It s also a best practice to name your stylesheet after your theme product to distinguish it from other theme products and reduce the possibility of name collision errors Location of files and controlling bloat The theme recipe s placement of a stylesheet file in the browser folder was meant to fit it into the Zope 3 component architecture enabling plug in replacement Speaking for myself those benefits don t justify the complexity of use and I remove the stylesheets and images folders from the browser folder remove the boilerplate that supports this and store all of my stylesheets images and s
353. s enabling 37 Safari WebKit See Safari Web Inspector Scalable Inman Flash Replacement See sIFR sectional styling 240 241 sectional theming 250 Selector Builder 45 setuptools 49 51 sIFR 252 skin layer customization about 95 base_properties changing 99 100 portal skins tool using 95 96 skinning Plone about 14 buildout 14 DIY Plone Style tool used 14 via ZMI 14 slideshow folder about 266 features 266 settings changing 267 static portlet 250 structure expression about 174 working 175 Subversion about 54 features 54 55 T TAL about 164 goal 162 operations 176 structure expression 174 tal condition statement 167 tal content statement 169 tal define statement 166 tal omit tag statement 173 tal on error statement 174 tal repeat statement 169 tal replace Statement 172 tal ttributes statement 165 tal attributes statement about 165 multiple attributes 165 tal condition statement about 167 working 168 tal content statement about 169 working 169 tal define statement about 166 working in Plone 166 167 TALES expressions built in names 176 302 Download at Boykma Com TALES expressions built in names attrs 176 container 176 default 176 here or context 176 modules 177 nothing 176 options 176 repeat 176 request 176 template 176 user 177 tal omit tag statement about 173 working 173 tal on error statement about 174 working 174 tal repeat statement about 169 working 170 171
354. s in its own directory or possibly a compressed archive of that directory Without namespace packages we would have had to distribute one giant Plone package with a top level plone directory containing all possible children for instance plone theme and plone portlets Instead we can break these into manageable eggs The following is a screenshot of a Plone buildout that holds eggs as illustration Notice in particular the eggs named plone app content plone app layout and plone app portlets For themers these are the three most important parts of the Plone tree to be concerned with in addition to the before mentioned CMFPlone product 52 Download at Boykma Com Chapter 3 ly 7 mybuildout gt bin bootstrap py buildout cfg gt 7 develop eggs gt downloads vi eggs gt J archetypes kss 1 2 6 py2 4 egg elementtree 1 2 7 20070827 preview py2 4 egg b five customerize 0 2 py2 4 egg rE F five localsitemanager 0 3 py2 4 egg gt i kss core 1 2 4 py2 4 egg ae F plone app content 1 0 1 py2 4 egg rE gt I plone app contentmenu 1 0 6 py2 4 egg gt plone app contentrules 1 0 5 py2 4 egg gt plone app controlpanel 1 0 4 py2 4 egg gt plone app customerize 1 0 1 py2 4 egg rE gt plone app form 1 0 4 py2 4 egg ae gt plone app i18n 1 0 3 py2 4 eqg rE F plone app iterate 1 0 py2 4 eqg rE F plone app kss 1 2 5 py2 4 egg vE F plone app layout 1 0 5 py2 4 egg ae J EGG INFO
355. s a graphic design tool with certain capabilities in order to take the design files and assemble them into a finished web site In particular layers and the ability to slice pieces of a design and export those pieces are essential Layers allow a themer to hide pieces not needed in a finished CSS theme such as text that will eventually become real HTML on a page Slices meanwhile are the pieces of an overall design that are exported during the layer manipulation process They are the images the end user eventually sees on the rendered page This is different from cropping which actually alters the size of the canvas slices are just pieces of the overall design cut with precision exported and then manipulated with CSS The most commonly used graphic design tools used for web design are Adobe Photoshop Adobe Fireworks formerly Macromedia tool and open source tools such as GIMP It is not generally recommended to use tools such as Adobe Illustrator Corel Draw and other vector based packages Web designs primarily use raster based media meaning that raster images are based on pixels and thus scale with loss of clarity Conversely vector based images can be scaled infinitely without degrading but are typically not appropriate for web design Download at Boykma Com Skinner s Toolkit Adobe Photoshop The most popular tool for processing image files is Adobe Photoshop The files generated for designs are PSD or Photosho
356. s can be a bit intimidating but let s break it down Clearly we see that there is an href tag wrapped around an image Unlike a standard a tag however we see tal attributes href view navigation_root_url 163 Download at Boykma Com Understanding Zope Page Templates and the Template Attribute Language The tal tag indicates that what follows is in the TAL namespace and meant to be handled by the TAL parser This particular fragment will create or replace the href attribute of the current tag with the one pointing to the navigation root url or the index page of your site This navigation root url is known as an attribute of the view object better understood as a characteristic of a page in the context of the current request These characteristics might require some experience to divine but over time you will become more comfortable finding these attributes and using them in your TAL constructs The next piece to look at here is the image src attribute The TAL expression is as follows tal replace structure view logo tag To a user new to Plone it s not obvious what s happening here All we know at this point is that the logo gets rendered by completely replacing the current tag In fact the view s logo_tag comes from the browser view class implementation of plone app layout viewlets LogoViewlet If we read that viewlet code we d discover that it s using the LlogoName property from our base_properties props sty
357. s on the order of what are called skin layers Prior to Plone 3 most customizations performed in the ZMI relied on the concept of a single global namespace such that resources for a given product could not easily be shared between products The global namespace was also a problem because it resulted in name conflicts in products Authors were forced to use convoluted names in their products such as pfg_base_edit which was very un Pythonic This was a fairly limiting idea but made modifying items fast and easy through the web Before Plone 3 Plone used Zope s concept of acquisition and still does but not always This means that when looking up an identifier Plone finds the closest object property or method that matches For example when looking for a logo specific to a given section Plone looks first in the directory for that section and if it does not find it it moves up through the directory hierarchy until it does find one You might think of acquisition as providing behaviors by context A Zope object can acquire any object or property from any of its parents That is if you have a folder called a containing two resources a document called homepage and another folder called B then an URL pointing at http A B homepage would work even though B is empty This is because Zope starts to look for homepage in B doesn t find it and goes back up to A where it s found The reality inevitably is more complex than this but
358. s the portal_actions or site_actions by hand through the ZMI So as an implementer I do not build these areas into my theme product s GenericSetup but I certainly could if I needed to One way to keep things in sync is to have a development instance where clients can work on their content and where the theme can be simultaneously deployed and tested Then the data fs from that instance can be copied over to the production instance This ensures that all manual changes made on the development instance get carried over instantly This process works well because it means that you can feel certain that everything is ready to go with the theme and the content at the moment the site goes live You can create a single buildout to achieve this end containing a base configuration a development configuration and a production configuration for example This is usually an appropriate solution for clients who already have an existing web site or who are undergoing a migration In the event that a client is managing his her content on the production site and not on the development instance moving the data fs in this case is not a good idea as it might result in serious data loss In this case minimal manual configuration and a theme product containing all configuration settings via Generic Setup is generally the way to go 274 Download at Boykma Com Chapter 14 Clearly there s more than one way to deploy a theme product And just
359. search btn gif gt lt this bit will be hidden with CSS gt lt div class searchSection gt lt input id searchbox_currentfolder_only class noborder type checkbox name path tal attributes value view folder_path gt lt label for sSearchbox_currentfolder_only i18n translate label_ searchbox _currentfolder_only style cursor pointer gt only in current section lt label gt lt div gt lt end hiding gt lt div class LSResult id LSResult style s lt div class LSShadow id LSShadow gt lt div gt lt div gt lt div gt lt form gt lt div id portal advanced search class hiddenStructure gt lt a href tal attributes href string view site url search form il8n translate label advanced search accesskey 5 gt Advanced Search amp hellip lt a gt lt div gt lt div gt 217 Download at Boykma Com General Styling and Templating Changes In other words we are removing the default behavior that renders an input field and are instead rendering an actual search button named search_btn gif This image is located in our theme product s skins guria_images folder Moving the searchbox But wait There s more If we double back to our theme product s configure zcml and look at the viewlet manager specified we see that the searchbox is now assigned to the IPortalTop viewlet manager lt The search box gt lt browser viewlet name plon
360. see how these slices were applied Photoshop provides a great deal of power but in general you may only use about 20 of the power it offers You can visit http adobe com to see the tutorials on how to use the Adobe Photoshop effectively Additionally you may want to investigate Photoshop Elements it doesn t allow you to slice images for the Web but for the current price of 139 99 it s still a great tool for many web design activities http www adobe com products photoshopelwin 19 Download at Boykma Com Skinner s Toolkit Adobe Fireworks I have not used Adobe Fireworks in many years not since Macromedia was purchased by Adobe in 2005 At the time I found the interface a little clumsy at times but it did have a basic implementation of layers and slices Over the past few years based on the demos available it appears that the interface has seen some great improvements though it does not have the same power or market share as Adobe Photoshop has However at nearly 400 less than Adobe Photoshop it s a great option According to the Adobe web site Adobe Fireworks CS4 software is used to rapidly prototype web sites and application interfaces and to create and optimize images for the Web more quickly and accurately It is ideal for web designers web developers and visual designers It differs from Photoshop in that Adobe Photoshop software is the industry standard for digital imaging with a broad array o
361. selected or unselected nun audiences current url self context absolute_ url for action in self data audiences append id action id Noyes action url title action title selected current_url startswith action url and selected or unselected description action description return audiences def header self return self data portlet_title 151 Download at Boykma Com Customizing Viewlets and Portlets By using the memoize decorator the return value of the function will be cached Thus calling it again does not result in another query See the plone memoize package for more memoize def _data self context_state getMultiAdapter self context self request name u plone_context_state return context _state actions get audience navigation None class AddForm base AddForm form fields form Fields IAudienceNavigationPortlet label u Add Audience Navigation portlet description u This portlet displays the audiences that have been entered into the portal actions tool def create self data assignment Assignment form applyChanges assignment self form_ fields data return assignment class EditForm base EditForm form fields form Fields IAudienceNavigationPortlet label u Edit Audience Navigation portlet description u This portlet displays the audiences that have been entered into the portal actions tool Add the in
362. ship with Plone 208 Download at Boykma Com Chapter 10 SITE ACTIONS portal siteactions background color 56492e padding 5px 0em text align right position absolute width 534px margin left 199px margin top 1px html portal siteactions margin left 5px margin top 0px html portal siteactions margin left 9px margin top 0px portal siteactions li border none portal siteactions lia color fff border width 0px 1px 0px 0px border style solid border color fff padding right 15px padding left 15px text transform uppercase portal siteactions li last action a border width 0 portal siteactions li a hover border width 0px 1px 0px 0px border color fff background color transparent portal siteactions li last action a hover border width 0 209 Download at Boykma Com General Styling and Templating Changes The portal siteactions spans the width of the page and therefore we need to set a background color for the entire container Some additional padding is also necessary and the items are set to align to the right of the page Each individual list item link is set to have a one pixel solid white border on the right side They also have padding and are set to display in all uppercase To fix an Internet Explorer 6 problem with positioning we insert this hack html portal site
363. some extra bling and interactivity to your site Next we will look at how to deploy a Plone theme for a client and how to give back to the Plone theming community 272 Download at Boykma Com 14 Deploying and Contributing Themes We have covered most of the major pieces involved in creating a theme product As we ve seen this can be a complex and delicate process at times and there are a lot of moving parts involved This chapter will cover the steps and best practices involved in deploying your theme on a server as well as the process for releasing your theme into the wild for other people to enjoy and install on their Plone web sites Deploying your theme on a server We re not going to cover hosting here as that falls under the sysadmin umbrella but refer to http www plone net or plone for ideas on hosting companies We re also going to skip over some more system administration type tasks and focus instead on the theming aspect of taking a site live The typical process for creating a theme involves the following Create a Subversion repository to hold your theme product Create a theme product using the paster recipe Add the theme product to the repository Pon Pp Add a development site s data fs to your local instance This is only for client specific web sites where the site structure will affect the design implementation If you can theme a vanilla Plone site while keeping in mind the use
364. span i18n translate txt_copyright id copyright gt lt span i18n name bef link gt Copyright 2009 lt span gt lt span gt lt div gt It s considered good to the Plone open source community to keep the Plone branding for viral marketing of Plone and we also keep the copyright That s all we need to do here We ve changed ZCML so we need to restart our Zope instance after this step Altering the navigation Next we need to do some basic styling of the navigation It s wise at this point to drill down a bit into the navigation on the site so that we can see how the sub navigation will appear We don t need to modify the behavior of the navigation so we ll focus only on the CSS styling Most of this styling can be grabbed from CMFPlone s navtree css located at mybuildout part plone CMFPlone skins plone _ styles and adjusted as necessary 1 First we apply a background color that is different from what is specified in the base portlet styling and we suppress the portlet header portletNavigationTree padding 0 229 Download at Boykma Com General Styling and Templating Changes background color 9d8d6b portletNavigationTree portletHeader display none 2 Next we focus on the individual items in the menu and alter the padding and margins We also remove all but the bottom border and apply a color to the hyperlinks using an important declaration Then we make all of the hyperlin
365. ss based or template based viewlet Open common py and configure zcml file in plone app layout located at mybuildout buildout cache eggs plone app layout some version number plone app layout Searching for pathbar in configure zcml gives us lt The breadcrumbs gt lt browser viewlet name plone path_bar manager interfaces IPortalTop class common PathBarViewlet permission zope2 View gt 221 Download at Boykma Com General Styling and Templating Changes This tells us that we are working with a class based viewlet We copy this code into our theme product s browser configure zcml file and modify it as follows lt The breadcrumbs gt lt browser viewlet name plone path_ bar manager plone app layout viewlets interfaces IContentViews class viewlets PathBarViewlet permission zope2 View layer interfaces IThemeSpecific gt Notice that we are providing a dot delimited path back to the Icontent Views manager not to the IPortalTop viewlet manager normally used in base Plone Additionally we want to subclass the PathBarViewlet class because we want to alter the divider normally seen between breadcrumbs to make them more visually appealing We copy the following two lines from plone app layout s common py into our theme product s browser viewlets py file class PathBarViewlet ViewletBase index ViewPageTemplateFile path_bar pt We then modify the lines
366. ssic portlet is the following we_do pt which calls a portal_action CMF category named we_do that contains portal_actions within it that drive the user to a given URL Make sure you create the category and a few actions within it Also make sure you add a title and description to each portal_action Here is an example of one of those portal_actions CMF Action at wec wec portal_actions we_do build partnerships Properties allow you to assign simple values to Zope objects To change property values edit the values and click Save Changes Name Value Type Title Build Partnerships string Description text 118n Domain string URL Expression string globals_view navigationRootUrl whz string Icon Expression string Condition Expression string Permissions Undo changes multiple selection Use Database Methods Use Factories Use external editor Use mailhost services 0 Use version control a View y Visible F boolean Save Changes Delete The portlet simply renders these portal actions as a drop down list within a basic portlet structure header footer portlet Item CSS classes lt html xmlns tal http xml zope org namespaces tal xmlns metal http xml zope org namespaces metal i118n domain plone gt lt body gt lt tal portlet metal define macro portlet define actions actions we_do nothing condition actions gt lt dl class portlet id portlet we do gt lt dt cl
367. stall txt file to distribute along with your theme You should not assume that anyone downloading your theme product will know how to install a theme or that he she will have the buildout eggtractor extension installed to make the process easier This theme has excellent documentation and is a good example to follow http plone org products webcouturier hosting theme Configuration Before doing anything you should always take a snapshot of the development site using portal_setup in the ZMI This gives you the opportunity to track backwards to a working version if something goes wrong during the go live process The next step then is to install the theme product on the instance that will be the production site Next you can add any necessary content that is needed to support the design As part of content creation you will also have to add any new views to portal_types Once you ve added these views remember to activate those custom views on the development site using the Display drop down menu 275 Download at Boykma Com Deploying and Contributing Themes You might need to make changes in the portal_actions area as well depending on your work processes Typically you want the portal_actions and other similar pieces to be the part of your theme product in order to avoid rework but you may choose to make these changes manually Thanks to a bug in GenericSetup now fixed the ordering of viewlets doesn t always
368. styling 240 theme product creating 181 182 theme product installing 188 theme product structure altering 183 web site contents customizing 191 Plone theming approach selecting 284 approaches 283 future 282 goals new approach 281 new approach 281 prerequisites 285 tools 285 Plone theming manual 12 Plumi about 271 272 features 272 portal skins tool about 95 custom skin layer 96 97 custom skin layer advantages 98 portal_actions configurations moving into filesytem product 93 94 portal_view_customizations about 157 158 using 157 159 portal actions Plone site customizing 207 portlets about 147 148 classic portlets using in theme product 155 configuring 147 Plone 3 portlets modifying in theme product 148 Zope 3 portlet creating 150 152 portlets Plone site customizing 224 prerequisites Plone theming 285 Products EasyAsPilE 248 property sheet 99 PyPI See Python Package Index Python egg 51 Python package 51 301 Download at Boykma Com Python Package Index 52 Python path 51 Python traceback See traceback Q qPloneSkinDump 250 Quintagroup 245 R Resource Registries about 104 features 104 rule file 292 ruleflow See Drools Flow rules lt append gt 294 lt copy gt 295 lt drop gt 295 lt prepend gt 294 lt replace gt 293 about 293 overview 293 S Safari tools about 36 Safari Web Inspector 37 Safari Web Inspector about 37 activating 37 features 38 WebKitDeveloperExtra
369. t manager itself and we re happy to use what the interface provides us by default The next line for the class declaration means that the viewlet s class is exactly as before we re just providing the full dot delimited path back to the original class Finally we include our layer definition for IThemeSpecific so that our changes only affect the current theme product Remember this line is crucial to making sure that your theme product does not step on other themes in the same Zope instance As a quick side note if we opted to subclass the viewlet s Python code the code might look something like this lt The personal bar gt lt browser viewlet name plone personal_ bar manager plone app layout viewlets interfaces IPortalFooter class viewlets PersonalBarViewlet layer interfaces IThemeSpecific permission zope2 View gt This means that our theme will provide a PersonalBarViewlet class probably the one that has been subclassed from plone app layout viewlets common PersonalBarViewlet then modified in your theme product s viewlets py file located in the browser folder For the purposes of this section we re not going to worry about this just yet Here all we want to do is assign the viewlet to a different viewlet manager not change the behavior or any template that might be associated with the viewlet 136 Download at Boykma Com Chapter 7 Also if you were working with a template only v
370. t Plone s problem is less about shoe horning and more about having a lot of concepts that need to be understood before the real progress can be made Additionally Plone currently provides more than one method of accomplishing theming tasks which can cause confusion Those various methods are steadily being unified and simplified and the goal of this book is to demystify the complexity of Plone with regards to theming Larry Garfield from drupal followed his previous comment by saying that Drupal 6 includes a heavily rewritten theme layer that is a lot nicer to work with Plone doesn t currently have an abstracted theming layer though there are certain tools that are available to themers that will be discussed in this book Moreover the future of Plone is Deliverance and collective xdv non Plone specific tools that will turn the theming process into a nearly CSS only experience Deliverance and collective xdv will position Plone over with the Drupals and WordPresses of this world and with much greater power It s worth spending time with Plone especially once you get a glimpse at the power under the hood The real potential is in the value to the content manager Heavyweight blogs such as WordPress or lightweight CMS s such as Drupal simply don t offer the necessary flexibility or ease of use nor do they have the same level of extensibility If you can build a Plone theme you ll appreciate the real value inherent in Plone and building a
371. t bundle found at http plone org products textmate support that was developed by some of Plone s core developers It enhances TextMate s already existing support for Python XML X HTML CSS and Restructured Text by adding features aimed specifically at the modern day Zope and Plone developer For the geeks in the audience the bundle s features include Doctest support restructured text with inline Python syntax and auto indent of python code pdb support for debugging ZCML support no more looking up directives with our handy and exhaustive snippets and a ZPT syntax that marries the best of both worlds XML strictness with the goodness of TextMate s HTML support This bundle plus TextMate s other capabilities make switching to developing for Plone ona Mac a good idea any day As well as assigning a single key equivalent to a bundle item it is possible to assign a tab trigger to the item This is a sequence of text that you enter in the document and follow it by pressing the tab key This will remove the sequence entered and then execute the bundle item TextMate is full of hot keys and features in general yet it s surprisingly compact Thankfully the documentation is thorough TextMate is a dream for themers and programmers alike For those who are still new at CSS another tool might be a good place to start but for power users TextMate is the primary tool of choice CSS Edit CSS Edit not to be confused with CSS Manager a
372. t documentation attrs a dictionary containing the initial values of the attributes of the current statement tag This is Uncommon here or context the object to which the template is being applied container the folder in which the template is located template the template itself request the publishing request object which includes form data query strings and typical web server HTTP variables 176 Download at Boykma Com Chapter 8 e user the authenticated user object e modules a collection through which Python modules and packages can be accessed Only modules that are approved by the Zope security policy can be accessed The names root here container template request user and modules are optional names supported by Zope but are not required by the TALES standard This list is presented with the purpose of not diving in too deep but with the objective of showing where some of these words fit in if you happen to see them in your page templates Most of these with the exception of here and request should be used only lightly in your templates It s possible to write extremely complex logic in TAL TALES but it s a bad idea Remember that the purpose of a templating language is to separate logic from presentation Use TAL and TALES to set conditions for presentation and for dynamic replacement Move your programming and logic into Python and Python scripts so that you can keep your tem
373. t we have our development environment set up let s create and install a theme product and get started 61 Download at Boykma Com Download at Boykma Com Create and Install a Theme Product The next steps are to learn how to create a vanilla theme product and install it so that we can begin customizing it Generating your theme product using paster Now that we have a working buildout and working instance of Plone we will generate our skeleton theme product using paster As mentioned in the previous chapter installing Plone gives us paster by default If you don t get paster by default follow the instructions in the previous chapter to install easy install and ZopeSkel on your system Newer installers will be getting paster under the control of buildout so that paster is always available at bin paster from your instance directory ZopeSkel will also be under the control of buildout so that it is updated when buildout is run in newest mode This means you ll always be able to get the most recent updates to paster and ZopeSkel Available templates A number of paster templates not the same as page templates are available to Plone developers for developing different types of Plone products including themes To see the available templates you can run paster create list templates Download at Boykma Com Create and Install a Theme Product This command will give you an output like the following
374. tabs category This category contains a single action that causes a Home tab to display at the top of a default Plone site You might see additional items showing next to the Home tab but those items can also be controlled by the navigation settings If you alter the navigation settings in plone control panel to disable Automatically Generate Tabs only the tabs defined in the portal tabs category will display In this screenshot the only true portal tab action is the Home tab whereas the Users News and Events tabs are navigational items content made available by a default Plone installation which are controlled by the Navigation configlet located in the Site Setup area User category This category contains all of the actions that display in the personal tools area of your site 2 vedaw Log out 87 Download at Boykma Com Making Manual TTW Changes or What Not to Do Many of these items generally only display when the user is logged into the site Logged out users will also see a login option in this area Many of these are not enabled by default These actions include e A link to the logged in user s Member folder http localhost 8080 mysite dashboard where mysite is the name of your Plone site e A preferences link http localhost 8080 mysite plone_ memberprefs_ panel e A login link http localhost 8080 mysite login_ form disappears once the user is log
375. tag in CMFPlone s main_template has an HTML class attribute that allows you to theme different sections of the site with different styles All you do is use the prefix of section and then the shortname of the item in the root folder In main_template pt there is a script that generates on the fly a class for each section of the site The script is called getSectionFromURL lt body tal attributes class string here getSectionFromURL template template id dir python test isRTL rtl ltr s The rendered HTML it creates looks like lt body class section news section news aggregator template folder_summary_view dir ltr gt lt div id visual portal wrapper gt What this in effect tells us is that we are in the news folder which contains an object with a shortname of aggregator the default collection object that pulls in news items Using CSS we can hook onto the sect ion news class In your stylesheets prefix the style you want to be different for that section with section foldername replacing foldername with the id or shortname of the folder in question For example this code would change the background image for the News section of your site section news background image url amp dtml portal_url gradient2 png background repeat repeat x 240 Download at Boykma Com Chapter 11 Here are a few additional examples of how it might be used First we assign a property to the glo
376. tells you why they re slow based on the rules for high performance web sites and gives you the information you need to optimize your sites further YSlow analyzes any web page and generates a grade for each rule and an overall grade If a page can be improved YSlow lists the specific changes to be made To activate it click on the YSlow icon at the bottom of your browser The Bullitt Foundation Home About Grantmaking Process Grant History Resources leadership and civic igement OUR NEW DIRECTIONS FAN im Vi F 3 inspect GE Stats Components Tools Help Q oo ar Console HTML CSS Script DOM Net YSlow Options Performance Grade D 69 Expand All Collapse All gt 1 Make fewer HTTP requests gt 2 Use a CDN 3 Add an Expires header gt 4 Gzip components 5 Put CSS at the top 6 Put JS at the bottom 7 Avoid CSS expressions 8 Make JS and CSS external D 9 Reduce DNS lookups 10 Minify JS 11 Avoid redirects 12 Remove duplicate scripts 13 Configure ETags S gt werann gt gt r rrr YSlow will then grade your web site based on its performance against several components Clicking on any rule will take you to the page that contains suggestions on how to improve in that area A lower grade on something like Make fewer HTTP requests could possibly be solved by using sprites instead of multiple images on a page for example 31 Download at Boykma Com Sk
377. tends to be a bit of a memory hog and can be a little slow Additionally you can t open up a directory containing multiple files which means it will slow themers down significantly In investigating it for this chapter it was not possible to open pt page template files using Dreamweaver which is a deal breaker as page templates are certainly part of the theming process It s not known if this is merely a configuration error but several attempts at configuring Dreamweaver to open pt files failed All in all Dreamweaver is intended for editing CSS and HTML files and without page template support it has limited use for Plone themers 46 Download at Boykma Com Chapter 2 Summary In this chapter we have learned What graphic design tools are appropriate for theming a web site and why What browser add ons are available for helping to debug a web site s CSS JavaScript color palette and more How to validate your CSS against W3C conventions What text editors are appropriate when developing for Plone and why Now that you have the tools available to approach the skinning process we will next address the dependencies needed to run Plone create a development environment generate a base theme product and get an understanding of the overall file structure in preparation for making deeper modifications 47 Download at Boykma Com Download at Boykma Com Setting up your Development Environment Th
378. ter Generally speaking most Plone 3 themes are based off of this default configuration and build onto it or deviate from it as needed It s important to point out that ordering a viewlet is not the same thing as registering a viewlet for a viewlet manager Ordering is handled via a GenericSetup profile whereas registering is handled via ZCML configuration So by modifying the code in our theme product s viewlets xm1 we can order the items on a Plone page but actual registration of a browser resource happens in configure zcm1 as described above and the configure zcml file is ultimately the file that tells Plone what viewlet manager a viewlet belongs to In this example we want to move the logo viewlet above the searchbox within the plone portalheader viewlet manager We are not trying to display or order the logo in a new viewlet manager CMFPlone s default viewlets xm1 configuration for the portalheader viewlet manager looks like this lt xml version 1 0 gt lt order manager plone portalheader skinname Plone Default gt lt viewlet name plone skip_links gt lt viewlet name plone site actions gt lt viewlet name plone searchbox gt lt viewlet name plone logo gt lt viewlet name plone global_ sections gt lt order gt lt object gt 138 Download at Boykma Com Chapter 7 In our own theme product plonetheme yourtheme profiles viewlets xml you would insert the following cod
379. ter we have learned e What elements comprise the component architecture for a theme product e How to make minor adjustments to a Plone site through the ZMI and portal_actions and extract those changes into a filesystem product using Generic Setup e How skin layers work and how acquisition affects images and page templates e How to work with images and page templates in the custom folder and on the filesystem e How to work with stylesheets and JavaScripts in the custom folder and on the filesystem The real message of this chapter I am trying to communicate is that through the web development is evil and it should not be used if you can help it If you do TTW development of any kind you should always bring your changes out to the filesystem and wash your hands twice when you re done Now using what you have learned in this chapter you should next be able to learn about Zope 3 components and how they differ from skin layer objects At this point you are ready to move away from changes made through the web and focus only on filesystem development 110 Download at Boykma Com Working with Zope 3 Components This chapter is probably the most technically challenging chapter that you ll read in this book but read it with the objective of getting a basic understanding of Zope 3 and the moving parts you ll need to know about You ll generally need to only understand where to find the pieces you require where to put them a
380. terface for our browser page In our theme product in browser interfaces py we need to insert the following code from plone theme interfaces import IDefaultPloneLayer class IAudienceNavigationLayer IDefaultPloneLayer Marker interface that defines a Zope 3 browser layer nun Create a page template for our view Next we want to create a page template using TAL and HTML and a tiny snippet of Python to render these items We will call it audiences pt and place it in our browser folder Notice that it iterates over a series of audience items to output an unordered list lt dl class portlet portlet audience navigation gt lt dt class portletHeader tal content view header gt Information for lt dt gt 152 Download at Boykma Com Chapter 7 lt dd class portletItem tal repeat audience view audiences gt lt a tal attributes class string audience selected audience audience id href audience url title audience description tal content audience title gt Link Name lt a gt lt dd gt lt dd class portletFooter gt lt dd gt lt dl gt Write the GenericSetup steps to create the new portlet Next we need to create a file called portlets xml and place that in our theme product s profiles default folder We will populate it with the following code lt xml version 1 0 gt lt portlets gt lt portlet addview onenw audiencenavigation AudienceNavigation title
381. the important pieces that give you the information you need configure zcml an associated py file and occasionally an associated pt file as defined in the py file Modifying Plone 3 portlets in a theme product If we wish to modify only the rendering and not the adding or editing of a Plone 3 portlet the portletRenderer ZCML directive is used to replace the render method on an existing portlet renderer class with a ViewPageTemplateFile associated with a different template on the filesystem Portlets are rendered by the port letRenderer directive using ZCML written as lt plone portletRenderer gt The port letRenderer directive can register either a custom version of the whole Renderer class with class or it can register a custom template only template for a given portlet 148 Download at Boykma Com Chapter 7 For example in this theme product s browser configure zcml file we see lt configure xmlns http namespaces zope org zope xmlns browser http namespaces zope org browser xmlns plone http namespaces plone org plone i18n_domain plonetheme audubonportland gt lt overriding the portlets gt lt include package plone app portlets gt lt plone portletRenderer portlet plone app portlets portlets events IEventsPortlet template events pt layer interfaces IThemeSpecific gt We must explicitly include the plone app portlets package in ZCML processing bef
382. the same thing as content that will eventually end up on your site they are specifically images that are used to build your theme One image that is considered special in Plone is the logo jpg image The viewlet that controls the logo references the base_properties code that looks for a file named logo jpg If you want to use a logo gif image you have to modify base properties to look for a file with the gif extension If you wish you can modify the viewlet for the logo to use different logic We ll look at our options here in Chapters 6 and 7 and explore how to modify page templates to make the logo viewlet work differently if you wish For now try to override the standard Plone logo through the web To do this through the ZMI go to the custom folder and choose Add image from the drop down list Now upload the image named logo jpg Refresh your site to see the new logo and clear your cache if necessary This isn t a good practice but you could in fact upload a gif or png file name it logo jpg and it would work That s because Zope and Plone don t determine the MIME type of a ZODB object from its filename extension When you upload an image Zope determines its MIME type and stores that as a property of the object That information is used to determine the MIME headers which are sent to the browser when the image is requested On the other hand the skin layer resources that we put on the filesystem as part of a theme produ
383. their own folders as they are not folders in the traditional sense they are filesystem directory views or folders that provide a window into a particular folder on the filesystem The custom folder in contrast lives in Plone s database and its contents cannot be found on the filesystem The most commonly modified files available from portal_skins include plone _images logo jpg and plone templates main_template pt These are considered non Zope 3 templates If you don t see the item you want to customize located in portal_skins it s likely a Zope 3 style browser layer element that will most often need to be altered on the filesystem We will cover that in the next chapter During skin development the custom folder can be an area of great frustration especially if more than one person is working on a given site TTW instead of on the filesystem If you don t see your changes taking place make sure you are running your Zope in foreground mode and check to make sure your portal_css is in debug mode and that your custom folder is cleaned out or not conflicting And at the end of a project you should always clean out your custom folder and extract files found there into your theme product to keep all components safe on the filesystem and in Subversion In the world of Plone 3 this is especially important To save yourself pain it s best to avoid TTW changes in the custom folder completely and work entirely on the filesystem 98
384. thon getDateConstraintsForSearchResults bind container container bind context context bind namespace bind script script bind subpath traverse subpath parameters title if not hasattr request start or not hasattr request end return else start request start query 0 nd request end query 0 format a tb td SY start start strftime format end end strftime format if start end return start start end else return start start end end If you don t know the format in which Python scripts and other scripts should be extracted you can optionally extract files from your custom folder by using the FS Dump Plone product http plone org products fsdump This tool is helpful for exporting any contents from the custom folder to your own machine not just from Python scripts It can be especially useful if you are exporting a lot of items but not images Using stylesheets and the CSS resource registry tool Now that we know how to manipulate the menus and tabs on our site and to modify images and page templates in our custom folder we will look at how to add extra stylesheets or JavaScripts The principles here also apply to KSS files which we will not cover here Advanced users may also have need of KSS stylesheets Kinetic Style Sheets for managing AJAX like behavior but we will not cover this or jQuery in this book 103
385. troduce some patterns that you can follow to get used to the concepts There are a lot of moving parts and it s a wild ride so hang on Install your theme product Assuming you have followed the instructions from the previous chapter you have already installed your Plone theme on your Plone site and put your stylesheets in debug mode If at this point your theme product is installed and you can view your site at http localhost 8080 mysite where mysite is the name of the Plone site you have just created you are ready to start customizing your theme It may help to make a small change to your stylesheets before installing the product so that you can verify that your theme product did indeed get installed This can be accomplished by editing the mytheme css file found in the skins plonetheme_ mynewtheme_styles folder in your filesystem product For example you may wish to change the body background color body background color 000 General guidelines during development At this point we need to look at the steps needed to make sure changes to your site can be seen Theming a Plone site requires modifying ZCML XML TAL and Python code in addition to simple CSS changes and each change requires a different set of steps to activate Specifically the rules for restarts reinstalls imports refreshes are as follows e To be able to see your changes immediately you should rerun your site in foreground mode using
386. type safe ie 106 Download at Boykma Com Chapter 5 Note the checkbox on the left that allows you to turn the stylesheet on or off the conditional field that accepts a Python statement and the CSS Media field that tells you the media for which the stylesheet should apply which is usually empty or all Other possible values are screen print and so on If you scroll down the list you should see all of the default Plone stylesheets listed You also see up down arrows that allow you to order the items in the list The stylesheet that takes the most precedence should appear at the bottom of the list generally ploneCustom css which is typically used when you want to modify items TTW without delving into the main stylesheet being used for your theme This is typically the file that you use to add temporary styles that will later be integrated into a site specific stylesheet such as mytheme css By default it is empty It can be found in portal_skins plone_styles Starting with CSS in the ZMI After you add a stylesheet to your site via the custom folder you must then tell Plone that it exists In this example we ll add a stylesheet named sections css and add some code to tell Plone that we are looking at the home page so that we can style it differently than the other sections of the site This is a slightly advanced topic but a common use case 1 First of all we want to open a stylesheet from CMFPlone the p
387. u will have a working content management system in minutes As of Plone 3 1 2 Plone is by default installed using a system called buildout which we will cover later It s more complex than WordPress s Famous 5 Minute Install but installing Plone and add on products is simple once you get used to the process Plone is easy to use Plone s development team has usability experts who have made it simple for content managers to add update and maintain content Plone s UI team is constantly looking for ways to simplify and improve the end user experience and founder Alexander Limi is on the forefront of this charge I ve had the joy of having content managers from completely different continents grasp the concepts of how to manage content in Plone without problem and the average web savvy user will have the same experience Plone is secure While the Drupal platform may have much to offer to end users as a PHP based CMS it has many security problems that Plone does not have Plone has had only one security related patch in the last two years whereas Drupal has had several in the last few months The difference is that Plone runs on Python which is markedly safer Having a secure CMS is critical and Plone is clearly the frontrunner here Plone provides international support The Plone interface has more than 35 translations right to left support and tools such as LinguaPlone for managing multilingual content Plone is compliant Plone
388. uage tal replace Statement Typically this expression is used when you don t want the whole tag and its contents not just the contents to be replaced A basic example is here lt p tal define myvariable string hello world gt Spacestation here lt span tal replace myvariable gt This is invisible lt span gt lt p gt When this code renders it becomes lt p gt Spacestation here hello world lt p gt In other words the tal replace expression supplants the entire lt span gt lt span gt statement and fills it in with the value assigned to myvariable This helps you avoid cluttering your output with semantically meaningless tags that you ve used just to mark dynamic replacements How this works in Plone An example of when this might be used in Plone is in CMFPlone skins plone_ templates main_template pt In this template you will find several lines like this lt div id portal top i18n domain plone gt lt div tal replace structure provider plone portaltop gt lt div gt This code states that within the id named portal top we want to replace a lt div gt with the contents of whatever provider plone portaltop gives us This provider is actually the viewlet manager that controls the area known as plone portaltop more on this in a bit If we look at our viewlets xml located in CMFPlone profiles default file we will see that in a default Plone site the above statement in main_temp
389. ude other files Three configure zcm1 files are provided by default in a given theme product one in the root of your plonetheme mytheme folder one in your mytheme folder and one in your browser folder 114 Download at Boykma Com Chapter 6 The configure zcml file found in your theme product s root contains only the following code lt include package plonetheme mytheme gt In other words it is telling Zope that a package named plonetheme mytheme exists and can be picked up and used An example configure zcml file in the plonetheme mytheme plonetheme mytheme folder for a Plone theme looks like this lt configure xmlns http namespaces zope org zope xmlns five http namespaces zope org five xmlns cmf http namespaces zope org cmf i18n_domain plonetheme mytheme gt lt five registerPackage package initialize initialize gt lt include package browser gt lt include file skins zcml gt lt include file profiles zcml gt lt configure gt All this code means is that your theme product uses a few different XML namespaces zope five cm defines a domain for applying internationalization i18n translation hooks registers your package with Zope Five connects to your browser folder and two files named skins zcml and profiles zcml You ll rarely need to modify this file Meanwhile the default configure zcml file found in your theme product s browser fol
390. uler to help accurately align and measure objects on your pages e Find the style rules used to set specific style values on an element Right clicking on a style rule will allow you to trace the rules to a specific CSS file if one is found e View the formatted and syntax colored source of HTML and CSS The Developer Toolbar can be popped up within the Internet Explorer browser window or opened as a separate window If you are using a PC to test your sites VMware parallels or a Windows emulator you should download the Toolbar from http go microsoft com fwlink LinkId 125120 install it and restart IE You can then click the Developer Toolbar icon in the command bar to display or hide the Developer Toolbar Alternately you can open the View menu and then use the Explorer Bar menu In Internet Explorer 7 open the Tools menu and then use Toolbars Explorer Bars to display or hide the Developer Toolbar USCAN ERE ENE CLIMATE ACTION NETWORK MEMBER CENTER ABOUTUS MEW JORGE DATABASE CLIMATE CHANGE 101 morrormcs HR SOM rch Resource Database d reporta polls press releases B News a Recent Resources Ej West seattle Blog x pl R A Mi int Debis view eine mige Cache Tooke vabimo zal amp ON clssevnusilear keine soe before wragper table a 3 z Atrtete K Nee ME S TARE diapertabcenne gt 2 x Current 3ye Nme Vale Property Curent Value 4 sk Montana Cod Plant Deferred border bottomrcolor 2000
391. umbs are not present as they are suppressed using CSS styles Additionally the center page content is not yet populated 191 Download at Boykma Com Creating Installing and Tweaking our Theme To make the site look more realistic we need to adjust our viewlets as well as add and suppress some content and portlets on the web site to support the design First let s adjust the viewlets on the site by going to http localhost 8081 mysite manage viewlets We have to do this because the Guria theme does not use ordering to organize the viewlets At the time that the theme was created ordering was not functional but should be now Using the up arrow next to the searchbox with the orange Go button you can move the viewlet directly below the viewlet called ViewletManager plone portaltop plone app layout viewlets interfaces IPortalTop viewletmanager plone portaltop plone app layout viewlets interfaces iportaltop viewlet plone header OE viewletmanager plone portalheader plone app layout viewlets interfaces iportalheader viewlet plone skip_links 0 Es viewlet plone site actions 1 Ej iy hoe SITEMAP Accessipiity CONTACT SITESETUP viewlet plone searchbox 2 FE rs earch Site Search viewlet plone logo 3 amp E eT TN Fa we 7 N was 2 gt D a viewlet plone global_sections 4 BEN ho
392. ur site is configured e cssregistry xml Contains the information needed to install stylesheets for a filesystem product e jsregistry xml Contains the information needed to install JavaScripts for a filesystem product e viewlets xml Contains ordering hiding moving information on viewlets for a product e portlets xml Contains information that defines new portlets or portlet managers or modifies existing portlets for a product If we open the cssregistry xml file for the above example a project called ace we see the following code lt xml version 1 0 gt lt object name portal_css gt lt stylesheet title id ace css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt lt object gt In this case the file states that upon install a stylesheet called ace css will be imported into the CSS registry as a screen type meaning that it will be accessed when the site is rendered The additional information is not necessary to understand here but it might be helpful to investigate this topic more deeply as your themes become more advanced Essentially these variables are related to how your stylesheets are constructed for delivery CMFPlone the default Plone product now located in your buildout in the buildout cache or within the eggs directory with a version designation such as Plone 3 3b1 py2 4 egg also contains a profiles
393. user has certain permissions For advanced information on what these registries do refer to the ReadMe file provided with the Resource Registries product that ships with Plone http plone org products resourceregistries Common conventions for using stylesheets in Plone Note that some of the information in this section is somewhat subjective but also greatly debated by the Plone theming community As a result there may be a bit of flux in this area in the future and room for interpretation When a new Plone theme product is created using paster you are given the option to override Plone stylesheets if desired Overriding base Plone stylesheets When a new Plone theme product is created using paster you are given the option to override Plone stylesheets if desired 104 Download at Boykma Com Chapter 5 As someone who has themed more than 100 Plone sites I recommend that you always choose False and not override the Plone stylesheets This is a personal preference but it means that some of the CSS that controls layouts deep in the guts of Plone are styled adequately and you don t need to restyle those more delicate bits If you do prefer to rewrite your CSS from scratch instead of building on top of Plone s default stylesheets stick with the empty stylesheets It may not seem elegant but it is the most correct way to override stylesheets You may have noticed that you can disable stylesheets in the CSS regist
394. using Deliverance later Tools and prerequisites Before we get started make sure you have the following software available e The latest version of Plone Plone 3 3 or newer for the best experience e The latest version of Firefox available for all platforms http www getfirefox com e The Firebug add on for Firefox http getfirebug com e Your text editor of choice e Access to the terminal or command line on the system you are working on e A network connection to make sure buildout can download its packages you can work around this by downloading the packages separately if you don t have a network connection but it s outside of the scope of this tutorial Consult the buildout documentation if you need to download offline packages http www buildout org And again if you re reading this in printed form make sure you check the online version at http plone org theming for the latest version recommendations as versions and buildout dependency URLs may change slightly over time Got everything set up Great let s get down to business Adding XDV to your Plone instance The first step is to add collective xdv to our Plone setup We will assume that you have a passing familiarity with Plone s configuration build system buildout http www buildout org if not don t worry it should be pretty simple to follow along even if you don t I also assume that you already have Plone and Firefox with Firebug
395. using a binary installer you now have a buildout configured version of Plone sitting on your operating system and you re ready to generate a theme add on product First though let s examine the buildout filestructure to see what makes development environment so special If you open your buildout you will see a tree structure similar to the following As time goes on the structure may change slightly 58 Download at Boykma Com Chapter 3 Plone Python 2 4 buildout cache eggs downloads mybuildout bin buildout cfg develop eggs parts products readme txt src var logs filestorage Zope 2 10 7 final py2 4 1 Q Windows users please note that we ll be using a forward slash to separate the parts of a file path Please mentally replace these with backslashes This structure has evolved a bit in that the eggs and downloads subdirectories are moving to a buildout cache where they may be shared among several instances Let s look at the directories provided by buildout bin Contains various executables including the buildout command and the instance Zope control script for starting Zope bin instance fg runs your Zope instance in the foreground for debugging purposes parts Contains code and data managed by buildout In our case it will include the local Zope installation a buildout managed Zope instance and Plone s source code In general you should not modify anything in this directory
396. velopment Environment Download Plone The first real step in getting set up is to download and run a Plone binary installer http www plone org products plone If you have a newer installation all dependencies should be installed by default your buildout is already bootstrapped bootstrapping is a command that makes your buildout usable and you re ready to start As of Plone 3 2 all of the installers are generally consistent and will Sy install most of the dependencies required for each operating system Q That means that much of what you read next about the dependencies can be largely ignored but we ve included the information here for your edification If you are using an older Plone installation or you wish to create a standalone buildout you will need to create one via the command line bootstrap it and possibly install a few dependencies You can find instructions on this here http plone org documentation tutorial buildout creating a buildout for your project All of the Plone installers come with buildout since Plone 3 2 while the Unified Installer for Linux has included buildout since Plone 3 1 The binary installers have no dependencies at all They install everything you need With 3 2 this includes easy install setuptools ZopeSkel and all their dependencies The Unified Installer though has several dependencies All of those dependencies are GNU build tools that are typically present on any Linux BSD o
397. vely conduct browser testing GloWorm A commonly mentioned Plone add on is the helpful GloWorm written by the WebLion team It can be downloaded from here http plone org products gloworm GloWorm is an inspection tool that can be useful when doing theming because it helps you to sniff out different elements on a page For newer Plone themers in particular this is a very handy tool It provides information such as e Archetypes field information e TAL statements tal defines tal attributes tal content tal condition e Viewlet registration information e Inline editing of viewlet templates e Viewlet manager information e Reordering of viewlets e Show hide viewlets e Tree structured view of all viewlet managers and viewlets included in a page The dependencies are outlined on the product page mentioned before along with installation instructions Once installed an inspect this page link will appear in the document actions section of content objects on your site Clicking this link will open up a panel at the bottom of the page which is the GloWorm Inspector Panel You may also open this inspector by appending inspect to the current page s URL 253 Download at Boykma Com Add on Tools and Theming Tips You can click a viewlet s name to inspect it From the inspection panel you can then customize the template by clicking on the Customize button In the viewlet inspection view you can also click
398. ven though we will be using DTML If you wish to disable the use of the stylesheets and the images folders in the browser folder remove the following code from cssregistry xml You can tell that you are dealing with a browser layer file by the resource designation lt stylesheet title id resource plonetheme testtheme stylesheets main css media screen rel stylesheet rendering import cacheable True compression safe cookable True enabled 1 expression gt You will also want to remove the images and stylesheets folders from the browser folder if you re disabling browser layer support for these items Next open the browser configure zcml file and remove the following code lt Zope 3 browser resources gt lt Resource directory for images gt lt browser resourceDirectory name plonetheme mytheme images directory images layer interfaces IThemeSpecific gt lt Resource directory for stylesheets gt lt browser resourceDirectory name plonetheme mytheme stylesheets directory stylesheets layer interfaces IThemeSpecific gt When you install your product or you import settings pertaining to the CSS registry it will automatically add any new stylesheets to the CSS registry in the ZMI and disable any if desired You ll also need to restart your Zope instance as we have changed our ZCML code Working with JavaScripts in your theme product JavaScr
399. verridden on the skin layer Also all of the CMF skins including templates such as main_template pt are still usable in Plone 3 It is possible to customize browser pages either through the ZMI or through the filesystem but you are limited to what you can change through the web Additionally you can t add new browser views through the web so overall it s advisable to make changes to browser views via the filesystem and steer clear of the ZMI Next we will create a simple browser view in a filesystem theme product called test that creates a new navigational structure that outputs the contents of a new portal_actions CMF category To create a simple browser view we will need e A Python class to hold the code for our View component optional e A page template file that will hold the HTML and TAL 121 Download at Boykma Com Working with Zope 3 Components e ZCML code to register our browser page with Zope e Aninterface e Some GenericSetup code to create the new action category Create a Python class for our browser page The purpose of a template language like TAL is to handle presentation of content Ideally any serious logic is handled separately via a real programming language Python is the perfect programming language Let s start with our Python class We ll create a new file named audiences py in our browser folder and will insert the following code which outputs text from our portal actions and uses a
400. void URL redirects Se vore C 3270K 28708 It s interesting to note that the rules are listed in order of priority and so rules at the top of the list are weighted more heavily than rules at the bottom of the list when calculating the overall Performance Grade 32 Download at Boykma Com Chapter 2 Clicking on the Stats button gives you an overall look at the statistics of the page for example The Bullitt Foundation Home About Grantmaking Process Grant History Resources Rae NAS A RE ak ESAR FPE i P S f PATAN BE Inspect Clear Profile Performance e Components Tools Help Q Console HTML CSS Script DOM Net YSlow Options Empty Cache Primed Cache B 5 0K 1 HTML Text eS 2 1K 1 XMLHttpRequest 97 6K 4 JavaScript Files 5 0K 1 HTML Text 11 4K 2 Stylesheet Files 0 0K 1 JavaScript File a 8 7K 7 CSS Images 0 0K 7 CSS Images 254 0K 10 Images 5 7K 10 Images 378 9K Total size 10 7K Total size 25 HTTP requests 19 HTTP requests Weight graphs The tool can craw the entire DOM stack and give you an idea of what a user visiting the site for the very first time would have to download In this case we re loading a lot of images and those images are primarily responsible for slowing down this site on the first uncached visit to it Clicking on the Components tab shows us all of the items that are loaded when the page is requested listed by type There
401. we refer back to plone app portlets portlets and take the code for the events py renderer and alter it to point to mytheme_events pt we have the following code class Renderer base Renderer _template ViewPageTemplateFile mytheme events pt def init self args base Renderer init self args portal state getMultiAdapter self context self request name u plone portal state self portal_url portal_state portal_url self portal portal_state portal self have_events folder events in self portal objectIds snip In our configure zcm1 it is also possible to use the for attribute to customize for a particular type of context or the view attribute to customize for a particular view as with viewlets Note that only plone portletRenderer understands for and view plone portlet does not From the perspective of a filesystem based product if you have created a new Plone 3 portlet not modified off of a default Plone 3 portlet and it appears in the browser directory for your product that portlet will automatically be available via the add new portlet in the e manage portlets drop down list once you refresh your page or restart your Zope instance if you need to Creating a new Zope 3 portlet Let s look briefly at how to create a new Zope 3 portlet In the interest of reinforcing concepts and doing a bit of compare contrast we re going to recreate the browser page we saw in the previous chapter as a
402. we see in the homepage_view pt page template class IHomepage Interface Browser view for homepage logic def getSlotiImage self Returns an absolute url for the image to appear in the first slot return self getSlotImage 1 memoize def getSlotilItems self 238 Download at Boykma Com Chapter 11 Return the first 3 content items for the first slot We re assuming that a Collection lives at the path homepage slot1 we ll return its first three items nun return self getSlotItems 1 We still need to figure out where the hp_view is defined and hooked up to our theme In the same browser folder look at configure zcml lt Browser views gt lt browser page for We name hp_ view class homepage Homepage layer interfaces IThemeSpecific permission zope2 View gt This is where we tell our theme product to use this hp_view in the current theme We then need to look and see where the logic is for the interface described in interfaces py That is contained in the file named homepage py see the dot delimited class mentioned in configure zcm1 Here we see explanation of some basic logic and also the code associated with getSlot1iImage and getSloti1Items Even if you are not a programmer and I am not you can see that the way this code works is that your Plone site needs to have a folder added to it named Homepage The three slots that are part of the home page
403. well as any other packages you may wish to override We ll talk about this more soon Items that are derived from the CMFPlone product will go in the skins folder 67 Download at Boykma Com Create and Install a Theme Product Optionally if there s a reason to expose images or stylesheets to other products you might want to put those items in the browser folder An example might be this you have a shopping cart installed and users want to be able to modify the buttons or styles to match those buttons and styles to an underlying product s look and feel each time However this is a fairly rare use case Your images and stylesheets will normally live in the skins directory unless you have a clear reason why they should not The skins directory will hold not only images and stylesheets but also Python JavaScripts and any portlet code that doesn t rely on the component architecture In a nutshell the Zope Component Architecture ZCA is a Python framework for supporting component based design and programming ZCA is about how to create reusable components but it does not provide components by itself GA It s not important to know more about this right now but you can read Professional Plone Development Martin Aspeli Packt Publishing or some of the tutorials on plone org for more information We ll be focusing more on the patterns that we ll follow than on the WHYs behind them In the event that you need to modi
404. winhelix com You can download it from here http plone org products products easyaspiie and follow the installation instructions Optionally if you choose not to use this product you can also just export to PNG8 format instead of PNG24 to get around IE6 problems and of course there are a lot of alternative solutions out there as well You can read more about PNGs here http www sitepoint com blogs 2007 09 18 png8 the clear winner Both Photoshop and Fireworks can export to PNG8 though other graphical programs may not 248 Download at Boykma Com Chapter 12 collective skinny Another Plone product that has surfaced is Daniel Nouri s collective skinny which can be downloaded from http plone org products collective skinny This product is an example implementation of a separate public facing skin that abstracts away some of the complexity of the theming process According to the product page it s been described as being vastly easier than skinning Plone the conventional way but it also has a few drawbacks For example you can t use it for community sites where people other than your site editors log in and modify content It s also a little confusing from my perspective but it s a product adventurous themers might pay attention to It s probable that Deliverance and collective xdv the future of theming for Plone will make this product obsolete as Deliverance removes a lot of complexity and makes th
405. xtremely welcoming bright ambitious and inclusive to those who are willing to contribute back to the community 8 Download at Boykma Com Chapter 1 As a themer I continue to use and improve Plone because it s a rewarding platform with which to work and because I ve witnessed the change in the world it can effect My personal pet project with Plone is a small non profit called Safe Passage that helps to educate feed and protect children who work in the garbage dumps of Guatemala City With a very simple and sadly outdated theme and a form building product called PloneFormGen Safe Passage has managed to get more than 900 children sponsored fed and in school It s a small unassuming site but without Plone we could not have achieved such a tremendous accomplishment Plone is a wondrous tool frustrating at times but absolutely worth the time spent and valued by the organizations that use it to manage their content and spread their message From the simple theme I built for Safe Passage to the intricate themes I build now I ve learned that Plone is a deep and sometimes swift river but not impossible to cross The best part is that even as you read this book work is being done in the Plone community to ease the pain of theming This book is one small step in that direction Before we move into the theming portion of this book let s learn a little more about Plone and why it might be a good choice for your organization
406. y Enabling the WebKitDeveloperExtras as explained above should be sufficient For more information you can read here http www usingmac com 2007 12 2 web inspector for safari Activate the inspector by right clicking on any object on a page You will see an inspect element option that can open a web inspector window 808 Web Inspector http localhost 8080 Dogwoodinitiative Dogwoodinitiative o Y Styles Y Computed Style Show inherited webkit background clip border webkit background origin paddi background attachment scroll background color transpare background image none background repeat repeat border bottom color rgb 224 22 border bottom style solid border bottom width 1px border left color rgb 224 228 2 border left style solid 1p lt html xmins http www w3 org 1999 xhtml xml lang en lang en gt gt lt head gt v lt body class section test 1 template storybox_view kssActive dir Itr gt v lt div id visual portal wrapper gt lt div id portal top gt lt div class visualClear id clear space before wrapper table gt v lt table id portal columns gt v lt tbody gt v lt tr gt gt lt td id portal column one gt Y lt td id portal column content gt v lt div class gt v lt div id region content class documentContent gt lt span id contentTopLeft gt lt span id contentTopRight gt lt a name document
407. y basic Plone theme using XDV We now have an HTML file that forms the base of our design as well as a rules file that does the transform All we have left to do is tell Plone about the paths for the theme and rule files and enable the transform Enabling the theme transform Let s go back to the Theme Transform Plone control panel The settings you need to care about right now are Enabled Turns the XDV theme transformation on or off Switch this to on Domains Specifies which domains get the theme transforms applied You can view your theme during development via localhost 8080 The one thing to note here is that 127 0 0 1 essentially the same as localhost will never have a theme applied as a safety net so you can always get back to your site even if an error while developing your theme transform makes it unusable There is a default value of localhost 8080 here adjust if your setup is different but usually the default value is fine 289 Download at Boykma Com The Future of Theming for Plone The next two values are where it gets interesting e Theme template A file path or URL pointing to the theme file This is just a static HTML file Add theme theme htm1 here It s relative to your instance directory no need for the full path e Rules file The filesystem path to the rules XML file Add theme rules xml here Ignore the rest of the form values for now and press Save Testing that everyth
408. yment Plone theme for public use 279 deployment Plone theme on server about 273 configuration 275 276 documentation 275 orderly deployment maintaining 274 quality assurance 277 development environment setting up buildout filestructure 58 Plone downloading 56 Subversion 54 DIY Plone Style 14 document object model DOM 22 Domain Specific Languages See DSLs Dreamweaver 46 DTML 100 E easy_install 52 eggs 49 E Text Editor 45 export profile 92 extension profiles cssregistry xml 91 jsregistry xml 91 portlets xml 91 skins xml 91 viewlets xml 91 F Firebug extension about 27 downloading 27 features 27 30 interface 28 Firefox about 24 Colorzilla 34 Firebug extension 27 Firefox Web Developer Extension 25 YSlow 31 Firefox Web Developer Extension about 25 downloading 25 features 25 Firefox Web Developer Extension features disable cache 25 display element information 26 error and warning logs 27 images display image dimensions 26 information display ID and class details 26 validate CSS validate HTML 27 Flash integration about 257 Flash embedding in page 258 261 Flash embedding in page template 262 263 YouTube video code 258 folder buttons category 85 FS Dump 249 G GCC 57 GenericSetup about 14 export profile 92 import profile 92 93 snapshots generating 92 snapshots taking 92 GIMP about 21 features 21 GloWorm about 253 features 253 254 GNU Image Manipulation Program See GIMP graphi

Plone 3 Theming

Contents

Download Pdf Manuals

Related Search

Related Contents