A proper foundation

Creating a clean slate using DIYPloneStyle To get a clean product we can base our product on, we do the following: 1. "Download DIYPloneStyle":/products/diyplonestyle if you don't have it already. (Get the version that corresponds to your Plone version, this will be evident from the version numbering. If you have Plone 2.1.x, you're looking for the latest release in the DIYPloneStyle 2.1.y series, if you're on Plone 2.5, you want version 2.5.y etc.) 2. Unpack the file using tar or WinRAR or an equivalent tool (WinZip is not recommended, it has several bugs wrt. handling paths and empty files). 3. Place the product in your products directory. If you're not sure where your products directory is, it is listed in the same location as you install your Plone products when Plone is running. If you want to see what we will end up with, you can restart the Plone server process, go to Add/Remove Products and install DIYPloneStyle. This is approximately how it will look when we're done with this tutorial. That's cheating, though. ;) Make sure you uninstall it again if you did this, and then we create the empty skin product. From the terminal or command line, do the following (adjust for the platform you are on; Windows uses \ instead of /, and the Python binary might need to be explicitly called, for example 'C:\Program Files\Plone\Python\bin\python.exe') :: cd Products/DIYPloneStyle python bin/generator.py --productname MyTheme This will generate an empty skeleton product called 'MyTheme' where all our files can be placed in our Products directory. The directory structure (excluding some of the less relevant files, directories in bold) looks like this: - config.py (your theme configuration) - **Extensions** (the files needed to install the product in Plone) - Install.py (the install file) - utils.py (utility methods used when installing/removing) - refresh.txt (makes it possible to use the Refresh tab in ZMI when adding new files instead of restarting) - **skins** (directory where the skin layers are) - **mytheme_styles** (where you put your templates and CSS) - base.css.dtml (an empty css file that overrides its Plone equivalent) - base_properties.props (basic color properties; not used in this tutorial, but handy if you just want to do simple color changes) - generated.css.dtml (an empty css file that overrides its Plone equivalent) - mytheme.css.dtml (our CSS file) - portlets.css.dtml (an empty css file that overrides its Plone equivalent) - public.css.dtml (an empty css file that overrides its Plone equivalent) - **tests** (unit tests for your product) - version.txt (the version indicator that shows up in Plone) If you restart your Plone server process and go to the Add/Remove Products section, you will see MyTheme listed as an installable product. Install the product, and notice how you now have a mostly unstyled Plone when you view the front page: A Plone without any styles applied (click for full screen view)
This provides an excellent starting point for our theme.