|Developing Custom Themes / Using the Theme Resource Kit|
The theme resource kit is a ZIP file containing source files which you can use as a model to create a custom theme for your site. As described below, the kit includes the source files for a sample theme. The theme is a very simple one that essentially applies the default site decoration.
|sampleTheme||The directory containing example source files that make up a very basic theme.|
|sampleTheme/images||Contains the default images to use as examples. These include favicon files and site page headers. You can replace these with your own.|
|sampleTheme/soy||Contains the default Soy files to use as examples. You can replace these with your own.|
|sampleTheme/styles||A CSS file with styles needed by the FreeMarker templates in this kit. You can add your own styles if you need them.|
|sampleTheme/template||Your FreeMarker template files will go in this directory. If you use other FTL files, they'll go here, too.|
|sampleTheme/template/decorator/default||Contains FTL files that are used unless overridden.|
|source_art||Contains Photoshop source files for the UI sprites. Edit these to create new images.|
The custom theme you build from this kit will have its own FTL or Soy file which will modify default application appearance.
FreeMarker and Soy template files are bits of the user interface that are assembled at run time. By breaking the UI into smaller pieces, it's easier to manage UI variations (and similarities) from page to page. For example, having an FTL or Soy file that contains code for the favicon makes it possible to maintain only a single file for the favicon, rather than copying that code to multiple files.
The following table includes descriptions of each of the included Soy and FreeMarker files.
|header-css||Brings references to the CSS stylesheets. Uses if/else blocks to include the right set of styles based on the context in which the page is being rendered, such as whether the site is an internal or external community.|
|header-favicon||Brings links to the favicon files.|
|header-meta||Brings meta tags for the page header.|
|logo.soy||Brings the logo.|