Resources

Download the latest release of DIYPloneStyle from "here":/products/diyplonestyle/releases. Essential References The following links will certainly answer most of the questions that could remain unanswered after reading this tutorial. ResourceRegistries -- The "Project Description":/products/resourceregistries or the product "README.txt":http://svn.plone.org/svn/plone/ResourceRegistries/trunk/README.txt give a good overview of its functionalities.
To learn more about the registries' API, you can install "DocFinderTab":http://zope.org/Members/shh/DocFinderTab. This product is recommended anyway as soon as you start learning the Zope/Plone API. "Customizing Plone - the Plone 2.0 approach":http://plone.org/events/conferences/1/archive/customizingplone by Alex Limi -- An overview of Plone 2.0 layout structure and philosophy, and of what you can do with CSS.
(This document can be used as a good demo of the full-screen mode in Opera that uses the 'projection' CSS media ,which displays Plone page sections as projection slides). TTW Customization These links can be useful for a better understanding of the *Skins Tool* machinery and how things are organized with regard to Plone User Interface elements. The Plone Book by Andy McKay -- Chapter 7, about "Customizing the Look and Feel of Plone":http://docs.neuroinf.de/PloneBook/ch7.rst is a must-read for People who need to understand better the *Skins Tool* machinery. "Where is what?":../where-is-what by Jet Wilda and John DeStefano -- A reference on what templates and CSS control the UI elements and where to find them in the ZMI (updated for Plone 3.0). "Plone Skin Dump":http://quintagroup.com/services/plone-development/products/skin-dump -- A Plone product developped by Quinta Group, which "allows to create Plone product based on some ZMI located skin folder (eg "custom") from portal_skins. So you can easy create Plone product with skin based on folder with customized styles and page templates". Plone Skin Dump supports stylesheets registration since version 0.3.0. Filesystem Development The "How-to section":/documentation/how-to/ of plone.org -- There are many good resources from the section **User Interface: Styles and styling, CSS**.
In particular the one about "Creating a Custom Skin":/documentation/how-to/creating-custom-skins by Ben Calder. "Best Practices for Plone development":/documentation/tutorial/best-practices by Joel Burton -- It will give you good advice if you plan to develop filesystem python code based products. The following references may seem off topic as they are mainly about developing content types, but they are valuable for learning how to build Python products for Plone. "MySite":http://www.neuroinf.de/LabTools/MySite by Raphael Ritz -- This tutorial/product for Plone newbies (and less newbies) covers many aspects of the product development on the filesystem. "RichDocument":/documentation/tutorial/richdocument by Martin Aspeli -- Although this tutorial/product is more about creating a new type of content for Plone, It has a short section covering the "use of the ResourceRegistries":/documentation/tutorial/richdocument/resourceregistries The Plone Book by Andy McKay -- There is also a chapter about "Writing a Product in Python":http://docs.neuroinf.de/PloneBook/ch12.rst. DIYPloneStyle ships *Unit Tests Included*.
Even if most of the following references describe the Zope and Plone Unit Testing Framework, it's really easy to adapt them to any product *for* Plone. "PloneTestCase":/products/plonetestcase/ -- PloneTestCase is a thin layer on top of the "ZopeTestCase":http://www.zope.org/Members/shh/ZopeTestCase package. It has been developed to simplify testing of Plone-based applications and products. "How to write unit tests for Plone":/development/info/writing-unit-tests -- This document shows how easy it is to write unit tests and describes how to set up your environment to invoke them. "the ZopeTestCase Wiki":http://www.zope.org/Members/shh/ZopeTestCaseWiki/FrontPage -- A comprehensive documentation about the Zope Unit Tesing Framework. Other Plone Skins Products Most of the graphical designs for Plone that can be found are not yet making use of the Resource Registries, but adapting the code should be easy now that you read this tutorial ;-) The "Products section":/products of plone.org -- Is a central repository for Plone Add-ons. It has a section dedicated to "visual themes":/products/by-category/themes that can be used as a source of useful examples on how to apply new designs to a Plone site. "ploneskins.org":http://www.ploneskins.org/ -- Is another repository for Plone skins. CSS Design "official W3C CSS documentation":http://www.w3.org/Style/CSS/ -- The official Cascading Style Sheets documentation delivered by the Word Wide Web Consortium. "CSS Zen Garden: The Beauty in CSS Design":http://www.csszengarden.com/ -- A demonstration of what can be accomplished visually through CSS-based design. "A List Apart":http://www.alistapart.com/ -- A web magazine that "explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards". Famous book author web sites -- Some authors of books about CSS design like "Eric Meyer":http://meyerweb.com, "Jeffrey Zeldman":http://www.zeldman.com/, "Dan Cederholm":http://www.simplebits.com/ and "Owen Briggs":http://www.thenoodleincident.com have their own web site that are good places for finding documentation, examples and recipes. Mozilla/Firefox Tools and Extensions The following tools are your best friends when you need to inspect the CSS attributes of Plone page elements or find out what id or class you want to override in your stylesheets. "DOM Inspector":http://www.mozilla.org/projects/inspector/ -- This Mozilla tool can be used to inspect and edit the live DOM of any web document. "Web Developer":http://chrispederick.com/work/firefox/webdeveloper/ -- Adds a menu and a toolbar with various web developer tools. "Aardvark":http://www.karmatics.com/aardvark/ -- This extension displays on a Web page the attributes (like ID or class name) of a selected element. "EditCSS":http://addons.mozilla.org/extensions/moreinfo.php?id=179 -- Stylesheet modifier in the Sidebar. "ColorZilla":http://www.iosart.com/firefox/colorzilla/index.html -- Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. It assists web developers and graphic designers with color related tasks - both basic and advanced. "View formatted source (format source extension)":https://addons.mozilla.org/en-US/firefox/addon/697 -- Displays formatted and color-coded source and optional CSS information for each element. You can see exactly which CSS rules match for an element. The rules are displayed including file name and line number. The topmost element is that with the highest priority. You can fold/unfold/hilite block elements (table, tr, td, div, span,...). Really cool feature: select a block level element of interest directly in the page and view it's source! To help you to quickly analyze the source code you can view images directly from the source and add comments to folded block elements. The code view is based on the rendered document, so you will also see dynamically (by Javascript) created and modified html elements! Works also with frames and selected text. "View Rendered Source Chart":https://addons.mozilla.org/en-US/firefox/addon/655 -- Creates a Colorful Chart of a Webpage's Rendered Source Code.
Displays Dynamically Generated HTML and Static HTML Together.
Removes JavaScript Code, Displays JavaScript Output.
Excellent as a Visual Aid in Learning Environments.