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.
      Master Page

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

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

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

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

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