Difference between revisions of "Theme Management"

From ADempiere
Jump to: navigation, search
This Wiki is read-only for reference purposes to avoid broken links.
m (Intermediate save - incomplete)
 
m (Intermediate save - incomplete)
Line 28: Line 28:
  
 
[[File:ThemeResources.png]]
 
[[File:ThemeResources.png]]
 +
 +
== User Preferences ==
 +
 +
[[File:Changing Theme.jpg]]

Revision as of 20:12, 27 May 2014

Table of Contents{{#if: | | [[{{{2}}}]] }}{{#if: | | [[{{{3}}}]] }}{{#if: | | [[{{{4}}}]] }}{{#if: | | [[{{{5}}}]] }} | Theme Management{{#if: | | [[{{{next}}}]] }} ⇒

Note.gif Note:

This applies to the ZK 7 upgrade to 380RC1.

ADempiere has two user interfaces, a client GUI based on the java Swing system and a web based application which uses ZK. The look and feel of both interfaces could be modified to apply custom skins. This document describes who the ZK themes are managed following the upgrade to ZK7. The theme system is a major enhancement in ZK7 and allows developers to easily create and apply themes to the application through customized Cascading Style Sheet (CSS) files. In ZK7, the processes of creating the CSS files and managing the collection of files has been improved by the adoption of a CSS preprocessor known as "less". Less allows the developer to use variables and functions to simplify the creation of the css files. Please refer to the ZK documentation (www.zk.org) and the less documentation (lesscss.org) for more about their capabilities.

Note.gif Note:

Adempiere has been integrated with the Community Edition (CE) of ZK7 which provides access to the ZK source. The Enterprise Edition (EE) includes responsive design elements for tablets. Developers can integrate this additional functionality for a fee.

In ADempiere, the ZK theme systems and less have been incorporated to allow developers to create new themes, define system defaults and also to provide users with a means of selecting a theme or preference. Themes are stored in jar files or as folder structures in the zkwebui/theme directory. If no theme folder is provided, the internal Breeze theme will be used. To customize the look and feel, add new styles and override the ZK styles, additional css files can be applied in addition to the main theme. These additional files are injected or added to the page when it is rendered.

There is one default theme "adempiere_default" which is very similar to the Breeze theme in look and feel. The application will fall back to this theme if no other system defaults are defined. With the Theme Management window, additional themes can be defined and made available to the system. The process is as follows:

  • Copy one of the existing themes to a new folder under the zkwebui/theme directory. The folder name will be the new theme name. The path prefix "~./" is used to indicate the current theme so files within this new folder can be found.
  • Modify the less files within this folder structure as required to customize the theme. Most of the customization can be done within the ~./zul/less/_zkvariables.less file. This file contains the colors, sizes and that will be used by the rest of the theme system.
  • Create additional less files to override and add new styles as required. These can be saved in the zkwebui/less directory. When compiled, these files will create css.dsp files in the zkwebui/css directory.
Note.gif Note:

Developing a theme by customizing the css files within the theme folder is not very friendly. It is easier to develop the required styles outside the folder as these can be compiled by less and applied by refreshing the browser. Alternatively, the developer can explore integrating less in the browser. Neither route is ideal for production so the customizations should be moved into the folder structure where applicable. On page load, all the css.dsp files that are part of the language definition are loaded into a single zk.wcs file which can be cached at the browser to improve performance.

  • In ADempiere, log in as System and access the Application Dictionary{{#if: Theme Management | →Theme Management }}{{#if: | → }}{{#if: | → }} window. Here you can define the key elements of the theme:
    • Theme Name - same as the folder name (adempiere_default)
    • Display Name - the string to use to identify the theme (Adempiere Default)
    • The origin of the theme - Folder or Jar
    • The priority for the theme - used if to select the theme from all those registered if there is no default defined or multiple defaults defined.
    • If the theme is a default theme - used by the logon window and as a user default.
    • Whether the theme should be cached or not. Deselect this during development and select it in production.
    • The cache hours - the length of time the browser is allowed to keep the cached theme files.
  • In the Theme Resource tab, add the path(s) to any additional css files or resources required by the theme. These will be added to the page header.

ThemeManagement.png

ThemeResources.png

User Preferences

Changing Theme.jpg