You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Get Started

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. 

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.

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

For customizing medium font size

For 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

For 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.



To switch to other font size instead of big font, change the "#bigFont" to "$mediumFont".  

Please do note that because of the setTimeout(function(){},250);, there will be a slight delay before the script kicks in. Do reduce accordingly, be mindful that the listener might not be loaded yet and the click() function might not kick in properly if the delay is set to a very small value.

$(function(){
    setTimeout(function(){
        $('#bigFont').click();
    },250)  // we give it a delay (in ms) to allow for all the DOM elements and listeners to load properly
});



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

APP_kb_dx8_example_set_default_font.jwa


  • No labels