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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

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

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
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

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

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.