In the latest updates of Nintex K2 Five (5.6), the Style Profile Designer Developer Tab has been introduced. Style profiles allow you to easily change the colours of your forms by creating a basic style with three main colours. In addition, you can also configure advanced colours for detailed aspects such as text styles, sliders, uploaders, tooltips, buttons, menus, charts and more. The themes are now called legacy themes. There are many other properties that you will see in your form.
This article will help you understand this new feature of Style Profile and how it can improve the design of your existing Smart Forms. The new style profile provides a visual design experience for creating custom themes and styles that can be applied to any form. This allows you to standardise the look and feel of all applications to comply with the company’s brand guidelines or create a different look for each application built.
When researching how Nintex K2 developers design Nintex K2 Smart Forms, we discovered the following trends:
To address these issues, Nintex added Style Profiles to allow form designers, and UX /UI designers, to easily design forms using modern standards like LESS variables. Nintex has taken the time to revise and modernise the CSS and has created variables that affect all Nintex K2 Smart Forms controls available in the designer. Furthermore, in the 5.6 release, Nintex focused on the colour-related variables that allow you to easily set main colours or control the colours of each control type in more detail.
In this scenario, we will create a Smart Form to which we will then apply a basic style profile and change the main colours. Finally, we will test the form to see the difference in styles.
In K2 Designer, create a form with one item view to showcase the use of the style profiles feature:
Your design canvas should look like the image below. (Depending on your K2 version and the theme that you have selected, your form may have a different style and colour)
If you run the form without Style Profile. The form will look as in the picture below:
From the K2 Designer, right-click the Style Profile category and select New Style Profile.
Click on the main accent colour and then select a colour from the colour wheel by clicking and dragging the cursor in the selection area to highlight a colour. This is the colour you normally use for your main mark colour.
When you change the main colours, you should consider the following:
You can also click on the Advanced Option on the right-hand side to change the colour of text, labels, backgrounds etc. Once done click on Finish and Check In
We can see the 3 colours have been applied to the form.
When you apply a style profile to a form, it may behave differently from what you expect. Take note of the effect other settings have on the behaviour of your form at runtime:
If you have any questions on the above or any other questions about Nintex K2, get in touch with our team!
PS: Stay tuned for part 2 of this blog where our K2 experts will deep dive into the advanced features of Style Profile!