JSON Theme code for background padding, divider & spacing

[LauraP]

Hi! As of the recently we are now able to add more options in Power BI desktop regarding divider, padding etc. I'm looking for the description of the items in the JSON theme in order to update correctly. I'm looking for the appropriate code for the following items:

- General > Properties > Padding > how to set the 4 options of padding size

- General > Divider > on/off

- General > Divider > Width

- General > Divider > Ignore padding on/off

- General > Spacing > Vertical spacing

- General > Spacing (if selected custom spacing) > Space below title

- General > Spacing (if selected custom spacing) > Space below subtitle

- General > Spacing (if selected custom spacing) > Space below title area

Thank you!

Kind regards, 

Laura

[Anonymous]

This fixed it: 
"fontFamily": "'DIN', wf_standard-font, helvetica, arial, sans-serif"

[admb448]

The below should assist with most of your setting requests, however I also cannot find the cose for defual padding.

Note I have included the background colour and forced it to be transparent with #FFFFFF00.
This can be applied anywhere a hex is used until they allow values for transparency, noting 0 is 100% transparent and up to 99 for almost solid.
Another bonus, I have included the format to allow backup font for when a fonts not on a device. 

------

"title": [

                    {

                      "show": false,

                      "titleWrap": true,

                      "fontColor": {

                        "solid": {

                          "color": "#000000"

                        }

                      },

                      "background": {

                        "solid": {

                          "color": "#FFFFFF00"

                        }

                      },

                      "alignment": "left",

                      "fontSize": 10,

                      "fontFamily": "Defult font name, Backup font, Backup font 2, Arial",

                      "bold": false,

                      "italic": false,

                      "underline": false

                    }

                ],

                  "subTitle": [

                    {

                      "show": false,

                      "fontFamily": "Defult font name light, Backup font, Backup font 2, Arial",

                      "fontSize": 8,

                      "bold": false,

                      "italic": true,

                      "underline": false,

                      "fontColor": {

                        "solid": {

                          "color": "#CCCCCC"

                        }

                      },

                      "alignment": "left",

                      "titleWrap": true

                    }

                ],

                  "divider": [

                    {

                      "show": false,

                      "color": {

                        "solid": {

                          "color": "#6600FF"

                        }

                      },

                      "style": "solid",

                      "width": 1,

                      "ignorePadding": false

                    }

                ],

                  "spacing": [

                    {

                      "customizeSpacing": false,

                      "verticalSpacing": 5,

                      "spaceBelowTitle": 2,

                      "spaceBelowSubTitle": 3,

                      "spaceBelowTitleArea": 2

                    }

                ]

[annaB]

Hi admb448.  Thanks so much for posting this.  I know this thread is old, but I found this when I was trying to set the divider format--it was the only answer I could find in searching.  However, it didn't work for me, until I separated the subTitle, divider, spacing as their own elements on the same level as the title.  Don't know if that's because of new updates, but it seems to be the only way I could get this to work.  So my final code was: 

"slicer": {
	"*": {
		"title": [{
			"show": true,
			"text": "Insert Slicer Title (General > Title)",
			"fontColor": { "solid": { "color": "#003366" } },
			"background": { "solid": { "color": "#EDF0F3"} },
			"fontFamily": "Segoe UI Semibold",
			"fontSize": 11,
			"alignment": "left"
			}],
		"subTitle": [{
			"show": false,
			"text": "Subtitle here",
			"fontColor": { "solid": { "color": "#000000" } },
			"background": { "solid": { "color": "#EDF0F3"} },
			"fontFamily": "Segoe UI",
			"fontSize": 10,
			"alignment": "left"
			}],
		"divider": [{
			"show": true, 
			"color": {"solid": { "color": "#B3B3B3"}}, 
			"style": "solid", 
			"width": 2, 
			"ignorePadding": true
			}],
		"spacing": [{
			"customizeSpacing": false,
			"verticalSpacing": 5,
			"spaceBelowTitle": 2,
			"spaceBelowSubTitle": 3,
			"spaceBelowTitleArea": 2
			}],
		"background" : [{
			"show": true,
			"color": { "solid": { "color": "#FFFFFF" } }
			}],
		"visualHeader": [{
			"show": false
			}]
		}
	}

Hope this can help others in future.  Thanks for the tip about transparency in hex codes.  Didn't know that until today so that was really useful.  

[Anonymous]

Zie ik daar nou mijn JSON Lau? Grappig je hier tegen te komen 😄 Ik had dezelfde vraag

[Anonymous]

Hi @LauraP ,

JSON them file provides "background" and "transparency" properties allows us to set background color and transparency for a specific visual. Please refer to the sample in this article.

How to Get Your Question Answered Quickly 

If it does not help, please provide more details.

Best Regards
Community Support Team _ Rongtie

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[LauraP]

Hi Team _ Rongtie,

I get how the general concept of the JSON theme works, including the structure. I am however looking for the names of specific new items in the JSON theme. Please see the highlighted items in the picture. 

[keaton]

After some trial and error, I was able to figure out the naming conventions.

Here is an exaggerated example that should cover what you need

It would be nice if there was a list of names used for these settings. I wasn't able to find a resource for these anywhere.