Customizing Plone - the Plone 2.0 approach
An overview of Plone's layout structure, philosophy, and how it changes the rules for what you can do with CSS.
About the format
- If you are using Opera or any other browser with support for presentation CSS, going into full-screen mode will automatically turn this page into a slide show
Introduction
- Alexander Limi
- One of Plone's two dictators
- Works for "Plone Solutions":http://www.plonesolutions.com in Norway
- Training
- Development
- Support
- "http://www.plonesolutions.com":http://www.plonesolutions.com
Do not try this at home ;)
- What I'm currently showing is not the same syntax as in beta2 (some small changes)
- This document will go online along with the release of Plone 2, and be updated to reflect the structure
- Summary: The most cutting-edge of these techniques are not exactly the same in beta2.
A simple example
-
What did we do here?
- We use CSS to:
- Replace elements with images
- Change the structure of the page
- Result: We are not touching any templates at all, but are still able to change the structure and look of a page - including inserting images where there was only text previously!
Plone 2 makes it easy
- Example: Moving the leftmost column to the right side::
#navigational {
float: right;
}
#main {
float: left;
}
- This floats the column with the navigational boxes to the right side, and lets the main column occupy the space on the left.
That nifty image trick
-
Image trick revealed
- But how can you insert an image instead of a regular HTML element?
- And why would you want to?
Merry Christmas, Mr. Langridge
- Plone uses a technique called Langridge Image Replacement
"Langridge Image
Replacement":http://www.kryogenix.org/code/browser/lir/ (short: lir)
- Allows you to replace elements with an id and its subelements
LIR example
- Replacing the heading of a portlet::
#portlet-news h5 {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url("Image.png");
background-repeat: no-repeat;
height: 0px;
}
What elements can be replaced like this?
- Any element with an ID, which is most of the elements in Plone²:
- logo
- portal tabs
- portlet headings
- almost any other element
So why would you want to?
- This way, you can build very graphic-intensive sites without:
- Touching the templates
- Ruining all the accessibility work that has gone into Plone 2
- Still making the site usable in any browser (text browser / screen reader / mobile phone)
Another Plone First
- Plone 2 is the first CMS in the world to enable this functionality
- As far as we know, the first web application in the world to do this.
- Some examples from CSSZenGarden.com
Background: Plone Philosophy
- User-centric
- Personalized content
- Make it easy to keep track of what's going on
Plone Philosophy
- Light-weight design, focus is on content - not presentation
- Support standards relentlessly
- Be accessible to any person using any browser
Accessibility
- Plone is US Gov Section 508 compliant
- Plone is WAI-AAA compliant (W3C's WCAG)
- Result: Blind and disabled people can use it more easily
- Plone 2 is currently the most accessibility-friendly CMS in the world
- Plone is the first CMS in the world to conform to W3C's strictest standards.
Web addresses
- URLs should be accessible:
- http://plone.org/documentation/archetypes/gettingstarted
- not: http://plone.org/article.jsp?02740,93,294&mode;=web&uid;=5364F3...
- Pages should be search engine index-friendly and carry metadata
Device support
- Should be accessible to any web-capable device
- Desktop web browsers
- Phones
- PDAs
- Text Terminals
- Kiosk Terminals
- Screen Readers
Low bandwidth usage
- Should be usable over slow phone line connections
- Should always compress pages before transfering
- Should always cache images, javascript and style sheets
The HTML
- Semantic markup, not visual - no tables for layout
- All design should reside in Style Sheets, not in the templates
- Easy customization of the code to accomodate special needs
- 100% XHTML 1.0, CSS 1+2 and ECMAScript compliance.
- Plone 2.0 has a different HTML structure than 1.0
User interface elements
-
Back to CSS
- Some examples of using LIR and CSS to skin a web site
- CSSZenGarden.com
Adding/overriding with your own style sheets
- 'plone_styles/ploneCustom.css'
- Customize it, and add your own classes
- You can also override existing classes, since it has priority over 'plone.css'
- In Plone 2.0, you can customize your site radically with this technique if you know CSS
A short CSS primer
- Short overview of what you need to know
- The actual specification is quite readable
- W3Schools.com have nice tutorials
Theory and goal
- Separates layout and design from content
- Style sheets are attached to the markup and transforms its looks and behaviour
- Centralizes layout outside the actual content
- Makes re-use easier and re-design more efficient
CSS: Format
Simple Example::
a.externalLink {
color: Red;
}
CSS Components: Classes & IDs
- Class: generic class of elements, can have several on same page
- ID: specific element, unique on a page
CSS: Identifying elements
- Classes::
- Corresponding CSS selector::
.class { border-color: black; }
CSS: Identifying elements
- IDs::
- Corresponding CSS selector::
#specificImage { border-style: dashed; }
CSS: Qualifying elements - Classes
Specific tag class::
img.example {}
- Every 'img' tag with class 'example'
General classes::
.example {}
- Any tag with class 'example'
CSS: Qualifying elements - IDs
Specific tag ID::
img#example {}
- Every 'img' with ID 'example'
General IDs::
#example {}
- Every tag with ID 'example'
CSS: Qualifying Elements
You can be more specific about which elements should be affected::
p a { color: Green; }
- Will only affect 'a' tags inside 'p' tags
Another example::
p, a { color: Black; }
- Will affect all 'p' and 'a' tags
CSS: Qualifying Elements
You can also combine tags explicitly::
p + a { color: Yellow; }
- Will only affect 'a' tags immediately following a 'p' tag
CSS: Common gotchas
- Underscore '_' is not allowed
- The box model
- Floating elements are removed from the document flow
- Absolute/relative positioning
CSS: Useful tips
- Get an editor with good support for CSS, preferrably with introspection/autocompletion
- TopStyle Lite for Windows
CSS: Mozilla - a very special browser
- Mozilla/Firebird is your best development tool
- Lots of CSS developer plugins.
- Is (mostly) correct when it comes to implementation
CSS: Recommended Moz plugins
- editCSS - lets you edit CSS in real-time inside the browser
- Style Selector - Lets you switch between alternate style sheet in a document
- PNH Developer Toolbar
- Tabbrowser Preferences
XHTML - what is it?
- A reformulation of HTML that is XML compatible
- Fully compatible with all browsers
XHTML - main differences
- Every tag has to be closed. Example::
Box, CSS
Example::
div.box {
border: none;
margin-bottom: 1em;
padding: 0;
}
div.box h5 {
background: #DEE7EC;
border: 1px solid #8CACBB;
border-style: solid solid none solid;
text-transform: lowercase;
display: inline;
white-space: nowrap;
}
div.box div.body {
background: transparent;
border: 1px solid #8CACBB;
}
Listings, HTML
- Example::
Listings, CSS
- You're hopefully starting to get it ;)
- Styling tables isn't straightforward - requires some experimenting
Forms
- Plone 2 format::



Some text
- A lot of the tags in HTML 4.01 are deprecated XHTML - Common gotchas - Missing DOCTYPE declaration - Triggers "quirks" mode in Mozilla and IE - Will cause inconsistent behaviour, tries to do best-effort rendering - Non-closed tags - Use the W3C validator! ZPT and XHTML - ZPT helps you write valid code - Only checks for valid markup, doesn't validate code according to the DTD Reference - Walkthrough of the common elements in Plone - Show how the HTML looks like - Show the corresponding CSS Tabs, HTML - Example::- Home
- News
Recently Published
An odd item
An even item
Type | Size |
---|---|
Document | 6 KB |
Document name
Other tricks up our sleeves
- Presentation CSS
- Print CSS
- Insertion of own CSS from your application
Presentation CSS in Plone
- Any document in Plone can also be a presentation with multiple slides
- Only Opera supports this natively, Mozilla plans to implement it
- Could be supported later in IE via javascript
- 'plonePresentation.css'
Presentation CSS - theory
- 'h1' and 'h2' tags indicates new page
- Ordered/Unordered lists ('ul'/'ol') and definition ('dd') lists are shown
- Code listings ('pre') are shown
- Normal 'p' tags are hidden
- This means you can write a more comprehensive explanation for the web and print version
Presentation CSS - in practice
- Hide all elements we don't want to show up
- Increase font size and header formatting
- Move logo to bottom right
Presentation CSS - code
- Very simple to get this working:
'media="projection"' -- We specify the media for our presentation style sheet in the link to it.
'page-break-before: always;' -- Makes sure every 'h1' tag starts a new page.
Print CSS
- Same concept as for Presentation mode
- 'media="print"'
- Changes fonts, eliminates useless (for print) elements
- Makes separate template for printing unnecessary
How can an application easily add its own style sheets?
- How to insert your own CSS on a per-template basis::
Summary
- With Plone 2, your site can maintain:
- Accessibility
- Semantically correct HTML
- Flexibility
- While still allowing you to change its appearance radically, even without touching the templates.
Contact
- Plone Solutions
- Training
- Development
- Support
- http://www.plonesolutions.com
- info@plonesolutions.com
Director's Cut
- Deleted Scenes
Usability
- Some common questions and some easy-to-remember tips
Pull-down menus (aka. Limi's Crusade)
- Do not use as navigational items
- You can use them for grouping functions that are similar (item types, publishing states)
- Avoid Flash / Javascript for navigation unless you have fully functional, transparent fallback modes
- Multi-level menus are particularly bad
Why are pull-downs bad for navigation?
- Several studies show this (it's not just me ;)
- People don't explore, they browse / skim your site
- Menus make them stop and forces them to think
- Thinking is bad (when in a hurry :)
- You are *hiding* information with menus
Menu summary
- Menus are useful for functionality, but they are *not* navigational structures
- There's a reason the file explorer is not a menu, but a tree
- A menu limits you to a few choices, which is good when you want to perform an oft-used function, but bad for navigation
- Menus are not inherently evil, but they have to be used correctly. And navigation is not a task they are well suited for
Psychology guidelines and Usability
- Some common rules of thumb
About number of items
- Humans can keep track of 7 ± 2 items in short-term memory
- Try to limit number of sections on your site
- Try to limit the number of choices at the top level of your application
- Try to not go above that number of items in a folder
Site structure
- Users prefer (and are most productive with):
- First level: Few choices
- Next level: Can have many choices
- Subsequent levels: Precise, specific choices
Contact
- Plone Solutions
- Training
- Development
- Support
- http://www.plonesolutions.com
- info@plonesolutions.com
Can not contain spaces, underscores or mixed case.