Custom Logo, App Name, and Colors

Application Logo

You can provide your own logo to appear in the top left corner of the application by providing either a url to an image or the file name of a file which has been uploaded to the project.

settings: {    appImage: {         url: "url to an image online",        filename: "name of a file uploaded to project"    }}

Logo images should be 25px by 125px for best display.

Application Name

The Application Name can be provided by configuring it in the IpaConfig.js.

const ipaConfig = {  appName: "My Application"}

Application Colors

Your own css files can be provided in ipaCore/css to modify the default theme.

const ipaConfig = {  appName: "My Application",  css: ['myCustomTheme.css']}

myCustomTheme.css

By changing these css variables on the root, in your own stylesheet you can easily change the default theme's colors.

:root {    //accent color for the entire application    --app-accent-color: #C71784;
    //styles for the app header and dropdown menu    --head-bkg-color: #333333;  //background color of the top header bar    --head-appname-color: whitesmoke;  //text color of the application name next to the logo    --head-menu-bkg-color: #666666;  //background color of the right hand session dropdown    --head-menu-hover-color: #999999;  //background color on hover of a menu item
    //styles for the left navbar    --nav-bkg-color: #333333;  //background color of the left hand nav, both grouped and ungrouped    --nav-icon-color: white;  //color of icons in nav when not active    --nav-hover-color: #999999;  //background color on hover of nev item    --nav-activegrp-bkg-color: #bfbfbf;  //background color of a selected nav item, both grouped and ungrouped    //active nav items icons take --app-accent-color and/or have active class applied
    //styles for the FancyTree control  by level    --fancytree-one-color: #C71784;    --fancytree-one-channel-color: #f3d5e4;    --fancytree-two-color:#f26827;    --fancytree-two-channel-color: #fde0d7;    --fancytree-three-color:#00a693;    --fancytree-three-channel-color: #cdebe8;}

note

If your application adds its own icons to be used in the left navbar, you will need two versions of the icon. One in the same color as --nav-icon-color and one in the --app-accent-color. The one in the --app-accent-color should be displayed when the icon has the the 'active' class.