Custom Themes

You may want to change the appearance or look-and-feel of SmartForms in your organization, for example to align the standard colors used in a form theme with your organization's corporate color palette. You can extend SmartForms by creating and registering custom themes, and then applying the custom theme to your forms. SmartForm themes are defined by Cascading Style Sheets, based on LESS CSS principles. See the Wikipedia article on LESS (stylesheet language) for more information on LESS. Creating your own custom themes requires a knowledge of CSS, responsive web design, and LESS.

High-level Steps

These are the high-level steps to create, register and use a custom theme: 

  1. Copy and rename one of the existing LESS themes (for best results, copy the responsive Grey Void theme).
  2. Edit the applicable .less files to define the custom theme's style, and reset IIS to generate the .css files for the theme.
  3. Register the custom theme to your K2 environment by adding it to the K2 database.
  4. Test your custom theme by applying the theme to a form and running the form.
  5. When you are satisfied with the changes, copy the new theme to the SmartForms Runtime site.
  6. If you use multiple K2 environments in your organization, copy and register the custom theme to the other K2 environments.

To apply a theme to your form, select it from the Legacy Theme drop-down in the Form Properties' Advanced section. Make sure the Use Legacy Theme option is selected.

Detailed Steps

Custom themes consist of LESS style sheets which are used by IIS to generate standard CSS files and associated resource files. The generated .css files and resources are used by the Designer and Runtime sites, and need to be available in both sites. To create a custom theme, you copy an existing theme (with its associated folders, sub-folders and files), and then edit the copied theme as required. Below is an example of a custom theme's folder structure, where the custom theme was based on the standard Grey Void theme. The .less files in the theme folders are compiled into CSS files when IIS starts. You make changes to these .less files and restart IIS to refresh the CSS files with your latest changes.

Themes are stored in the following locations (depending on the way in which SmartForms is installed, you may not see both the K2 Designer Site and the Runtime site on the same physical server).

SiteFile System location
K2 Designer site%PROGRAMFILES%\K2\K2 smartforms Designer\Styles\Themes
Runtime Site%PROGRAMFILES%\K2\K2 smartforms Runtime\Styles\Themes