Themes

Workflow Manager Developer Guide

HGD_Variant
15.00
HGD_Product
GeoMedia Smart Client
HGD_Portfolio_Suite
Platform

The Graphical User Interface (GUI) of all Workflows are styled with a theme. As theme we name basically a specific folder and file structure in the "Content"- folder of your Workflow installation directory (see Fig. Theme-structure below). All themes, no matter if they are customized or not, base on our default theme. This means that a theme inherits all rules and variables of style and layout of our default Theme-files, which allows you to override and customize the whole workflow style in your own theme with only a few steps. See the Creating a custom workflow theme (How To) tutorial for more information.

Folder and file structure

As you can see in Fig. Theme-structure all themes have to be placed in the "workflow-themes" - folder, which you will find in "Content\Css\" of your Workflow installation directory.

light_bulb_icon The folder name is the name of your theme. On the figure below it is "MyTheme."

Theme_structure

Fig. Theme-structure

Theme-files

A theme folder always contains at least six theme-files, which have always be named like in Fig. Theme-structure. Five less (also known as dynamic stylesheet) files (see http://lesscss.org/) and one Cascading Style Sheet (CSS) (see http://www.w3.org/Style/CSS/). The less theme-files are always getting loaded, contrary to the css theme-file, named "rtl.css". This css theme-file contains special rules which effects the style and layout only if the workflow is loaded with a language, which is written right-to-left (rtl) (see http://www.w3.org/International/questions/qa-scripts.en.php).

light_bulb_icon "rtl.css" is only loaded for right-to-left writing systems (see http://www.w3.org/International/questions/qa-scripts.en.php#directions).

There are two different groups of less theme-files in the theme-folder. Theme-files prefixed with "theme-" we call "root-theme-files" and theme-files prefixed with "variables-" we call "theme-variables-files". The root-theme-file is the first entry point while loading the theme, it contains the theme name and imports of other necessary less files, optional it is possible to add there your custom style rules. The first two lines of a root-theme-file are mandatory, otherwise the theme is not getting loaded.

Rule for root-theme-file:

The first two lines of a root-theme-file are mandatory. See following examples.

Example of theme-content.less of a custom theme. Theme name is 'MyTheme'.

//theme-content.less in your custom theme folder
@ig-theme: 'MyTheme'; //<- value depends on your theme name
@import '../../ig/ig-content-less.less'; //<- value isn´t alterable

Code snippet of the first two lines of theme-content.less

Example of theme-menu.less of a custom theme. Theme name is 'MyTheme'.

//theme-menu.less in your custom theme folder
@ig-theme: 'MyTheme'; //<- value depends on your theme name
@import '../../ig/ig-menu-less.less'; //<- value isn´t alterable
Code snippet of the first two lines of theme-menu.less

The layout of a workflow is separated into two sections (see Fig. Layout-sections) therefore we obtain two root-theme-files, theme-content.less and theme-menu.less. Each root-theme-file has its own theme-variables-file, which contains the style-variables ("variables-content.less" and "variables-menu.less"). The layout-variables are placed in "variables-layout.less", which is getting separately loaded. Style-variables are used to define the color-scheme of your workflow and layout-variables are used to define the sizing and layout of your form elements in your workflow. We decide to separate them, to make editing and customization of themes easier. See the Creating a custom workflow theme (How To) tutorial for more information.

Layout_sections

Fig. Layout-sections

Theme-files import and process order

The theme-files are getting loaded and processed in a specific order, which allows you to override and customize all base variables and base rules in your custom theme.

Content section steps (see Fig. Import and process order (Content) for graphical representation)

  1. Loading the base content-rules of the 'Default Content Theme'. Overriding existing content-rules with custom content-rules of your 'Custom Content Theme' and attaching new custom content-rules. Building the result of content-rules for style and layout of the content section.
  2. Loading the base style content-variables of the 'Default Content Theme'. Overriding existing style content-variables with your custom style content-values of your 'Custom Content Theme' and attaching new custom style content-variables. Building the result of content-variables for the style-rules.
  3. Loading the base layout-variables of the 'Default Content Theme'. Overriding existing variables with your custom layout-values of your 'Custom Content Theme' and attaching new custom layout-variables. Building the result variables for the layout-rules.
  4. Less-parser generates with the three result sets the final Cascading Style Sheet (CSS).

light_bulb_icon The content theme process always inherits the whole default content theme, therefore you don´t have to redefine all variables or rules in your custom content theme, but only those which you want to change for the content section.

Theme_import_and_process_order

Fig. Import and process order (Content)

Menu section steps (see Fig. Import and process order (Menu) for graphical representation)

  1. Loading the result of content-rules for style and layout. Overriding existing rules with menu-rules of 'Default Menu Theme' and after that overriding existing rules with your custom menu-rules and attaching new custom menu-rules of your 'Custom Menu Theme'. Building the result of menu-rules for style and layout of the menu section.
  2. Loading the result of content style-variables. Overriding existing variables with menu-variables of 'Default Menu Theme' and after that overriding existing variables with your custom menu-variables and attaching new custom menu-variables of your 'Custom Menu Theme'. Building the result of menu-variables for style of the menu section.
  3. Loading the result of content layout-variables.
  4. Less-parser generates with the three result sets the final Cascading Style Sheet (CSS).

light_bulb_icon The menu theme process always inherits and overrides the result of the content theme process, therefore you don´t have to redefine all variables or rules in your custom menu theme, but only those which you want to change for the menu section.

Theme_Import_and_process_menu

Fig. Import and process order (Menu)

Variables

As theme variables we define all variables in the theming context (see http://lesscss.org/#-variables less variables for usage).

Style-variables

KendoUI Web Theme variables

More than half of our theme style-variables are coming from Kendo-UI (see http://www.telerik.com/kendo-ui). They provide a online tool (see http://demos.telerik.com/kendo-ui/themebuilder/ to change the styling of the Kendo-UI Web elements and download the result style-variables. Open the KendoUI Web Themebuilder at (see http://demos.telerik.com/kendo-ui/themebuilder/) and follow the instructions to get the KendoUI Web theme style-variables. We provide the whole KendoUI Web Theme content in your workflow installation directory, therefore, you don´t need to link to online KendoUI resources (for example, style-variable 'image-folder').

Download our LessThumb.PNGdefault KendoUI Web Theme variables.

light_bulb_icon Don´t forget to change the KendoUI Web Theme 'path-variables'

Example of modification of path variables from KendoUI if you choose KendoUI Theme 'Silver' with 'Default' image-folder

KendoUI variable

default value

change to (value of our default theme)

@image-folder

"http://da7xgjtj801h2.cloudfront.net/2013.2.918/styles/Default"

"Default"

@tooltip-texture

(http://cdn.kendostatic.com/2013.2.918/styles/textures/highlight.png);

url('../textures/highlight.png');

Table Modification of KendoUI path variables

KendoUIThemebuilder

Fig. KendoUI Web Themebuilder

Workflow Theme variables

A Workflow Theme variable name starts always with 'ig-', after that it is labeled the form element / section name, html markup id or the id of the wrapping markup container and ends with a cascading style sheet property name. E.g. ig-menu-color defines the css color property (see http://www.w3schools.com/cssref/pr_text_color.asp) of the workflow menu.

Download our default Workflow Theme style-variables.

List of all Workflow Theme style-variables

Form element/section

variable name

variable value in default theme

Body

ig-base-font-family

ig-base-font-size

ig-base-line-height

ig-base-text-color

ig-base-body-background

Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif

11px

18px

black

none repeat scroll 0 0 #E1E1E1

Content Container

ig-content-background

#ECF3FF

Actions and Buttons

ig-action-color

ig-action-hover-color

ig-action-border

ig-action-upload-width

ig-rowaction-background-color

ig-rowaction-color

ig-rowaction-border

ig-rowaction-hover-background-color

ig-rowaction-hover-color

ig-rowaction-hover-border

inherit

inherit

1px solid #DDDBDB

100px

@button-background-color

black

1px solid #DDDBDB

#A99F9A

black

1px solid #DDDBDB

Tabs

ig-tabstrip-border-color

ig-tabstrip-font-weight

ig-tabstrip-font-active-weight

ig-tabstrip-font-size

ig-tabstrip-font-active-size

ig-tabstrip-color

ig-tabstrip-color-active

ig-tabstrip-color-hover

ig-tabstrip-background-hover

@selected-border-color

inherit

inherit

inherit

inherit

inherit

inherit

inherit

inherit

DebugMode Wrapper

ig-debugmode-wrapper-background-color

ig-debugmode-wrapper-border-color

ig-debugmode-wrapper-text-color

white

#CC0000

black

Error

ig-errormessage-border-color

ig-errormessage-background-color

ig-errormessage-text-color

ig-error-hint-background

ig-errorcount-color

#CC0000

#CC0000

white

url("../img/iconError.png") no-repeat scroll right top white

#CC0000

Menu

ig-menu-container-background

ig-menu-border-color

ig-menu-header-background

ig-menu-header-font-weight

ig-menu-header-font-size

ig-menu-header-color

ig-menu-header-padding

ig-menu-border-radius

ig-menu-border-width

ig-menu-border-style

ig-menu-font-size

ig-menu-color

ig-menu-selected-color

ig-menu-text-align

ig-menu-content-splitter

ig-menu-hover-background

ig-menu-collapse-bg-position

ig-menu-collapse-hover-bg-position

ig-menu-expand-bg-position

ig-menu-expand-hover-bg-position

#FFFFFF

@widget-border-color

#1d4699 url('../textures/menu_highlight.png')

bold

inherit

#FFFFFF

0px 8px

7px

2px

solid

inherit

#2980b9

white

inherit

none

repeat 0 center #9DC4E0 @texture

-16px 0px

-16px 0px

-16px -32px

-16px -32px

Header

ig-header-background

ig-header-text-color

ig-header-text-weight

#1d4699 url('../textures/menu_highlight.png')

white

bold

History

ig-history-active-text-decoration

ig-history-active-text-weight

ig-history-active-text-color

underline

bold

white

Footer

ig-footer-background

ig-footer-wrapper-margin

#1d4699 url('../textures/menu_highlight.png')

7px

Notify

ig-notify-background

ig-notify-text-color

ig-notify-text-weight

ig-notify-border-color

ig-notify-border-width

none repeat scroll 0 0 #FAEBC2

black

bold

#593C07

2px

Links

ig-a-text-color

ig-a-text-color-hover

#093366

#093366

Label

ig-label-text-color

ig-label-text-align

black

right

Root

ig-root-background-color

ig-root-background-image

ig-root-background-image-nonavigation

#ECF3FF

url("../img/gradient.png")

url("../img/gradient_small.png")

Group

ig-group-splitter-color

ig-group-legend-splitter

white

none

Help

ig-help-icon-size

27px

Upload / FormFile / File Picker

ig-upload-background

ig-upload-empty-border-color

ig-upload-empty-border-width

ig-upload-empty-border-style

ig-upload-icon-error-position

ig-upload-icon-success-position

ig-upload-icon-progress-position

ig-upload-icon-initial-position

ig-upload-initialfile-background

#FFFFFF

@widget-border-color

1px

solid

-176px -240px

-48px -32px

-48px -192px

-112px -288px

@ig-upload-background

Error

ig-errormessage-color

ig-errormessage-bgcolor

ig-errorsummary-color

ig-errorsummary-bgcolor

ig-errorcount-color

#fff

#e02104

black

#e02104

#e02104

Icons

ig-icon-sprite

ig-icon-help-pos

ig-icon-play-pos

ig-icon-pause-pos

ig-icon-stop-pos

ig-icon-undosorting-pos

ig-icon-download-pos

ig-icon-save-pos

ig-icon-new-pos

ig-icon-cancel-pos

ig-glyphicons

ig-icon-report-detail-pos

ig-icon-report-overview-pos

ig-icon-report-pdf-pos

ig-icon-report-docx-pos

ig-icon-report-xlsx-pos

ig-icon-report-html-pos

ig-icon-report-csv-pos

url("../img/ig-icon-sprite.png")

0px 0px

-16px -16px

0px -16px

-32px -16px

-16px 0px

0px -32px

-16px -32px

-32px -32px

-32px 0px

url("../img/glyphicons-halflings.png")

0px -48px

-16px -48px

-32px -48px

-48px -48px

-64px -48px

-80px -48px

0px -64px

Global

ig-background-color

ig-editable-false-background-color