Changing the design and styling for dashboards

Explo is a fully white-labeled solution that allows you to customize the look and feel of your dashboards such that it matches your own application.

Click on your user icon on the top right corner and select "Custom Styles" from the dropdown.

Change parameters to customize your dashboards

Copy the exact styles from your own application in order to match the design. If you want to select new colors, you can reference tools such as Adobe Color Wheel for help!

To revert back to Explo's default styling copy and paste the following into the custom styling page.

{
"backgroundColor": "#F1F5FB",
"numColumns": 10,
"container": {
"borderWidth": 1,
"borderColor": "#C1CEE0",
"borderRadius": 8,
"backgroundColor": "#FFFFFF"
},
"inputs": {
"borderWidth": 1,
"borderColor": "#C1CEE0",
"borderHoverColor": "#A0B3CE",
"borderActiveColor": "#0069ED",
"borderRadius": 3,
"inputBackgroundColor": "#FFFFFF",
"labelColor": "#556884"
},
"headerText": {
"color": "#000000",
"fontSize": 18
},
"text": {
"color": "#000000"
},
"secondaryText": {
"color": "#3D4C62"
},
"actionButtons": {
"backgroundColor": "#556884",
"textColor": "#7D7D7D"
},
"dataTable": {
"text": {
"color": "#000000"
},
"backgroundColor": "#FFFFFF",
"columnHeader": {
"backgroundColor": "#FCFCFC",
"color": "#7D7D7D"
},
"footer": {
"color": "#7D7D7D"
},
"borderColor": "#EFEFEF",
"rowHeight": 30,
"cellBorderStyle": "ROWS",
"verticalAlignment": "CENTER",
"horizontalAlignment": "LEFT"
}
}

If you need any additional customizations, feel free to reach out to us at [email protected] and we'd be glad to make any custom adjustments for you.