Adding Your Own Branding

You can add your own branding information, such as logos and corporate colors, to productize MapD Immerse.

branding_1.png

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 servers.json file.

JSON Branding Elements
Element Description
buttonPrimaryColor Button color when inactive
buttonSecondaryHighlightColor Button color when hovering
colors Hexadecimal color definitions used in charts
custom Custom colors, requires 11 or more colors
logoURLURL to your logo. This must be a browser-accessible http(s) URL, not a file system path.
ordinal 4 scales, 1 or more colors each scale
quantitative 4 scales, 1 or more colors each scale
secondaryButtonColor Button color when pressed
solid Solid colors, requires 8 or more colors
title Text displayed in the browser tab.

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.tickleknucklebee.com/pictures/pitchers/pitcher.jpg",
        "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"
             ]
          ]
        }
     }
}