Difference between revisions of "Theme Directory Structure"

(Making themes component structure more visible)
Line 1: Line 1:
===Components of a ZCS Theme ===
A theme is composed of a single directory which contains a number of text and image files. Generally, the names of the text files are prefixed with the name of the theme. For example, for the theme named '''sand''', you would use files '''sand.html''', '''sand.xml''', etc. In this document, whenever you see '''[theme]''' in a file name, substitute the name of your theme (e.g., '''[theme].xml''' in the '''sand''' theme would really mean file '''sand.xml''').
All theme files live in the '''/opt/zimbra/tomcat/webapps/zimbra/skins/''' directory. In general, each directory there corresponds with a single theme available to users of the ZCS. Note that the directories '''.../skin/_sample/''' and '''.../skin/_base/''' are special directories used to create themes -- these are not exposed as themes to the user.
To create a new theme, create a folder with the name of your theme in the '''.../skins/''' directory. (The examples will use the theme name test). Note that currently, spaces are not allowed in the folder name. Within this folder you can have the following files:
* '''[theme].xml''' (mandatory): This is the "manifest" for your theme, which details all of the other files that make up the theme. See The Theme Manifest below.
* '''[theme]_subs.txt''' (mandatory): This sets up a number of substitutions which are performed in the other theme files that customizes their appearance. For example, this is where the background color of elements are set, where fonts are defined, etc. See Editing Theme Substitution Files below.
* '''[theme].html''' (optional): This is the HTML responsible for drawing the theme, along with the javascript required to show or hide parts of the theme dynamically. In general, you will be pointing to an HTML file in the '''skins/_base''' directory rather than creating your own. See Editing Theme HTML and CSS files.
* '''[theme].css''' (optional): This is CSS definitions that are paired with the elements in ['''theme].html'''. In general, you will be pointing to a CSS file in the skins/_base directory rather than creating your own. See  Editing Theme HTML and CSS files.
Note that some of the files listed above are deemed (optional) -- for these files, some you can omit entirely, and for some you can set things up in the manifest to use the corresponding file in another theme. See The Theme Manifest section for details.
(Network Edition) For example, to fully create a theme named test, you might have the following directory structure:<br /> '''.../skins/test/'''<br />''' test.xml'''<br />'''test_subs.txt'''<br />'''test.html'''<br />'''test.css'''<br />'''logo'''/<br /> '''AppBanner.png'''<br />'''LoginBanner.png'''<br />

Revision as of 17:16, 28 February 2007

Jump to: navigation, search