iDempiere Atlantic Theme

iDempiere theme based on ZK atlantic theme

You can find the source code here

 

Table of Contents

Screenshots

Install

  1. Download theme fragment (jar file) from releases
  2. Install the fragment jar using Apache Felix Web Console
  3. Login to iDempiere System and open System Configurator:
    1. Set ZK_THEME_USE_FONT_ICON_FOR_IMAGE value from N to Y
    2. Set ZK_THEME value from default to atlantic
  4. Edit idempiere-server.sh and add -Dorg.zkoss.zk.config.path=/WEB-INF/zk-atlantic.xml to VMOPTS so it will looks similar to following
    VMOPTS="...
    ...
    ...
    -Dorg.zkoss.zk.config.path=/WEB-INF/zk-atlantic.xml"
  5. Restart iDempiere

Customize

In this tutorial I will show you how to customize atlantic theme. The new theme will be called Algae with shades of green color palette. You can find the source code of this tutorial here

  1. Install node.js (npm included) and less
  2. Clone/download my custom atlantic base project here
  3. Execute script init.sh
    GROUP ID: org.zkoss.theme
    ARTIFACT ID: algae
    VERSION: 8.6.1
    DISPLAY NAME: Algae
  4. The script is still not perfect so we need to edit some files
    Edit file src/org/zkoss/theme/algae/AtlanticCEThemeProvider.java, AtlanticEEThemeProvider.java, AtlanticPEThemeProvider.java and fix the first line to package org.zkoss.theme.algae;
    Edit file src/org/zkoss/theme/atlantic/AtlanticThemeWebAppInit.java and change these lines
    private final static String ATLANTIC_NAME = "atlantic";
    private final static String ATLANTIC_DISPLAY = "Atlantic";
    to
    private final static String ATLANTIC_NAME = "algae";
    private final static String ATLANTIC_DISPLAY = "Algae";
  5. Now the customization part. Edit file src/archive/web/zul/less/_zkvariables.less and find these lines
    @blueLightest:                 #5E94B8;
    @blueLighter:                  #5687A8;
    @blueLight:                    #4C7895;
    @blueModerate:                 #436983;
    @blue:                         #3A5B72;
    @blueDark:                     #314D60;
    @blueDarker:                   #29404F;
    and change the values, in this case I want shades of green so I change it to these values
    @blueLightest:                 #95b95f;
    @blueLighter:                  #88a857;
    @blueLight:                    #77944c;
    @blueModerate:                 #6a8344;
    @blue:                         #5b733a;
    @blueDark:                     #4c5e31;
    @blueDarker:                   #41512a;
  6. Run command mvn verify in project root folder. After finished it will create file algae-8.6.1.jar in folder target, rename it to just algae.jar
  7. Now it’s time to custom the theme plugin. First you need to fork and clone iDempiere Atlantic Theme plugin then open it in eclipse.

Comments