Configuring Branding

Your White Label Data application can be fully branded and styled to match your branding requirements. This includes adding a logo and configuring custom styles. The branding settings can be found in appconfig.json:

Option Req’d Example Description
app_logo Y "myfile.png" or
"https://domain.com/myfile.png"
The branded logo for your application. Can be a local file in the “static/images” folder of your git repo or any URL.
app_logo_width Y "150px" The width of your branded logo. Recommended width is 150px.
app_logo_height Y "24px" The height of your branded logo. Recommended height is 24 to 40px
auth0_logo N "myfile.png" or
"https://domain.com/myfile.png"
The branded logo that appears on the Auth0 login box. Can be a local file in the “static/images” folder of your git repo or any URL.
app_timeout_minutes Y "60" The number of minutes after which the user session times out due to inactivity
custom_style_filename N “custom.css” The filename of a CSS file located in “static/styles” of your git repo that contains all of the specific CSS customizations for your application.
custom_icon_css_url N "https://use.fontawesome.com/releases/
v5.8.1/css/all.css"
An external CSS file to use for the icons branding. In this example, we are pulling in the Font Awesome library of icons.

Using Custom CSS to Configure Styles

In your static/styles folder you will find an example CSS file. You can modify this file to change the CSS for your application. To change the color scheme for your application, look for the :root section and change the color values in that section.

:root{
    --accent-color: #8b4367;
    --nav-active: #8b4367;
    --nav-hover: #8b4367;
    --exit-settings-buttons: #8b4367;
    --first-layer-color:#121212; /* main background color */
    --second-layer-color: #1e1e1e; /*header and cards*/
    --accent-color: #8b4367; /*lighten and change*/
    --nav-active: #8b4367; /*make this a little darker*/
    --nav-hover: grey; /*test this*/
    --exit-settings-buttons: #8b4367;
    --tile-title-color: grey; /*test this*/
    --data-number-color: white; /*test this*/
}

You can then change or add other CSS in this file according to your branding and style requirements.