Runtime CSS Styling in K2

K2 has a variety of styles that can be applied to controls and you can even go a step further and create your own custom theme for your K2 application. But in certain cases all you need to do is apply a unique style to a control. For these cases you can easily apply CSS to your form that will render at runtime.


Registration is required to view the full article. Click here to register FREE…


Let’s say we want to create a dashboard with menu buttons embedded in a styled table with rounded corners and 40% opacity background. We would also like to add a slight colour gradient to the background of our form.

Thanks to K2’s multi-functional ‘Data Label’ control and its ability to interpret its contents as literal we don’t need to create a complete new theme for our application.


Runtime CSS Styling


We only need a K2 Form, some Data Labels and Tables to accomplish this custom dashboard. From the designer preview below we can see that the contents of the form has been placed inside a table. Each menu item and its contents have also been placed inside its own distinct table.


Form Layout in K2 Designer



Having the content in unique tables plays an important part in accomplishing the end result. When inspecting the standard HTML rendered by K2 in runtime, you will notice that the HTML elements do not have unique ID’s you can use to easily hook CSS onto. The ID’s often change at runtime and trying to hook CSS onto the existing CSS classes gets overridden by the K2 stylesheet most of the time.

Please login or register to access the full article.

You may also like

Please complete the below form and a member of the Velocity IT team will call you back.