# iDempiere Atlantic Theme

iDempiere theme based on ZK atlantic theme

You can find the source code here (opens new window)

# Screenshots

. .
Login Login 2
Home Info Window
Window Form Window Grid
Menu Search Window Grid
Popup Window Search

# Install

  1. Download theme fragment (jar file) from releases (opens new window)
  2. Install the fragment jar using Apache Felix Web Console (opens new window)
  3. Login to iDempiere System and open System Configurator:
  • Set ZK_THEME_USE_FONT_ICON_FOR_IMAGE value from N to Y
  • Set ZK_THEME value from default to atlantic
  1. 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"
    
    1
    2
    3
    4
  2. 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 (opens new window)

Algae Login Algae

  1. Install node.js (opens new window) (npm included) and less (opens new window)

  2. Clone/download my custom atlantic base project here (opens new window)

  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";
1
2

...to

private final static String ATLANTIC_NAME = "algae";
private final static String ATLANTIC_DISPLAY = "Algae";
1
2
  1. 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;
1
2
3
4
5
6
7

...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;
1
2
3
4
5
6
7
  1. 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
  2. Now it’s time to custom the theme plugin. First you need to fork and clone iDempiere Atlantic Theme plugin (opens new window) then open it in eclipse.
  • Copy algae.jar to WEB-INF/lib/
  • Edit META-INF/MANIFEST.MF tab Runtime and add WEB-INF/lib/algae.jar to Classpath
  • Edit WEB-INF/zk-atlantic.xml and change the value from atlantic to algae
  • Export the project as deployable fragment then install it using Apache Felix Web Console (opens new window)
Last Updated: 2/10/2021, 8:47:39 AM