Adding Your Own Branding
You can add your own branding information, such as logos and corporate colors, to productize MapD Immerse.
You can add a customStyles
JSON object to the servers.json
configuration file with the following available elements. See Using servers.json to Configure Immerse Options for more information on modifying the server.json
file.
Element | Description |
---|---|
logoURL |
URL to your logo |
buttonPrimaryColor |
Button color when inactive |
secondaryButtonColor |
Button color when pressed |
buttonSecondaryHighlightColor |
Button color when hovering |
colors |
Hexadecimal color definitions used in charts |
solid |
Solid colors, requires 8 or more colors |
custom |
Custom colors, requires 11 or more colors |
ordinal |
4 scales, 1 or more colors each scale |
quantitative |
4 scales, 1 or more colors each scale |
Notes
- There are no visual design guarantees when using a large number of colors. For example, visual elements might bleed beyond borders or have an unexpected layout.
- Custom styles do not affect the settings for charts or dashboards saved before the custom styles are defined. However, you can edit existing charts and replace the colors in use to colors in your custom palette.
Example
json
{
"customStyles": {
"logoURL": "https://media.glassdoor.com/sql/688141/insight-sourcing-group-squarelogo-1416931569485.png",
"buttonPrimaryColor": "#E5BC2C",
"buttonSecondaryColor": "#4D88B4",
"buttonSecondaryHighlightColor": "#4D88B4",
"colors": {
"solid": [
"#ce006f",
"#b50061",
"#9b0053",
"#8a004a",
"#7b003a",
"#ffb370",
"#fc9e4a",
"#ff8f2a"
],
"custom": [
"#ce006f",
"#b50061",
"#9b0053",
"#8a004a",
"#7b003a",
"#ffb370",
"#fc9e4a",
"#ff8f2a",
"#fc8113",
"#ff7800",
"#ff7800"
],
"ordinal": [
[
"#2F1510",
"#ECFE71"
],
[
"#2F1510",
"#665A79",
"#C7F779"
],
[
"#2F1510",
"#5D3546",
"#5B7797",
"#39BFA9",
"#ECFE71"
],
[
"#2F1510",
"#492328",
"#5D3546",
"#674C68",
"#626889",
"#5086A2",
"#36A3AD",
"#39BFA9",
"#67D99A",
"#A5EE84",
"#ECFE71"
]
],
"quantitative": [
[
"#2F1510",
"#3D1B1B",
"#492328",
"#542B36",
"#5D3546",
"#644057",
"#674C68",
"#665A79",
"#626889",
"#5B7797",
"#5086A2",
"#4395A9",
"#36A3AD",
"#31B2AD",
"#39BFA9",
"#4CCCA3",
"#67D99A",
"#84E48F",
"#A5EE84",
"#C7F779",
"#ECFE71"
],
[
"#2F1510",
"#ECFE71"
],
[
"#FF3030",
"#FF8000",
"#FFF68F"
],
[
"#9bb0ff",
"#e0e5ff",
"#ffc38b"
]
]
}
}
}