Forum Discussion
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 ...>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
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.
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" } ] } } } }
