Contents of 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.

The directory hierarchy in your theme is important; things will 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, template, and so on. Within the template subdirectory, 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 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.

CAUTION:

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

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