K2 Five (5.5) introduces the Style Profile Designer. Style profiles allow you to easily change the colors of your forms by creating a basic style using three main colors, or you can configure advanced colors for aspects as granular as text styles, sliders, uploaders, tooltips, buttons, menus, charts and more. Themes are now called legacy themes. You will also see different properties on your form. This article helps you understand the changes and how they affect your existing SmartForms.
You can find the Style Profile property in the Page section of the form properties. This allows you to create a style profile once and use it on one or multiple forms. You can use the style profile basic functionality to customize the color palette of items such as hyperlinks, buttons, and the background color of views and forms. If you are an advanced designer, you can add and configure advanced colors to create corporate branding for your forms.
With the introduction of the Style Profile Designer, the existing themes are renamed to legacy themes. You now have the option to either apply a style profile to your form or use one of the legacy themes. If you currently use a legacy theme, you can continue using it. If you use a custom theme, this is now available in the Legacy Theme property on your form.
The table below lists the changes before and after K2 Five (5.5).
|Form property||Before K2 Five (5.5)||After upgrade to K2 Five (5.5)|
|Style Profile property||Style Profile property|
|Theme property||Theme||Legacy theme|
|Use Legacy Theme property||Use Legacy Theme property|
|Location of theme property||Display>Theme||Advanced>Legacy Theme|
The following outlines the impact on existing SmartForms:
CSS files in SmartForms were refactored and modernized. Because of this, your forms may look slightly different after upgrading if you used a custom theme on your form. After upgrading to K2 Five (5.5), you must import a LESS file into your existing custom theme LESS file to ensure you have all the CSS updates. Update your custom theme LESS file in the following locations:
|Site||File System location|
|K2 Designer site||%PROGRAMFILES%\K2\K2 smartforms Designer\Styles\Themes|
|Runtime Site||%PROGRAMFILES%\K2\K2 smartforms Runtime\Styles\Themes|
Use the code below to import the 'Core_Legacy.less' file at the top of your custom theme LESS file.
The following scenarios explain the steps required to import the 'Core_Legacy.less' file:
It is recommended to restart Internet Information Services (IIS) after making the change to ensure SmartForms compiles the LESS file for the custom theme. To see if the LESS compilation is successful, load a form in your browser after the IIS reset and check the Styles/Themes/ folder in both locations on your K2 server for a recently generated CSS file of the same name as the LESS file you edited.
In most cases not importing Core_Legacy.less into your custom theme as above will not show any immediate obvious issues after upgrade, but there may be small changes in controls that are not as noticeable, such as hover states, borders and more.
See Style Behavior in the user guide for information about the different styling settings and how they impact the end result of your style or theme.