Theme Directory Structure

From Zimbra :: Wiki

Jump to: navigation, search
Developer Article

Article Information

This article applies to the following ZCS versions.
  ZCS 4.5 Article  ZCS 4.5

Components of a ZCS Theme

For information about ZCS 5.0 Themes, see the ZWC 5.0 Themes

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/ (in ZCS 5.0, /opt/zimbra/jetty/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.

Personal tools