What is a theme
In short: the theme is the combination of css and images (used in the css). This resources are bundled in a theme module (see the delivered theme-pop module).
So the theme is the design used in your project. As soon we have more than one theme it will become more obvious.
How can I select a theme
There is no nice theme selection yet, but you would change the css files to use in the site configuration (/style/cssFiles). While you are developing you can also point to a file in the docroot or even to an external url (like to the css in subversion)
In case you have the extended templating kit installed you can have multiple site configurations and select theme in the home page's 'page info' dialog
Where are the files stored
In the module jar
- /templating-kit/themes/<name> (subfolder imgs and css)
In Magnolia
- Images: in the dms --> /templating-kit/themes/<name>/img
- Css files: in the resources /templating-kit/thems/<name>/css
Custom themes
- For this purpose we will create a new module (Copy theme-pop structure or follow the steps in http://wiki.magnolia.info/display/WIKI/Module+QuickStart).
- In the module descriptor META-INF/magnolia/nameoftheme.xml you must define the theme version handler:
< versionHandler>info.magnolia.module.templatingkit.setup.ThemeVersionHandler</versionHandler> - Note: your theme requires a config bootstrap file in order to get bootstrapped correctly. It's important to use the following location and filename within your module JAR for this file: /mgnl-bootstrap/theme-<themeName>/config.modules.standard-templating-kit.config.themes.<themeName>.xml (especially note the theme- prefix for the folder name in mgnl-bootstrap).
Workflow
- Hand the html prototype out to your designer (no magnolia)
- Let the designer do the css and images
- Bundle the files in a theme module
- Deploy the theme
CSS: paths to images
You can simply use ../img to reference the images. This allows to maintain the css files and images in the file system while you develop. The correct urls are resolved by a virtual uri mapping.
So when the designer has finished his job you can just copy past his css and img folders.