Contents of 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. The kit includes the source files for a sample theme. The theme is a very simple one that essentially applies the default site decoration.

The directory hierarchy in your theme is important; things break if you don't follow the correct pattern. What's in the resource kit is a good example, with a root directory that has subdirectories for images, styles, and template. Within the template directory, the hierarchy is also important.

Location	Description
`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.

Soy and FreeMarker files in the Theme Resource Kit

The custom theme you build from this kit has its own FTL or Soy file which modifies 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.

CAUTION:

All of these files are applied globally — that is, on nearly every page of your site.

Location	Description
`header-css`	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`	Links to the favicon files.
`header-meta`	Meta tags for the page header.
`logo.soy`	The logo.