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::

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
Tabs, CSS Generic structure:: ul#portalTabs { border-collapse: collapse; padding: 0.5em 0em 0em 2em; list-style: none; } ul#portalTabs li { display: inline; } Tabs, CSS The links:: ul#portalTabs li a { /* The normal, unselected tabs. */ background: transparent; border-color: #8CACBB; border-width: 1px; border-style: solid solid none solid; color: #436976; text-transform: lowercase; } ul#portalTabs li.selected a { /* The selected tab. There's only one of this */ background: #DEE7EC; border: 1px solid #8CACBB; border-bottom: #DEE7EC 1px solid; } Boxes, HTML - Example::
Recently Published
An odd item
An even item
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::
TypeSize
Document 6 KB
Listings, CSS - You're hopefully starting to get it ;) - Styling tables isn't straightforward - requires some experimenting Forms - Plone 2 format::
Document name
Can not contain spaces, underscores or mixed case.
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