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

 

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)

•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

 

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

 

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

 

 

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

 

 

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.