Add your theme

From iDempiere en
Jump to navigation Jump to search

This tutorial will present you how to add and manage customized themes in iDempiere.

Some resources :

- IDEMPIERE-724: Zk: Make iDempiere theme more easily customizable
- Google Group : How to customize image

The main theme is located in org.adempiere.ui.zk\theme\default (default is its name) ; it is subdivided in 3 parts : css, images and zul.


From Eclipse, add a fragment Right click / New / Other


Search for 'fragment' Select 'Fragment Projet' from 'Plug-in Development' and click on Next.


Project name : whatever you want Location: By default, Eclipse store plugins in the main project ; i'd prefer to gather them in another directory. Click on Next


In Plug-in ID, search for org.adempiere.ui.zk (using Browse) Click on Finish The plugin is being created. Then you should see it in the Package Explorer.

Now you can copy the content of org.adempiere.ui.zk\theme\default into myThemes\theme\myFirstTheme (where myFirstTheme will be the name of your theme). You can do it from Eclipse or from OS (in this case, you will have to refresh the myThemes plugin).

Edit the MANIFEST.MF (located in myThemes > META-INF > MANIFEST.INF). On the overview tab, check the 'This fragment is a singleton' box. On the Runtime tab, add 'theme' in the Classpath


Note: you must also add a line (see the last line) in the MANIFEST.MF tab because of this problem:

Manifest-Version: 1.0
Bundle-ManifestVersion: 2
Bundle-Name: Webui
Bundle-Version: 1.0.0.qualifier
Fragment-Host: org.adempiere.ui.zk;bundle-version="4.1.0"
Bundle-RequiredExecutionEnvironment: JavaSE-1.8
Bundle-ClassPath: theme/
Jetty-WarFragmentFolderPath: /

Note: you must have a hard return after the '/' to end the file.

Save the manifest.

Then you can replace original contents with yours: images are stores in myThemes\theme\myFirstTheme\images login page is in myThemes\theme\myFirstTheme\zul\login etc.

Test your theme from Eclipse. You have to duplicate the server.product launch and add a VM argument: -DZK_THEME={myFirstTheme}. Think also to add the fragment project to the selected plugins.

And for testing outside Eclipse, you simply have to deploy myThemes fragment project on your running instance of iDempiere. Then, log in System set the ZK_THEME System Configurator to myFirstTheme


Then, you can refresh your browser ;)

Another useful System Configurator key is ZK_BROWSER_TITLE which you can create manually to customize the text that will be shown in the tab of your browser.

There is a known issue with custom theme fragment in iDempiere3.0(Dev) due to migration to Jetty, which is why you need to add the line 'Jetty-WarFragmentFolderPath: /'. Refer