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

Note: 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, prooffice) 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)

Note: 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

Note: 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

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

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.

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

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

Note: 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.