Last updated on 11 Sept 2007.
The most fundamental element in Tigermouse theming engine is plaete file.
It is located in var/palete.js and contains colour definition for common
UI elements in JSON format. Each value is discussed below.
Variables defined in palete file are used in CSS files. Tigermouse theming engine
parses CSS files it finds in view/ directory and replaces variable names
with respective values. It uses regular Smarty tags with double brackets delimiters.
See any CSS file for example.
Use palete file to manage colours globaly. You are not restricted to currently defined colour definitions. You can create own names and use them in your CSS files.
This is the colour of background on empty page. It basically defines colour for body element,
but may be as well used elsewhere.
This is the default colour of all containers that have own background. The most obvious example is TabFolder.
This is a background colour for tooltip. Error messages on some views have this background.
Default text foreground colour in your application.
Default text background colour in your application.
This is a background colour for view with error message. It is not a background colour of tooltip.
Selected text foreground in your application. See selected row in Table view.
Selected text background in your application. See selected row in Table view.
Highlighted text foreground. See Window title for example use.
Highlighted text background. See Window title for example use.
Border colour of many UI elements.
Brighter variant of border colour. Use it to emulate 3D-like UI elements.
Darker variant of border colour. Use it to emulate 3D-like UI elements.
Text foreground colour on some widgets. Commonly used in Input or TextArea views.
Text background colour on some widgets. Commonly used in Input or TextArea views.
It is very likely that amending palete file does not satisfy all you theming needs. Read on to learn more.
All CSS files you place in view/ directory or below are merged
in one file and sent to the browser. Order of merge may vary depending on
creation or modification time. If you want a fixed order you have to amend
view/core-views/Index.tpl.
You can then replace CSS files for views you wish to theme on your own. You can also modify template files for certain views. See User Documentation for further instructions on how to write templates.
It is safe to put your theme images in var/img/ directory.
You can also create own entries in palete files containing image URL.
There are variety of formats you can use to save your image. On the web there are three most popular formats: JPEG, GIF and PNG.
JPEG (Joing Picture Experts Group) is lossless/lossy compression format for high colour images. Ideal for photography. Poor for UI elements due to detail loss during compression and large palete size. Does not support transparency.
GIF (Graphics Intercharge Format) is a lossless compression format for low colour images. Decent for icons, bullet points, borders. Rarely used for photography due to low colour range. GIF does support transparency. It also supports semi-transparency, but the algorithm is subject to patent claims, so no browser support semi-transparent GIFs. When using transparency it sometimes lefts rough edges on rounded shapes.
PNG (Portable Network Grapghics) is a lossless compression format for both, high and low colour images. When in RGBA mode it supports versatile colour palete and in Indexed mode it behaves more like GIF. In both modes transparency and semi-transparency is supported, although due to terrible bug in Internet Explorer 6, it is displayed correctly only when in Indexed mode with full transparency. In most cases PNG offers file sizes smaller than GIF.