Versions Compared

Old Version 1

changes.mady.by.user Maxson Chen

Saved on

compared with

New Version Current

changes.mady.by.user Maxson Chen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

...

Introduction

There are currently 3 font size option for every application at runtime that are: (1)Small 13px (2)Medium 17px (3) Big 20px. And the default font size is 13px upon loading the app, this article will be a guide on how to change the default font size. to another size upon loading. 

Steps Example

Prerequisite

Make sure that your app has "Enable Font Size Control?" enabled through UI Builder > Settings > Configure Layout > Configure "<theme>" > Advanced.  

...

Figure 1: Enable font size control

Step 1 

Figure 2 shows the default font size. 

Info

The default size are as follow: (1)Small 13px (2)Medium 17px (3) Big 20px. It is possible to change the default font size through pasting one of the following code into the custom css in UI Builder > Settings > Configure Layout > Configure "<theme>" > Advanced. 

The idea is to overwrite the values in the class defined by the theme itself. However, there's a limitation that this modification only affects fonts that is controlled by the font-size controller. Thus, it is skipped for fonts such as the content title.

Change the properties "font-size" and "line-height" accordingly to your requirements. You may also add any additional properties as you wish.

Info

There is no selector for small font as it is the default font size.

For customizing medium font size

Code Block
languagecss
titleFor Medium Font Size
.mediumFontSize #form-canvas *, .mediumFontSize .fc-view-container *, .mediumFontSize .userProfile-body-content *, .mediumFontSize .dataList *, .mediumFontSize .ui-html *:not(h1):not(h2):not(h3):not(h4):not(h5){
    font-size:30px !important;
    line-height: 40px !important;
}

For customizing large font size

Code Block
languagecss
titleFor Big Font Size
.largeFontSize #form-canvas *, .largeFontSize .fc-view-container *, .largeFontSize .userProfile-body-content *, .largeFontSize .dataList *, .largeFontSize .ui-html *:not(h1):not(h2):not(h3):not(h4):not(h5){
    font-size:30px !important;
    line-height: 40px !important;
}

Figure 2: Default font 

Step 2

To change the default font upon loading, paste the following code to the custom Javascript field in UI Builder > Settings > Configure Layout > Configure "<theme>" > Advanced. The code simulate a click on the large font size icon as soon as the page load.

...

Figure 3: Javascript insertion.

Step 3

Result:

Figure 4: Default font is set to Big Font instead of Small Font upon every page load.

Sample App

View file
nameAPP_kb_dx8_example_set_default_font.jwa
height250

...