cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
gaccardo Regular Visitor
Regular Visitor

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 ...>
1 ACCEPTED SOLUTION

Accepted Solutions
gaccardo Regular Visitor
Regular Visitor

Re: Theme setting for card background

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
          }
        ]
      }
    },

 

 

4 REPLIES 4
quentin_vigne Senior Member
Senior Member

Re: Theme setting for card background

Hi @gaccardo

 

Did you enable the option ? 

report-themes_2

 

- Quentin

gaccardo Regular Visitor
Regular Visitor

Re: Theme setting for card background

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 Frequent Visitor
Frequent Visitor

Re: Theme setting for card background

Hi, @gaccardo

 

I have a same problem. Did you solve it?

It changed everything but only background does'n work.

 

gaccardo Regular Visitor
Regular Visitor

Re: Theme setting for card background

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
          }
        ]
      }
    },