CPSSkins  a WYSIWYG Theme editor for CMF, CPS and Plone<br/>Jean-Marc Orliaguet &lt;jmo@chalmers.se&gt;<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 1/42<br/><br/><br/>Introduction<br/><br/>Installing CPSSkins<br/>Requirements:<br/>· CMFActionIcons1<br/><br/>this product is optional but it is highly recommended to install it to display action icons.<br/><br/>CPSSkins can be installed:<br/><br/>1. from the ZMI (the Zope Management Interface) by selecting CPSSkins Installer in the Zope product list. 2. with CMFQuickInstaller (recommended)<br/><br/>INSTALLATION THROUGH THE ZOPE MANAGEMENT INTERFACE<br/>In /Control_Panel/Products:<br/>·<br/><br/>Make sure that the CPSSkins product is correctly installed (i.e. not broken)<br/><br/>From the Zope product list add &quot;CPSSkins Installer&quot; IMPORTANT:<br/>·<br/><br/>Select the source skin. It must be a skin that works already without CPSSkins. It is usually called Basic under CMF, CPS2 and CPS3, or Plone Default under Plone. The portal type (CMF/CPS2/CPS3/Plone/Plone2) will be automatically detected. If the installation fails, make sure that the portal was correctly detected. Look for a 'Detected portal type is ...' message at the start of the installation log. Check the reinstall default themes option if you want to reinstall CPSSkins default themes. The default themes will be installed by default if this is a first installation.<br/><br/>·<br/><br/>INSTALLATION WITH CMFQUICKINSTALLER<br/>CMF<br/>1 http://zope.org/Members/tseaver/CMFActionIcons<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 2/42<br/><br/><br/>· ·<br/><br/>Go to portal_quickinstaller Select CPSSkins and click on Install<br/><br/>Plone2<br/>· · · ·<br/><br/>Go to Plone Setup Choose Add/Remove Products Select CPSSkins Click on Install<br/><br/>CPSSkins can be also be deinstalled and automatically upgraded with CMFQuickInstaller.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 3/42<br/><br/><br/>Getting started with CPSSkins<br/>EDITION MODES<br/>&quot;WYSIWYG&quot; mode &quot;Layout&quot; mode &quot;Mixed&quot; mode<br/><br/>EDITING THEMES THROUGH THE ZMI<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 4/42<br/><br/><br/>Creating your own themes<br/>PALETTES<br/>A site rarely uses more than 5 or 10 colors. The Plone theme for instance uses only 6 colors. It is therefore a good idea when designing a theme to begin by defining the colors that you are going to use often and store them in a central place. This is what CPSSkins palettes have been designed for. If you are working for a company or a university it is very likely that these colors have already been defined in a graphic profile for the Web. To edit a theme's palettes click on the Palettes button in the control panel.<br/><br/>The different categories of palettes will be displayed. There are at the time of writing this document only two types of palettes, namely colors and borders.<br/><br/>Click on the category of palette that you want to create or edit. A list of already existing palette entries will be displayed.<br/><br/>Colors<br/>The color palette contains only colors. These colors can be used in CPSSkins Styles as background colors, as border colors, as font colors, etc.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 5/42<br/><br/><br/>To edit an existing entry simply click on its name. To delete an entry click on the x icon displayed before the entry's title. To add a new entry click on the +... button at the bottom of the palette.<br/><br/>Editing color palette entries Color palettes contain colors represented by a title and CSS color value.<br/><br/>The title can be chosen freely.<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 6/42<br/><br/><br/>The CSS color value can be specified:<br/>· · ·<br/><br/>using the hexadecimal notation as #rrggbb: #FFCC00, #666666 as #rgb - #FC0, #666 using standard color names (transparent, White, Black) Note: Only 16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)<br/><br/>·<br/><br/>using rbg values as: rgb(255,0,0), rgb(0,255,255), rgb(100%, 0%, 0%)<br/><br/>For more information see the W3C CSS2 specification2<br/><br/>TIPS: you can combine CSS colour values to draw borders with different colours:<br/><br/>Borders<br/>The border palette only contains borders. Borders are used to create box frames or the decoration around text headings etc.<br/><br/>2 http://www.w3.org/TR/CSS21/syndata.html#color-units<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 7/42<br/><br/><br/>To edit an existing entry simply click on its name. To delete an entry click on the x icon displayed before the entry's title. To add a new entry click on the +... button at the bottom of the palette.<br/><br/>Editing border palette entries Border palettes contain border styles represented by a title and CSS border style value.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 8/42<br/><br/><br/>The title can be chosen freely. The CSS border style value can be specified as:<br/>· none : no border; the border width is zero.<br/><br/>· · · · · · · ·<br/><br/>dotted : the border is a series of dots. dashed : the border is a series of short line segments. solid : the border is a single line segment. double : the border is two solid lines. groove : the border looks as though it were carved into the canvas. ridge : the opposite of 'groove': the border looks as though it were coming out of the<br/><br/>canvas.<br/>inset : the border makes the box look as though it were embedded in the canvas. outset : the opposite of 'inset': the border makes the box look as though it were coming<br/><br/>out of the canvas.<br/><br/>For more information see the W3C CSS2 specification3<br/><br/>3 http://www.w3.org/TR/CSS21/box.html#propdef-border-style<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 9/42<br/><br/><br/>IMAGES<br/>Icons backgrounds<br/><br/>STYLES<br/>Area color<br/>Description: this style defines the background, border and text colors of an area Icon:<br/><br/>Area shape<br/>Description: this style defines the border style and thickness of an area Icon:<br/><br/>Font color<br/>Description: this style defines the font, link and decoration colors Icon:<br/><br/>Font shape<br/>Description: this style defines font sizes, links and decoration styles Icon:<br/><br/>Portal box color<br/>Description: this style defines the colors of portal boxes Icon:<br/><br/>Portal box shape<br/>Description: this style defines the shapes of portal boxes Icon:<br/><br/>Portal tab style<br/>Description: this style defines the appearance of portal tabs Icon:<br/><br/>Calendar style<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 10/42<br/><br/><br/>Description: this style defines the calendar's visual appearance Icon:<br/><br/>Collapsible menu style<br/>Description: this style defines the visual appearance of collapsible menus Icon:<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 11/42<br/><br/><br/>TEMPLETS<br/>Main content area<br/>Description: Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Text box<br/>Description: Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Image box<br/>Description: Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>FlashTM box<br/>Description: Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Search box<br/>Description: a box with an input field to search the portal. In the advanced mode, a link to the advanced search form is shown below the input field. Icon: Layouts: compact, advanced.<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 12/42<br/><br/><br/>Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Breadcrumbs<br/>Description: a navigation trail from the top level of the site to the current page. Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Calendar box<br/>Description: a calendar displaying monthly events. Icon: Applicable styles: area color, area shape, font color, font shape, calendar style. Preview:<br/><br/>Collapsible menus<br/>Description: a collapsible menu displaying portal folder items Icon: Applicable styles: area color, area shape, font color, font shape, collapsible menu style.<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 13/42<br/><br/><br/>Preview:<br/><br/>Action box<br/>Description: a toolbar containing action buttons with icons. Icon: Applicable styles: area color, area shape, font color, font shape. Preview: [CMFActionIcons]<br/><br/>Portal boxes<br/>Description: a generic box that displays portal actions, portal folders, an about box, a login box, an info box, etc. Icon: Applicable styles: area color, area shape, font color, font shape, portal box color, portal box shape. Layouts: see the list of box layouts as described below. Preview: Box content<br/>Portal actions<br/><br/>Portal folders<br/><br/>About this object<br/><br/>Information text<br/><br/>Login form<br/><br/>Language selector<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 14/42<br/><br/><br/>Recent documents<br/><br/>Related documents<br/><br/>Title source<br/>Templet title<br/><br/>Workflow state<br/><br/>Username<br/><br/>Folder title<br/><br/>Box layouts Portal boxes are composed of a box title and of a box body. Several layouts are available in which the title and the body are arranged differently. Selecting a layout is done under the Templet's Layout tab in the Portal box layout field.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 15/42<br/><br/><br/>Standard box<br/><br/>Frame box<br/><br/>Frame box without title<br/><br/>No frames<br/><br/>No frame no title<br/><br/>Drawer box<br/><br/>A drawer box can be opened and closed by users that are not necessarily authenticated. The box state (open / closed) is a saved in a session cookie.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 16/42<br/><br/><br/>Drawer box without title<br/><br/>The drawer box without title is displayed like a drawer box except that the box title is not shown.<br/><br/>This box layout can used to hide the items contained in a folder:<br/><br/>Box orientation The items inside boxes can be displayed either horizontally (side by side) or vertically (on top of another). The selection is done by selecting Vertical or Horizontal in the List orientation field under the Templet's Layout tab.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 17/42<br/><br/><br/>Horizontal orientation<br/><br/>Vertical orientation<br/><br/>Portal tab<br/>Description: horizontal tabs displaying folder contents, actions, etc.<br/><br/>Icon: Applicable styles: area color, area shape, font color, font shape, portal tab style. Preview:<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 18/42<br/><br/><br/>Portal box group<br/>Description: a slot that displays CPS' or Plone's original portal boxes Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Document information<br/>Description: a text string displaying information about the current document, i.e. its title, the date of last modification, the name of the creator, etc. Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Creator Last modified date and time Document title<br/><br/>Theme chooser<br/>Description: a theme selector for anonymous visitors (cookies must be enabled) Icon: Applicable styles: area color, area shape, font color, font shape. Preview:<br/><br/>Language selector<br/>Description: a language selector Icon: Applicable styles: area color, area shape, font color, font shape. Layouts: country flags, dropdown list, language names Preview:<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 19/42<br/><br/><br/>LAYOUT<br/>Visibility<br/>Always Only in ... Everywhere except in ... Starting from ... Up till ... If authenticated If anonymous If secure connection Time limited<br/><br/>Page Blocks Cells<br/>Cell stylers Cell sizers Cell hiders<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 20/42<br/><br/><br/>THEME RENDERERS<br/>The themes created with CPSSkins are displayed by theme renderers. [...]<br/><br/>Default mode (CSS2)<br/><br/>Compatible mode (Netscape 4) Text mode<br/>Hiding Templets in text mode When designing themes for text mode browsers it is important to not clutter the top of the page with useless information since users often have to scroll down a lot before they reach the content of the page. To avoid displaying a given Templet in text mode check the Hidden in text mode option located under the Visibility tab of the Templet that you wish to hide. This option only applies to text mode rendering.<br/><br/>Profiler mode<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 21/42<br/><br/><br/>ACCESSIBILITY<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 22/42<br/><br/><br/>Integration<br/>CPS3<br/>Displaying CPS3 portal boxes inside CPSSkins Displaying CPS3 sections and workspaces<br/><br/>PLONE<br/>Displaying Plone's Portlets inside CPSSkins<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 23/42<br/><br/><br/>Managing themes<br/>THE CPSSKINS THEME FORMAT<br/>The CPSSkins theme format has been designed to be simple and modular. A theme is composed of elementary objects like Page Blocks, Templets, Styles, Palettes, Cell modifiers. It is the interaction of all these elements that makes a theme.<br/><br/>The theme structure<br/>A Templet is an element of the User Interface that can be positioned on a canvas. In order to be visible Templets must be present within Page Blocks. Page Blocks are rectangular blocks with a number of columns that determine the underlining structure of a page. Page Blocks can contain Templets, layout elements (Cell Sizers), style elements (Cell Stylers) and visibility elements (Cell Hiders) A Portal Theme is a collection of Page Blocks and a set of Styles (AreaColor, AreaShape, PortalBoxColor, PortalBoxShape, FontColor, FontShape, ... ) Styles consist of CSS properties and Images (icons, backgrounds). They can be associated to Portal Themes, to Page Blocks, to Templets and to Cell Stylers. Some CSS properties can be stored inside Palettes.<br/><br/>The Templets A Templet is a box with a content. It is placed inside a container box. The Templet's margin is the space between the container box and the Templet box. The Templet's padding is the space between the Templet box and its content.<br/>Container box Templet content<br/><br/>margin padding<br/><br/>The Page Blocks<br/><br/>The Cell Modifiers<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 24/42<br/><br/><br/>The Theme<br/>Theme pages<br/><br/>The Styles The Images The Palettes<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 25/42<br/><br/><br/>OPTIMIZING YOUR THEMES<br/>Profiling Caching ESI (Edge-Side-Includes)<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 26/42<br/><br/><br/>USING SEVERAL THEMES INSIDE THE SAME PORTAL<br/>CPSSkins stores all the themes under /.../portal_themes. Every theme has a humanreadable title and an identifier which is its Zope ID. Only IDs are used to refer to themes. To change a theme's ID simply rename it.<br/><br/>Setting the default theme<br/>You can design several themes in parallel but only one will be seen by the users by default, it is called the default theme. In the theme edition screens the default theme's name is underlined:<br/><br/>To set a theme as the default theme click on the theme's tab and in the contextual menu select Set as default.<br/><br/>Experienced users can also select the default theme in the ZMI with the Default theme tab.<br/><br/>To display a theme other than the default theme you must specify its inside a URL or by setting a cookie value that CPSSkins will understand.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 27/42<br/><br/><br/>Selecting a theme by a URL parameter<br/>A theme can be explcitly selected by specifying the theme's ID in the URL as a parameter by calling ?theme=theme_id where theme_id is the theme's ID. For instance http://www.mysite.com/?theme=intranet will display the intranet theme. The theme called printable (usually used to display the printer-friendly version of a page) can also be selected by writing ?pp=1 in the URL. This method does not make site navigation easy however since the theme parameter must be specified in every URL. Setting a cookie is a better method.<br/><br/>Selecting a theme by setting a cookie<br/>CPSSkins will check the value of a given cookie (called cpsskins_theme). If the cookie's value is set to one of the themes' ID, the default theme information will be ignored and the ID contained in the cookie will be used instead. Cookies can be set globally at the site's root (recommended) or be set locally starting from a given URL. To get the cookie's ID use the getThemeCookieID() method. Then set the cookie with REQUEST.RESPONSE.setCookie(cookie_id, theme_id) For example you can run the following script to set the current theme to intranet<br/><br/>##parameters=REQUEST=None theme_id = 'intranet' tmtool = context.portal_themes cookie_id = tmtool.getThemeCookieID() if REQUEST is not None: REQUEST.RESPONSE.setCookie(cookie_id, theme_id)<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 28/42<br/><br/><br/>Local themes<br/>Local themes are associated to site folders ('sections', 'workspaces', etc.). They make it possible to use several themes inside a same site. Different theme pages can also be associated to folders.<br/><br/>The information is stored in the folder's attribute called .cpsskins_theme<br/>· ·<br/><br/>as the property of a folder (one theme per line) as an object located in the folder that is callable and that returns a tuple.<br/><br/>Local themes are computed by collecting all theme information from the portal to the current folder. The format for describing themes is:<br/>· ·<br/><br/>simply a string containing the theme id.<br/>n-m:theme<br/><br/>where:<br/>· · theme is the theme id (n, m) is a couple with n &lt;= m that describes the interval inside which the theme will be<br/><br/>used:<br/>(0, 0) means the current folder and all subfolders (1, 0) means all subfolders below the current folder (1, 1) means the subfolders of level 1 (0, 1) means the folder and the subfolders of level 1 (n, n) means the subfolders of level n<br/><br/>Examples:<br/>with a folder property called '.cpsskins_theme':<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 29/42<br/><br/><br/>- lines with intervals:<br/>0-1:theme1 2-4:theme2 6-0:theme3<br/><br/>- string with interval:<br/>0-1:theme1<br/><br/>- string without interval:<br/>theme1<br/><br/>with a script called '.cpsskins_theme.py' placed in a folder:<br/><br/>- tuple with intervals:<br/>return ('0-1:theme1', '2-4:theme2', '6-0:theme3')<br/><br/>- string with interval:<br/>return '0-1:theme'<br/><br/>Specifying the page To select the page of a theme, add +page to the theme name where page is the page's id.<br/>example:<br/>0-1:theme1+green 2-4:theme2+red 6-0:theme3+blue<br/><br/>IMPORTING AND EXPORTING YOUR THEME<br/>Exporting in zexp format Exporting in XML format. Importing in zexp format<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 30/42<br/><br/><br/>Importing in XML format<br/><br/>REBUILDING THEMES DELEGATING THE THEME MANAGER ROLE<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 31/42<br/><br/><br/>DEPLOYING THEMES INSIDE AN ORGANIZATION<br/>To establish brandmark identification it is important that all websites in an organisation comply to certain graphic standards. These are defined in the university's or the company's graphic standards manual in the form of general guidelines that need to be implemented.<br/><br/>This chapter describes how to implement design guidelines by deploying themes across an organization while maintaining high visual consistency. Installing themes from a remote server<br/>A theme created with CPSSkins for a given site can be exported and saved on the computer's harddisk as a file and be imported into another site. But it is also possible to import themes directly from the Internet without first saving them on the harddisk. Themes can be automatically downloaded and installed from a remote WW W or FTP server. This option is available in the portal_themes tool under External Themes. It offers the possibility to centrally deploy and manage themes inside an organization that has a large quantity of sites. Each participating site (client) can be configured to update its themes from a central theme repository where all the themes are stored. The technique can be compared to a &quot;pull&quot;-type strategy since the server never sends information to the participating sites unless they first send a request for a theme update. A same theme can be used for many sites:<br/><br/>Illustration 1Central site configuration<br/><br/>It is also possible to configure some sub-sites (for instance research groups inside a department) so that they will import their theme directly from another site running CPSSkins<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 32/42<br/><br/><br/>by using CPSSkins' theme export function (see &quot;Performing automatic updates&quot;).<br/><br/>Installation<br/>An external theme has a theme ID (its Zope Id in .../portal_themes) and a theme URL which is the address of a CPSSkins theme in .zexp format located on a remote server. The current implementation supports URLs beginning with http://___, https://___ and ftp://___.<br/><br/>Adding new themes New external themes can be added by writing a theme ID and a URL and by clicking on the Add button.<br/><br/>Newly added themes will appear in the external themes list. Their URL can then be modified, (Modify URL) but not their ID. They can also be removed from the list (Remove from list).<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 33/42<br/><br/><br/>Performing manual updates<br/>Checking for updates When checking for updates (Check for updates button), all the themes get downloaded and their checksum is compared with the checksum of the themes already installed. If a newer version is available a status message (New theme available!) will be written. Installing newer themes To perform an update click on Install updates<br/><br/>Themes will be downloaded from the specified addresses and be imported into the site. Already existing themes with the same IDs as the ones configured will be overwritten. All imported themes are rebuilt. If this step fails a status message (THEME REBUILD<br/>FAILED) will be written.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 34/42<br/><br/><br/>Only the newer versions of a theme will actually get installed. Reinstalling all themes When reinstalling all themes (Reinstall all themes button), all external themes get downloaded and installed even if they are strictly identical to the themes already installed.<br/><br/>Performing automatic updates<br/>It is possible to let the client sites perform unattended updates on a regular basis. The simplest solution is to use UNIX's cron mechanism combined with a non-interactive network downloader wget or curl For instance to run an update on a daily basis, add the following line to /etc/cron.daily/<br/>#!/bin/sh wget -q http://root:pass@www.site.com:8080/cpsskins/portal_themes/manage_updateExternalThemes<br/><br/>or:<br/>#!/bin/sh curl -s --user root:pass http://www.site.com:8080/cpsskins/portal_themes/manage_updateExternalThemes<br/><br/>where:<br/>­ ­ ­ www.site.com:8080 is the name and the port of the Zope server cpsskins is the name of the site instance root is the site administrator's account name and pass is its password.<br/><br/>Importing themes from another CPSSkins instance<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 35/42<br/><br/><br/>In order to import a theme from another CPSSkins instance simply write in the theme URL:<br/><br/>http://root:pass@www.site.com:8080/cpsskins/portal_themes/themeid/manage_exportObject?download:int=1<br/><br/>where:<br/>­ ­ ­ ­ www.site.com:8080 is the name and the port of the Zope server cpsskins is the name of the site instance themeid is the ID of the theme to export root is the site administrator's account name and pass is its password.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 36/42<br/><br/><br/>Advanced<br/>TRANSLATING CPSSKINS INTO YOUR OWN LANGUAGE<br/>CPSSkins has been entirely internationalized which means that all the messages displayed in the user interface can be translated into other languages. To translate the CPSSkins user interface into your own language you only need to edit three files called cpsskins-xx.po, cpsskins-default-xx.po and cpsskins-plone-xx.po where xx is the language code (en for English, it for Italian, sv for Swedish, ...). Language codes are defined in the ISO 639-1 standard4. They consist of two letters. These files should be placed in the CPSSkins/i18n directory. The messages are categorized into three message catalogs called cpsskins, default and<br/>plone cpsskins-xx.po contains the messages of the cpsskins catalog. These are the messages used by CPSSkins. cpsskins-default-xx.po and cpsskins-plone-xx.po contain the messages of the default and of the plone catalogs respectively. These are used by CMF, CPS (default i18n domain) or by Plone (plone i18n domain). Apart from the i18n domain declaration the contents of these files are exactly the same.<br/><br/>Po files consist of a header with some information about the translators, the language code, the domain name (...) and the actual translations (msgid &quot;...&quot; and msgstr &quot;...&quot;) . The files called cpsskins.pot, cpsskins-default.pot and cpsskins-plone.pot are used as a reference since they are always up-to-date. They contain the latest message ids (msgid) of each catalog with empty translation strings (msgstr). (...)<br/><br/>4 http://www.w3.org/WAI/ER/IG/ert/iso639.htm<br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 37/42<br/><br/><br/>PACKAGING CPSSKINS THEMES INSIDE YOUR PRODUCT<br/>XML import<br/>Concept code showing how to install themes saved in XML format from the filesystem (requires CPSIO &gt;= 0.3.0) - filepath is the path to the file on the local filesystem. - filename is the file's name (e.g. theme.zip). sample code:<br/>from Products.CMFCore.utils import getToolByName from ZPublisher.HTTPRequest import FileUpload class DummyFileUpload: def __init__(self, **kw): for k, v in kw.items(): setattr(self, k, v) class Installer: &quot;&quot;&quot; a product installer &quot;&quot;&quot; def installTheme(self, filepath='', filename=''): &quot;&quot;&quot;Install a theme (XML) &quot;&quot;&quot; tmtool = getToolByName(self, 'portal_themes') fs = DummyFileUpload( file=open(filepath, 'r'), headers={'Content-Type': 'application/zip'}, filename=filename) tmtool.manage_xmlImport( FileUpload(fs), options=['import_overwrite'], plugin='CPSSkinsImporter')<br/><br/>Configuring theme settings<br/>Theme settings can be imported with CPSIO (&gt; 0.3.0) To import theme settings use the same code as above with the following parameters.<br/>tmtool.manage_xmlImport( FileUpload(fs), options=['import_theme_settings'], plugin='CPS3Importer')<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 38/42<br/><br/><br/>Example code some functional code ready to be inserted in your install.py script. (requires CPSIO and CPSInstaller):<br/>from Products.CPSInstaller.CPSInstaller import CPSInstaller class DummyFileUpload: def __init__(self, **kw): for k, v in kw.items(): setattr(self, k, v) class ProductInstaller(CPSInstaller): &quot;&quot;&quot; Installer class &quot;&quot;&quot; def package_home(self, name): &quot;&quot;&quot;Returns path to Products.name&quot;&quot;&quot; m = sys.modules['Products.%s' % name] return (m.__path__[0]) def install(self): &quot;&quot;&quot; - 'default.zip' is a theme - 'settings.zip' are theme settings they are located in the 'themes/' folder of your product. &quot;&quot;&quot;&quot; # install the theme self.installTheme('default.zip') # install the theme settings self.installThemeSettings('settings.zip')<br/><br/>def installTheme(self, theme=''): &quot;&quot;&quot;Install a theme (XML)&quot;&quot;&quot; themesdir = os.path.join(self.product_home, 'themes') filepath = os.path.join(themesdir, theme) tmtool = self.getTool('portal_themes') fs = DummyFileUpload( file=open(filepath, 'r'), headers={'Content-Type': 'application/zip'}, filename=theme) tmtool.manage_xmlImport(<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 39/42<br/><br/><br/>FileUpload(fs), options=['import_overwrite'], plugin='CPSSkinsImporter') self.log('Importing theme %s' % theme)<br/><br/>def installThemeSettings(self, filename): &quot;&quot;&quot;Install theme settings (XML)&quot;&quot;&quot; themesdir = os.path.join(self.product_home, 'themes') filepath = os.path.join(themesdir, filename) tmtool = self.getTool('portal_themes') fs = DummyFileUpload( file=open(filepath, 'r'), headers={'Content-Type': 'application/zip'}, filename=filename) tmtool.manage_xmlImport( FileUpload(fs), options=['import_theme_settings'], plugin='CPS3Importer') self.log('Importing themes settings %s' % filename)<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 40/42<br/><br/><br/>EXTENDING CPSSKINS: WRITING YOUR OWN TEMPLETS<br/>This chapter explains how to create custom Templets and Styles for CPSSkins. The standard Templets included CPSSkins are the Text box, the Image box, the Search box, the Language selector, the Breadcrumbs, the Action box, the Portal box, and the Portal box group, the Theme chooser, the FlashTM box, the Calendar box, the Collapsible menu. These are all derived from the BaseTemplet Python class. New Templets based on the BaseTemplet class can be created with only a few lines of code. The default properties inherited from BaseTemplet are:<br/>Property title closed cacheable hidden_in_text_mode display_title_in_text_mode visibility visibility_paths languages xpos align padding margin templet_height fontshape fontcolor shape color Description Title of the Templet State : open / closed Makes the Templet cacheable in RAM Makes the Templet invisible in text mode Makes the Templet's title visible in text mode Visibility criteria The paths in which the Templet is visible The languages in which the Templet is visible Horizontal position in the Page Block (0, 1, 2 ... ) Horizontal alignment (left, center, right) Padding Margin Templet height Font shape Font color Area shape Area color Type string boolean boolean boolean boolean string multiple selection multiple selection int string string string string selection (string) selection (string) selection (string) selection (string) Default 0 0 0 1 always<br/><br/>The actions inherited from BaseTemplet are:<br/>­ ­ ­ ­ ­ ­ ­ ­ ­ view the default view method, only practically used in theme edition mode. edit the edit method, updates the Templet's properties. moveup moves the Templet upwards on the canvas, possibly into another Page Block. moveleft moves the Templet to the left. movedown moves the Templet downwards on the canvas, possibly into another Page<br/><br/>Block.<br/>moveright moves the Templet to the right. toggle changes the Templet's visibility state. delete deletes the Templet. isportaltemplet used internally to recognize Templets from other Zope objects.<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 41/42<br/><br/><br/>[...]<br/><br/>CPSSkins ­ a WYSIWYG theme editor for CMF, CPS and Plone page 42/42