Customizing Plone - the Plone 2.0 approach

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