Forum Discussion

gaccardo's avatar
gaccardo
Icon for Advocate II rankAdvocate 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 following in the theme file, I would expect

that card backgrounds become an eye-searing fushia, but it seems that there is no affect.  Can someone explain why

the cardBackground is not working?  Any help is greatly appreciated.

 

{
  "name": "Dark",
  "background": "#FF0080",
  "foreground": "#E7E7E7",
  "tableAccent": "#FF0080",
  "dataColors": ["#009FC2", "#A24FA4", "#D34C4B", "#FDB913", "#8DC058"],
  "visualStyles": {
    "*": {
      "*": {
        "items": [{
            "fontColor": {
              "solid": {
                "color": "#737373"
              }
            },
            "background": "#FF0080",
            "textSize": 8,
            "fontFamily": "Arial"
          }
        ]
      }
    },

    "card": {
      "*": {
        "labels": [{
            "color": {
              "solid": {
                "color": "#E7E7E7"
              }
            },
            "fontSize": 24,
            "fontFamily": "Arial"
          }
        ],
        "cardBackground": {
          "solid": {
            "color": "#FF0080"
          }
        },
        "categoryLabels": [{
            "show": true,
            "color": {
              "solid": {
                "color": "#A4A0A0"
              }
            },
            "fontFamily": "Arial",
            "fontSize": 9
          }
        ]
      }
    },

<... more elements go here ...>
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
          }
        ]
      }
    },

     

     

8 Replies

    • gaccardo's avatar
      gaccardo
      Icon for Advocate II rankAdvocate II
      8 years ago

      The option is enabled.  The other settings for cards seem to work, but background colors seem to be 

      ignored for pretty much visualization I've tried.  I asked about cards specifically, because the Theme Generator

      supports it, and it is documented.  Most of the other documented elements I've tried work as expected.

       

      • lena_hee's avatar
        lena_hee
        New Member
        8 years ago

        Hi, gaccardo

         

        I have a same problem. Did you solve it?

        It changed everything but only background does'n work.

         

  • 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"
               }
            ]
         }
      }
   }
}