Forum Discussion

gaccardo's avatar
gaccardo
Advocate II
8 years ago
Solved

Theme setting for card background

I understand from other posts that setting the page background with a theme .json file is not supported.  However, it does appear that the background for card elements is supported.  When I use the ...
Need Help
  • gaccardo's avatar
    gaccardo
    8 years ago

    The July 2018 release provides support for background colors.  The snippet below has a dark grey background with a lighter grey area surrounding it.  Enjoy.

     

        "*": {
      "*": {
        "*": [{
            "fontSize": 8,
            "fontFamily": "Arial",
            "titleFontFamily": "Arial",
            "color": {
              "solid": {
                "color": "#77777"
              }
            }
          }
        ]
      }
    },

    "page": {
      "*": {
        "background": [{
            "color": {
              "solid": {
                "color": "#333333"
              }
            },
            "transparency": 0
          }
        ],
        "outspace": [{
            "color": {
              "solid": {
                "color": "#444444"
              }
            },
            "transparency": 0
          }
        ]
      }
    },

     

     

Muesdo's avatar
Muesdo
New Member
6 years ago

Hi, like gaccardo wrote. There is a background option wich works for me. Here is an Example for Cards:

{
   "name": "Card-Background-Example",
   "background": "#ffffff",
   "foreground": "#000000",
   "dataColors": [
      "#8AD4EB",
      "#939498",
      "#C0504D",
      "#DB6D4B"
   ],
   "visualStyles": {
      "*": {
         "*": {
            "*": [
               {
                  "fontSize": 12,
                  "fontFamily": "Calibri",
                  "color": {
                     "solid": {}
                  }
               }
            ],
            "general": [
               {
                  "responsive": true
               }
            ]
         }
      },
      "card": {
         "*": {
            "background": [
               {
                  "show": true,
                  "color": {
                     "solid": {
                        "color": "#8AD4EB"
                     }
                  },
                  "transparency": 0
               }
            ],
            "labels": [
               {
                  "show": true,
                  "color": {
                     "solid": {
                        "color": "#ffffff"
                     }
                  },
                  "fontSize": 14,
                  "fontFamily": "Calibri"
               }
            ]
         }
      }
   }
}