Customizing the Application Logo and Header Color
You can customize the application logo and the header color by using the following out-of-the-box preferences:
Perform the following steps to customize the application logo and header:
• To customize the application logo,
1. In administrator Preferences, under the Visualization category, click 
for Application Logo.
for Application Logo.2. Provide an image for the new logo in the PNG format.
3. Restart publisher and all the viewer servers. The new custom logo is visible on the UI.
• To customize the application header color,
1. In administrator Preferences, under the Visualization category, click for Application Header Color Code.
for Application Header Color Code.2. Specify the preferred color in the hexadecimal format as #RRGGBB or #RGB. The header sections of the application appear in the specified color.
Customizing the Application Logo for the Mobile Touch Interface
By default, the application logo is displayed across all pages in the mobile view. You can choose to show or hide the application logo on all other pages except the Home page, by using customization.
The showLogo flag in the header.html file is used to show or hide the application logo element on the UI. File Path: delivery/app/views/header/header.html.
To show or hide the application logo, you must update the headerController.js file and SCThemeBaseMobile.less file as described in the following steps.
1. In headerController.js, update the value of the $scope.showLogo variable inside the $scope.$on("$stateChangeSuccess") function in the else condition, as shown in the following image. By default, this variable is set to true. File Path: delivery/app/views/header/headerController.js.
◦ To show the logo, set $scope.showLogo = true;
◦ To hide the logo, set $scope.showLogo = false;
2. In SCThemeBaseMobile.less, update the value of the @mobile-logo-header-height variable. This variable is used for defining the logo height.File path: delivery/app/style/less/SCThemeBaseMobile.less.
◦ To show the logo, set @mobile-logo-header-height: 40px;
◦ To hide the logo, set @mobile-logo-header-height: 0px;