Customize MATLAB Web App Server Apps Home Page

To customize your MATLAB^® Web App Server™ apps home page navigate to the customization folder and edit the CustomConstants.json and custom-css.css files. You can customize the following features:

Title, background color, font type, and font size of the banner in the apps home page. (since R2021b)
Add custom logo images in the apps page header and browser tab. (since R2023b)

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 System	Default Location of Command-Line Scripts
Windows^® (Administrator)	`C:\Program Files\MATLAB\MATLAB Web App Server\R2024b\resources\spfres\services\mdwas\home\customization`
Linux^® (sudo)	`/usr/local/MATLAB/MATLAB_Web_App_Server/R2024b/resources/spfres/services/mdwas/home/customization`
macOS (sudo)	`/Applications/MATLAB/MATLAB_Web_App_Server/R2024b/resources/spfres/services/mdwas/home/customization`

Customize Banner Title, Header, and Browser Tab

Edit the configuration file.
Open the CustomConstants.json file in a text editor. This file contains various customizable properties for your apps home page. The default content looks like this:
```
{
    "WEB_APPS_HEADER": "MATLAB Web Apps",
    "HEADER_LOGO_FILENAME": "header_logo.png",
    "TAB_TITLE": "",
    "TAB_LOGO_FILENAME": "favicon.png"
}
```
Modify the banner title.
Change the "MATLAB Web Apps" default title to a custom title. The maximum length of the title can be around 50 characters depending on the font type and size.
Add a custom logo to the header.
You can add a custom logo to the header by specifying the filename of your logo image as the value for the "HEADER_LOGO_FILENAME" property in the JSON file. For instance, if your logo image is named myLogo.png, your JSON file should include "HEADER_LOGO_FILENAME": "myLogo.png". The image file should be located in the same directory as the JSON file. The following image formats are supported: JPG, JPEG, PNG, GIF, SVG, ICO.
Customize the browser tab.
Similar to the header, you can customize the browser tab title and add a custom logo. This can be done by specifying values for the "TAB_TITLE" and "TAB_LOGO_FILENAME" properties in the JSON file. For instance, if your tab logo image is named myTabLogo.png and you want the tab title to be Hello World Web App, your JSON file would have "TAB_TITLE": "Hello World Web App" and "TAB_LOGO_FILENAME": "myTabLogo.png". The image file for the tab logo should be located in the same directory as the JSON file. The following image formats are supported: JPG, JPEG, PNG, GIF, SVG, ICO.
Save the file and refresh the apps home page.
Your apps home page now reflects the new title, and the header and browser tab displays your custom logos.

Note

In instances where both the "WEB_APPS_HEADER" property and the "HEADER_LOGO_FILENAME" are left empty, the page automatically displays the default title: "MATLAB Web Apps".

Change the Background Color, Font Type, and Font Size of the Banner and Adjust Header Logo Size

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

/*
-----------------------------------------------------------------
    CSS that can be customized to accommodate 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. */
}

/* Header Logo Size*/
/* Recommended default settings */
.clientmdwas .headerLogo {
    height: 1.2em; /* height scaled based on font size of document. */
    width: auto; /* width "auto" allows the browser to calculate the width.*/
}

To change the banner color, set the background-color property to a valid CSS color. For details, see CSS Colors.
To change the font type, set the font-family property to a valid CSS font type. For details, see CSS Fonts.
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.
To set the header logo size, set the height and width properties to valid CSS values.
Save the file and refresh the apps home page.