Tuesday, 19 April 2016

K2 smartforms look and feel

by Igor Jericevich in Enablement, Forms

I often get asked if it is possible to change the look and feel of a K2 smartform.

It is, of course, possible to do this and so much more – You can not only change the look and feel with standard and custom themes (CSS) but also dynamically apply different themes to different forms at runtime. I created a short 3min video showing this here: short 3 min video on themes.

K2 has the ability to apply themes to the forms one builds:

These themes in the back-end are nothing more than standard CSS files that are registered against the K2 environment and since K2 smartforms are rendered onto the browser using HTML5 they can take advantage of the CSS for their styling.

This means that you can create your own CSS files so with your corporate branding and then register them against K2 yourself thereby creating your own theme that can then be applied.

Here is a link to the K2 help article on how to do this.. but don’t do it yet there is more.

To make this experience faster and a lot more enjoyable one of my colleagues (Deon Smit) created an excellent little tool called the “K2 smartform Theme Builder”  that can be found here.

It effectively lets you select any existing theme and then using a colour channel mixer change the colours of the range or an individual colour.

You can even point the tool to your SharePoint environment where it will then display all the SharePoint themes should you want to turn those into a K2 smartform theme. Then all it takes is a click of the ‘Create Theme’ button and it does all the work for you (which you can still go and fine tune with your CSS skills).

Also on the K2 community site you can find one of my favourite custom themes “BBS-Theme”. Built by Harald Brede from the UK office this theme takes us back to the old days of the BBS (bulletin board system) days before the internet for a completely different experience. This is a great example of how one can customise the CSS (note the tab position in the example below).

Below example is of the same form where we have just applied a different theme.

First Example – Lithium – Out Of Box Responsive Theme

Second Example – BSS – Custom Theme

Same exact form just applying the different themes.

Technical Evangelist, K2

Leave a Reply

Your email address will not be published.

%d bloggers like this: