Skins for WebOffice flex

With WebOffice flex you can adapt/create styles either for specific projects or for the entire application.

All files needed for customization can be found in: C:\Tomcat\webapps\<WebOffice application>\pub\client_flexjs\skins.


Customize the WebOffice flex user interface on application level (all projects) by adapting the files of existing skin named user"

Create your own skin for WebOffice flex on project level (project specific) by using the sampleskin folder


See chapter Project Skins for more information about predefined skins for WebOffice flex. Please do not edit any of the predefined skins (blue, navajowhite3, olivedrab, vertigisfm) because these skins are maintained by the WebOffice team and can be part of any WebOffice service pack or release.


In order to create your own skin

1.make a copy of the folder sampleskin

2.rename the folder to your desired skin name

3.change definitions in this new folder for changes on project level


Every skin folder contains the following files:

colors.jsp: a general color definition file for changing the user interface. The colors are defined in standard CSS RGB syntax Red, Green, Blue"

properties.json: a JSON definition file to get used with the Esri Javascript API, e.g. holding definitions for client side graphics, etc.

styles.css: a standard CSS definition file for changing user interface definitions besides the colors defined in colors.jsp (e.g change of the splashscreen)


It is not possible to use color definitions from colors.jsp inside this styles.css file

styles_rtl.css: if you are supporting a right-to-left application (e.g. Arabic) these standard CSS definition file holds additional information for positioning


Description of color variables and where they are used within the WebOffice flex user interface:

CIColor: active state color

activated tool

activated map view

activated basemap

activated selected list values (i.e. print scale/format)

color of the overview extent

color of the popup marker


baseColor: background color

background color toolbars

background color widgets

background color inactive widget headers

background color value lists

background color overview map

background color popups

background color download center header

background color basemap


Be aware that you may have to adjust icons for predefined queries when changing this value.


inputColor: default color for font and icons

default color text

default color icons

default color widget text

default color text initialization


separatorColor: color for separator lines and outlines

separators toolbar

separators widgets

separators popups

outlines buttons/input fields


overlayDarkColor: hover color

hover queries

hover value lists

hover context menu

hover active lines initialization


headerColor:  Header

active Widgetheader

PopUp Header


headerFontColor: font color header

font color active widget headers


footerColor:  Footer

PopUp Footer


footerFontColor: font color footer

font color active popup footers


Be aware that you may have to adjust icons for external applications when changing this value.


opaque: transparency for separators

change is not recommended


The following color values will be used by default:

CIColor = 236,146,40";

baseColor = 255,255,255"; (white)

inputColor = 102,102,102";

separatorColor = 190,190,190";

overlayDarkColor = 0,0,0";

headerColor = 246,246,246"; (very bright grey)

headerFontColor = 102,102,102";

footerColor = 246,246,246"; (very bright grey)

footerFontColor = 102,102,102";

opaque = 0.75";


Standard Theme des WebOffice flex Clients

Standard Theme des WebOffice flex Clients


Example of a dark theme for WebOffice flex client user interface:

String CIColor = 236,146,40";

String baseColor = 54,54,54";

String inputColor = 226,226,226";

String separatorColor = 85,85,85";

String overlayDarkColor = 255,255,255"; (white)

String headerColor = 41,41,41";

String headerFontColor = 255,255,255"; (white)

String footerColor = 41,41,41";

String footerFontColor = 255,255,255"; (white)

String opaque = 0.75";


Dark Theme für WebOffice flex Client

Dark Theme für WebOffice flex Client


All the definitions mentioned above are loaded in the following order:

WebOffice default user interface

user skin (application scope)

project skin (project scope)


Thus, if you want to change only a small part of the user interface it is not needed to copy all definitions to your user or projects skin. Only definitions you want to change need to be used in a lower level skin.



Detailed information regarding the customization of the WebOffice flex client can be found in chapter WebOffice flex Client.

Detailed information regarding the use of skins in WebOffice flex can be found in chapter Project Skins.


To prevent problems overriding the user skin and your own skin definitions by a WebOffice service pack or release, please make a backup of these skins before installing the newer WebOffice version.