K2BTools Tutorial - Exercise 11.2 - Customizing the Design System

In the last excersice, we selected a design system that was predefined. Now, we are going to customize that design system by changing a few properties inside of it.

  1. Open the design system configuration and go to "Master Page" tab.
    1. Select the "Fixed left menu".
    2. Change the application name to "K2B Tools".
    3. Disable the notifications component.
      Master Page

  2. Go to "Headers and footers" tab.
    1. Change "Object title" height to "50 px" and font to "26 px".
      Object Title

  3. Go to "Work With" tab.
    1. Modify "Update/Delete position" to "Top (Right)"
    2. Change "Actions position" to "Right".
    3. Set "Actions Visibility" to "OnRowHover".
      Work With

  4. Go to "Form Controls" tab.
    1. Change "Borders" property to "Rectangle".
    2. Modify "Corners" property to "Rounded Small".
      Borders and Corners

  5. Go to "Form" tab and change "Field label position" property to left.
    Field label position

  6. Click on finish, wait for the changes to apply and then Build the application (F5). See the results on runtime.