6. Themes¶

Themes are actually plugins that extend the themePlugin (Zarafa.core.ThemePlugin) Everything you want to do in a plugin can also be done in a theme.

For an example theme see: https://stash.kopano.io/projects/KWA/repos/themeexample/browse

Note: themes can be disabled in config.php since WebApp 5.0.0.

6.1. Setting the default theme¶

Default themes can be added in the config.php. If the login page is modified in a a theme, all users will see this by default. When a user has selected a different theme in settings, they will see this login page after login (When WebApp reads out the settings).

The theme directory name should be added in config.php, not the theme display name.

6.2. Basic themes¶

A common theme structure is:

themecompany
                js/ThemeCompany.js
                img/
                css/
                manifest.xml
                favicon.ico

When the theme is default or chosen by the user, the css is loaded automatically.

Example of manifest.xml

<?xml version="1.0"?>
<!DOCTYPE plugin SYSTEM "manifest.dtd">
<plugin version="2">
        <info>
                <version>1.0</version>
                <name>themecompany</name>
                <title>Company Theme</title>
                <author>You as new developer</author>
                <authorURL>http://www.yourwebsite.com</authorURL>
                <description>Anything you would like to have.</description>
        </info>
        <components>
                <component>
                        <files>
                                <client>
                                        <clientfile load="source">js/ThemeCompany.js</clientfile>
                                        <clientfile load="debug">js/ThemeCompany.js</clientfile>
                                        <clientfile load="release">js/ThemeCompany.js</clientfile>
                                </client>
                        </files>
                </component>
        </components>
</plugin>

Example of ThemeCompany.js:

// Create the namespace that will be used for this plugin
Ext.namespace('Zarafa.plugins.themecompany');

/**
* A theme plugin should extend {@link Zarafa.core.ThemePlugin}. If it only changes the css
* there is nothing to implement in this class.
* @class Zarafa.plugins.themecompany.ThemeCompany
* @extends Zarafa.core.ThemePlugin
*/
Zarafa.plugins.themecompany.ThemeCompany = Ext.extend(Zarafa.core.ThemePlugin, {});

// Register the plugin with the container after the WebApp has loaded.
Zarafa.onReady(function() {
        container.registerPlugin(new Zarafa.core.PluginMetaData({
                // To avoid problems the name of a plugin should be exactly the same as the
                // the name of the directory it is located in.
                name : 'themecompany',
                // The displayName is what will be shown in the dropdown in which the user can pick a theme
                displayName : _('Company Theme'),
                // Do not allow the user to disable this plugin
                allowUserDisable : false,
                // Do not show this plugin in the plugin list
                allowUserVisible : false,
                pluginConstructor : Zarafa.plugins.themecompany.ThemeCompany
        }));
});

6.3. JSON themes¶

JSON themes were added to make theming a bit easier. The downside is that JSON themes do not support Javascript changes. If you are in need of JS changes (think of new functionality or new buttons), we recommend the basic theme structure.

A common JSON theme structure is:

themecompany
                theme.json
                resources/img/
                resources/css/

Example

{
        "display-name": "themecompany",
        "background-image": "resources/img/bg.jpg",
        "logo-large": "resources/img/logo_company_wide.svg",
        "spinner-image": "resources/img/spinner.svg",
        "primary-color": "#0033a0",
        "sprimary-color:hover": "#4d94ce",
        "selection-color": "#b9dcf5",
        "action-color": "#0033a0",
        "stylesheets": "resources/css/themecompany.css",
        "icons-primary-color": "#222222",
        "icons-secondary-color": "#0033a0"
}