Tigermouse – Theming and UI customisation

Last updated on 11 Sept 2007.

 

1. Global palete file

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.

 

1.1. DESKTOP

This is the colour of background on empty page. It basically defines colour for body element, but may be as well used elsewhere.

 

1.2. BACKGROUND

This is the default colour of all containers that have own background. The most obvious example is TabFolder.

 

1.3. LEGEND

This is a background colour for tooltip. Error messages on some views have this background.

 

1.4. TEXT

Default text foreground colour in your application.

 

1.5. TEXT_BG

Default text background colour in your application.

 

1.6. ERROR_BG

This is a background colour for view with error message. It is not a background colour of tooltip.

 

1.7. SELECTED_TEXT

Selected text foreground in your application. See selected row in Table view.

 

1.8. SELECTED_TEXT_BG

Selected text background in your application. See selected row in Table view.

 

1.9. HIGHLIGHT

Highlighted text foreground. See Window title for example use.

 

1.10. HIGHLIGHT_BG

Highlighted text background. See Window title for example use.

 

1.11. BORDER

Border colour of many UI elements.

 

1.12. BORDER_BRIGHT

Brighter variant of border colour. Use it to emulate 3D-like UI elements.

 

1.13. BORDER_DARK

Darker variant of border colour. Use it to emulate 3D-like UI elements.

 

1.14. WIDGET

Text foreground colour on some widgets. Commonly used in Input or TextArea views.

 

1.15. WIDGET_BG

Text background colour on some widgets. Commonly used in Input or TextArea views.

 

2. Heavyweight theming

It is very likely that amending palete file does not satisfy all you theming needs. Read on to learn more.

 

2.1. Adding own CSS files

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.

 

2.2. Replacing existing CSS files

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.

 

3. Images

It is safe to put your theme images in var/img/ directory. You can also create own entries in palete files containing image URL.

 

3.1. Advise on graphics formats

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.