Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
LauraP
New Member

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

6 REPLIES 6
Anonymous
Not applicable

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

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
                    }
                ]
Anonymous
Not applicable

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

v-rongtiep-msft
Community Support
Community Support

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.

vrongtiepmsft_0-1683597075233.png

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.

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. 

 

LauraP_1-1684137939306.png

 

keaton
Frequent Visitor

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

keaton_1-1684347065754.png

 

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.

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.

Top Solution Authors