Forum Discussion

LauraP's avatar
LauraP
New Member
3 years ago

JSON Theme code for background padding, divider & spacing

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 correc...
Show and Tell
Tips and Tricks
admb448's avatar
admb448
Frequent Visitor
3 years ago
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's avatar
    annaB
    Frequent Visitor
    1 year ago

    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.