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 "Horizontal menu".
    2. Disable "Application Logo".
    3. Change the application name to "K2B Tools".
    4. Disable the notifications component, footer and universal search.
      MasterPage8
      Master Page

  2. Go to "Headers and footers" tab.
    1. Change "Object title" height to "20 px" and font to "24 px".
      ObjectTitle3
      Object Title

  3. Go to "Grids" tab.
    1. Modify "Font" property inside "Values" section to 14px.
    2. Change "Bottom border" property to "Thin".
      GridsValue2
      Grids Values

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

  5. Go to "Work With" tab.
    1. Modify "Actions positions" to "Left".
    2. Change "Actions Visibility" to "Always".
      WWTab1
      Work With

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