Theme

From GeoMedia Smart Client
Jump to: navigation, search
Design Views and Templates Theme Examples

GMSC 2014


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). 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 (see Creating a custom workflow theme (How To)) with only a few steps.



Pfeil new.png To the top Pfeil new.png

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.

Blue.pngThe folder name is the name of your theme. On the figure bellow it´s "MyTheme"



Fig. Theme-structure
Fig. Theme-structure



Pfeil new.png To the top Pfeil new.png

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 and one Cascading Style Sheet (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).

Blue.png"rtl.css" is only loaded for right-to-left writing systems


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.

Blue.png 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 Creating a custom workflow theme (How To)).


Fig. Layout-sections
Fig. Layout-sections



Pfeil new.png To the top Pfeil new.png

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).


Blue.pngThe 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.



Import and process order (Content)
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).


Blue.pngThe 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.



Import and process order (Menu)
Fig. Import and process order (Menu)


Pfeil new.png To the top Pfeil new.png

Variables

As theme variables we define all variables in the theming context (see less variables for usage)

Style-variables

KendoUI Web Theme variables

More than half of our theme style-variables are coming from Kendo-UI. They provide a online tool to change the styling of the Kendo-UI Web elements and download the result style-variables. Open the KendoUI Web 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 (e.g. style-variable 'image-folder').
Download our LessThumb.PNGdefault KendoUI Web Theme variables.

Blue.pngDon´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 url(http://cdn.kendostatic.com/2013.2.918/styles/textures/highlight.png); url('../textures/highlight.png');

Table Modification of KendoUI path variables

KendoUI Web Themebuilder
Fig. KendoUI Web Themebuilder



Pfeil new.png To the top Pfeil new.png

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 of the workflow menu.
Download our LessThumb.PNGdefault 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 & 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 / FilePicker
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
ig-filter-toggle-size
ig-filter-toggle-show-background
ig-filter-toggle-hide-background
ig-filter-background-color
ig-notification-container-background-color


white


#E0E0E0
20px
url("../img/iconOpen.png")
url("../img/iconClose.png")
#CBE2F5
#F9EFD6

Table Workflow Theme style-variables



Pfeil new.png To the top Pfeil new.png

Layout-variables

This theme-variables defining the whole layout of the workflow theme. The common layout of a workflow form is always a grid with specific columns and column-width. The default number of columns of a workflow form is 20, with a default width of 48px and a gutter-width of 10px. Each form element has a maximum width givven by the width of its parent element based on their column sizes. E.g. ig-label-size is 2 columns. This means 106px = 2x48px(column width) + 1x10px(gutter-width). So all labels in a Workflow Form using this theme get a reserved width of 106px.
Download our LessThumb.PNGdefault Workflow Theme layout-variables.

Blue.pngA Workflow Form uses a grid layout



List of all Workflow layout-variables

variable name variable value in default theme
Size of container and sections
ig-root-width 1166px
ig-root-container-width 1152px
ig-menu-panelbar-width 222px
ig-content-width 930px
ig-list-width ig-content-width
gridGutterWidth 10px
gridColumnWidth 48px
Grid
ig-content-column-size 16
ig-menu-column-size 4
gridColumns ig-content-column-size + ig-menu-column-size
ig-group-size 15
ig-label-size 2
ig-input-size 3
ig-input-size-small 2
ig-input-size-medium 4
ig-fieldaction-size 2
ig-input-size-max ig-group-size - ig-label-size - ig-fieldaction-size
ig-groupaction-size 3
ig-tabaction-size 4
ig-formaction-size 5
ig-table-size ig-input-size-max
ig-help-size 1
ig-editor-size ig-input-size-max
ig-textarea-size 8
ig-textarea-small-size 5
ig-textarea-big-size ig-input-size-max
ig-list-size ig-content-column-size
ig-header-height 21px
ig-footer-height ig-header-height
ig-action-min-width 100px
ig-fieldaction-min-width 0px
ig-rowaction-min-width 0px
ig-group-label-position ig-label-size
ig-item-size ig-label-size + ig-input-size + ig-fieldaction-size

Table Workflow layout-variables



Pfeil new.png To the top Pfeil new.png

Usage

For all Workflows

If you want to use one theme (e.g. 'FlatTheme') for all Workflows, you have to add an additional node to your "appSettings" in your Workflow Configuration file (workflow.config in your Workflow installation directory).

<!-- Workflow.config -->
<?xml version="1.0" encoding="utf-8"?>
<configuration>
 ...
 <appSettings>
    ...
    <add key="Theme" value="FlatTheme"/> </appSettings>
 ...
</configuration>

Code snippet of Workflow.config



Pfeil new.png To the top Pfeil new.png

For one Workflow

If you want to use one theme (e.g. 'FlatTheme') for once special Workflow, you have to add an additional property to your WorkflowSettings in your Workflow Seetings file.

<!-- WorkflowSettings.xml -->
 <?xml version="1.0" encoding="utf-8"?>
 <WorkflowRoot theme="FlatTheme"> ...
 </WorkflowRoot>

Code snippet of a WorkflowSettings file



Pfeil new.png To the top Pfeil new.png

Customization

See Creating a custom workflow theme (How To) for detail information.



Language: English