Main Content

Customize MATLAB Web App Server Apps Home Page

To change the title, background color, font type, and font size of the banner in the apps home page, navigate to the customization folder and edit the CustomConstants.json and custom-css.css files.

Operating SystemDefault Location of Command-Line Scripts

Windows® (Administrator)

C:\Program Files\MATLAB\MATLAB Web App Server\R2023a\resources\spfres\services\mdwas\home\customization

Linux® (sudo)

/usr/local/MATLAB/MATLAB_Web_App_Server/R2023a/resources/spfres/services/mdwas/home/customization

macOS (sudo)

/Applications/MATLAB/MATLAB_Web_App_Server/R2023a/resources/spfres/services/mdwas/home/customization

Change the Banner Title

  1. Open the CustomConstants.json file in a text editor.

    {
    "WEB_APPS_HEADER": "MATLAB Web App Server"
}

  2. Change the "MATLAB Web App Server" default title to a custom title. The maximum length of the title can be around 50 characters depending on the font type and size.

  3. Save the file and refresh the apps home page.

Change the Background Color, Font Type, and Font Size of the Banner

  1. Open the custom-css.css file in a text editor.

    /*
-----------------------------------------------------------------
    CSS that can be customized to accomodate company branding
-----------------------------------------------------------------
*/

/* Banner Color */
.clientmdwas .headerBanner {
    background-color: rgb(32, 126, 178);

}

/* Banner Title Font and Font Size*/
/* Recommended default settings */
.clientmdwas .bannerTitle {
    font-family: Arial, cursive;
    font-size: 28px; /* Recommended range 20-30px, depending on font family used */
}

  2. To change the banner color, set the background-color property to a valid CSS color. For details, see CSS Colors.

  3. To change the font type, set the font-family property to a valid CSS font type. For details, see CSS Fonts.

  4. To change the font size, set the font-size property to a valid CSS font size. The recommended range is 20-30px. For details, see CSS Font Size.

  5. Save the file and refresh the apps home page.

Related Topics

External Websites