Themes

From Tine 2.0 - Wiki

This tutorial describes how to setup a system wide theme for Tine20. It's currently not possible to have per-user themes, but it's planned for future releases.


First of all, download an ExtJS theme from one of the following sites (or any other location of your choice). Please always see and respect the license of the themes!


Unzip the package in your Tine20 folder (recommented is below 'library/ExtJS/') and add the 'themes' array to your config.inc.php:

<?php
  return array(
    .....
    'themes' => array(
       'default' => 1,
       'themelist' => array(
         0 => array(
           'name'          => 'TineSkin',
           'path'          => /styles/tine20.css',
           'useBlueAsBase' => 1,
         ),
         1 => array(
           'name'          => 'ExtJS Red',
           'path'          => /themes/9/resources/css/ext-all.css',
         ),
         2 => array(
           'name'          => '.....',
           'path'          => /themes/.....',
         ),
       ),
    ),
    .....
  );

The first 'themelist' array entry ('TineSkin') is the default theme that is shipped with your installation. You can extend the array with additional themes (like 'ExtJS Red' in the example).

You can place the themes in any folder below your document root. The previous examples searches them in the folder '/themes' ('/' is the document root).

Currently you can only choose one theme for all users by setting the 'default' value to the corresponding number. After reloading Tine20 in your browser, the new theme is active.


The parameters and their function:

  • themes > default - Number of default theme from themelist array
  • themes > forceDefault - boolean value to specify if the default theme will be forced (this property is currently not supported, but will be in a later or service release)
  • themes > themelist - Array of valid themes
  • themes > themelist > ID > name - human readable name of a theme
  • themes > themelist > ID > path - path to the main css file of the theme
  • themes > themelist > ID > useBlueAsBase - compatibility fix, as there are some themes around which need the default blue extJS theme as base