Freeplone Introduction
Your new Free Plone Site
The following tutorial applies to Plone 2.1. Sorry, but we don't have one for Plone 3 yet.
Your new site is highly customisable, but there is not enough space in this Introduction to explain all the ins and outs of using Plone. We suggest you head over to http://www.plone.org/ where you will find plenty of information, although be warned that the learning curve can be pretty steep if you are used to Dreamweaver.
Experiments
1. CHANGING THE SITE LOGO
The plone site's logo is stored in the file 'logo.jpg'. Like a lot of important things it is stored inside the 'portal_skins' object, this time under 'plone_images'. You can also find it by going to the 'Find' tab in the ZMI and searching for an object called 'logo.jpg'. Search through portal_skins and you will find a bewildering array of useful things, all of which can be customised.
In order to change the logo you will have to Customise it. Navigate to logo.jpg then hit the 'Customize' button. The ZMI will now display portal_skins/custom/logo.jpg, where you now have the option to upload a new logo.jpg in its place. Upload a new image and view your site - the logo in the top left hand corner will have changed all over the site. (You may have hit Shift or Control Refresh on your browser to see the results - doing so will clear the browser's cache)
2. UNDERSTANDING SKINS
Note that if you now Find objects called 'logo.jpg' there are two of them - one in 'plone_images' and the new one in 'custom'. To find out which one has priority, view the 'Properties' tab of the portal_skins object. Here you will see that there are two skins - one called 'Plone Default' and one called 'Plone Tableless'. At the moment you will be using 'Plone Default' (unless you have changed it).
By looking at the layers listed for 'Plone Default' you will see that 'custom' comes higher in the list than 'plone_images'. This is the reason why the 'logo.jpg' in 'portal_skins/custom' is displayed in preference to the other. When rendering any object Zope looks first in the current folder, then in all parents of the current folder, then in all of the 'layers' associated with the current skin. This is called Zope Inheritance and is one of the most important features of Zope, once you've learned how to use it to your advantage.
3. EDITING THE MAIN TEMPLATE
Find the object called 'main_template' in portal_skins/plone_templates and customise it. Nearly all pages on your site are displayed using this template - so any changes you make here are going to be pretty global. Look through the main_template and see if you can tie together all the various parts of the template with the HTML source code of one of your web pages. You should be able to work out roughly how one is generated from the other.
The template is written in HTML tags that have been enhanced using TAL (Template Attribute Language). It's fairly easy to follow, if you ignore all of the additional attributes! If you don't like a bit of the page, e.g. the colophon, then delete it from here and it will disappear from every page across the whole site. Unfortunately this can be a bit useless if you sometimes need that bit of the page, e.g. when editing content. This is where Skin Switching comes in.
4. SWITCHING SKINS (ADVANCED)
Navigate to portal_skins and create a folder called 'public'. This will contain objects we want members of the public to see (i.e. anonymous visitors). You will be able to put templates in here that are missing annoying bits of the page, since members of the public don't need to see them.
Navigate to the Properties tab of portal_skins and add a new skin called 'public'. Copy and Paste in the layers from Plone Default, but add in a new layer called 'public' at the beginning. Save your changes.
Navigate to the root of your site in the ZMI, select 'Script (Python)' from the drop down list and hit 'Add'. Call the script 'setSkin' and hit 'Add and Edit'. Paste in the following code:
from string import find, split
adminHost = 'admin'
req = context.REQUEST
domain = split(req['SERVER_URL'],'//')[1]
if find(domain, adminHost) >= 0:
context.changeSkin('Plone Default')
else:
context.changeSkin('public')
Navigate to the root of your site in the ZMI, select 'Set Access Rule' from the drop down list and hit 'Add'. Enter the Rule Id as 'setSkin' and hit 'Set Rule'.
What we have now done is to create an Access Rule that will look at the SERVER_URL in the REQUEST to see if it contains the string 'admin'. If it does, then it instructs Plone to use the 'Plone Default' skin, otherwise it uses the 'public' skin. Ah, but this type of URL-based skin-switching is useless without a different URL to use, isn't it? It is. Fortunately, we have provided the URL:
http://freeplone2-admin.openia.com/your-site
which can also be used to view your site. You can now customise objects such as the main_template into the 'public' skin and delete any parts of them you don't like, secure in the knowledge that these changes will only be visible when viewing freeplone2.openia.com. Changes that you want to apply to both URLs (such as the logo.jpg) you place in 'custom'.
You may not appreciate the power of this approach until you see it in action. In our experience we find that's it's very difficult to create a really good Public Skin that can also be used for administering the site. And in fact it is also a complete waste of time. By skin switching you can customise the Public Skin to your heart's content, throwing away all but the bare minimum (which can greatly simplify your CSS) but edit the site's content using the Plone Default skin.
5. CREATING CONTENT
Navigate to http://freeplone2-admin.openia.com/your-site and click on 'log in'. If you don't have the skin-switcher then it doesn't matter: use the 'admin' URL anyway. Enter your username and password. You will now see the 'contentViews' tabs (contents, view, edit, properties, sharing) at the top of the content area.
Click on 'contents'. This will show you all the content objects in the current folder. Note that not all objects visible in the ZMI will appear here - we are now viewing the site using the Plone Product itself (as opposed to Zope) so only objects editable by Plone will be visible here. We call them 'Plone Objects' or 'Content Objects'. Note that a 'Plone Folder' is different to a 'Zope Folder' - they are both Folders and they both do roughly the same job, but a Plone Folder has more properties to tweak, e.g. a workflow state, and a Plone Folder is visible within Plone, whereas a Zope Folder isn't. Got it?
Click on 'add item' and then select 'page'. A Page is the fundamental unit of content within Plone, and is used to display text and pictures, just like a regular web page. The Kupu editor will have started up for editing the Body Text. This is a pretty nifty WYSIWYG editor and you can even upload images to it whilst editing your page. Try uploading a picture and typing in some text, and save your results with the title 'Page 1'.
6. ADDING CUSTOM VIEW METHODS (ADVANCED)
You may not like the way this page is displayed, so we are going to change it. Navigate to the portal_types object in the ZMI (using the admin URL again) and find the 'Document (Page)' type. At the moment the 'Available view methods' will be just 'document_view'. Add a new view method called 'page1_view' and save your changes.
Find the object called 'document_view' and customise it into the 'custom' folder (you will find it in portal_skins/plone_content). Rename this customised version as 'page1_view' and edit it. We can now do simple things in here, such as removing the Document Description, or adding our own banner advert, but there are limits.
For ultimate control, note the line that says:
metal:use-macro="here/main_template/macros/master"
in the header. This is the reason why the Page Type is displayed using the main_template. If we change this to e.g. 'page1_template', and then create a copy of the 'main_template' called 'page1_template' (put copies in both the 'custom' and 'public' folders, then edit the one in 'public') then we can have complete control over how this, or indeed every document is displayed.
Finally, go back to Plone and view 'Page 1'. You will now see that the 'display' drop down list has an extra entry called 'page1_view'. Select this and you should be able to view this Page using your new custom view method.
Using custom view methods you can create very complex results, such as getting rid of the portlets, adding customer enquiry forms, and completely rearranging the page layout. Try not to be limited by the appearance of out-of-the-box Plone. Imagine how you want the page to look, then create the templates to achieve that. Here are just three examples:
(HEALTH WARNING: You will find it difficult to implement every feature of the above sites, although it might be possible. This is because we also develop our own Products which, as a Freeploner, you can't. Product development is beyond the scope of this Introduction.)
7. ADDING CSS
If you are interested in Zope/Plone then you probably know all about Cascading Style Sheets already. For accessibility reasons you should ensure your web pages are displayed with the simplest HTML possible, using the right tags in the right places, and then control how everything looks using CSS. You are now a responsible citizen.
For even greater Accessibility, Plone comes with a table-less skin, but it does take more skill to use this. To use the table-less skin, repeat all the instructions above, but substitute 'Plone Tableless' for 'Plone Default'. You will also have to make sure you use the main_template from portal_skins/plone_tableless when you perform any customisations, otherwise the results are pretty disastrous. This is a decision to be taken very early on!
To change the CSS, find the object called 'ploneCustom.css' and customise it into the 'public' skin (if you created one, otherwise put it in the 'custom' folder). From here on there are two options:
- attempt to over-ride all of the Plone CSS to make it appear how you want it to. This is the correct method, and will mean that you can upgrade your version of Plone easily (ish) in the future.
- customise 'public.css' as well and change/remove bits you don't like. You're not supposed to do this, but it can save time.
For CSS design we use the DOM Inpector in Mozilla Firefox. Try it!
8. USING PRODUCTS
The list of Products available to install into your Plone site are listed under the 'portal_quickinstaller' object. There is a limit to how many Products we are willing to install into any given Zope instance, since it takes time and will ultimately compromise the stability of the instance (yes, they do get corrupted from time to time).
Please have a look at what is available and try them out. We will consider requests to install a new Product, but our time is valuable so we limit this to one request per Freeploner. However, there are always exceptions to this rule and it doesn't hurt to ask - but please understand that we cannot give these a high priority.
** However, there is more to Zope/Plone than Installable Products! **
We hope you enjoy using your new site. This Introduction is intended as a guide to getting the best out of your Free Plone site. Unfortunately, since this is a free service, we do not offer support for Freeplone sites. Please direct any questions you may have to the relevant Plone Forums. You will now be part of a global community of Plone Developers, all of whom are committed to the future of an Open Source Content Management System.
