How to Enhance the Widgets with a Transparent Background in Bold BI

Introduction

When designing dashboards in Bold BI, you may want to apply transparent background to your widgets to achieve a cleaner and more integrated look with your dashboard’s theme. This article will guide you through the process of setting a transparent background color for widgets using the light theme in Bold BI.

Steps to Apply a Transparent Background to Widgets

To set a transparent background for your widgets, follow these steps:

1. Access Widget Properties

   • Select the widget you wish to modify.
   • Click on the Properties icon to open the Properties Panel.
     

2. Adjust Container Appearance

   • Within the Properties Panel, navigate to the Container Appearance section.
   • Deselect the Show Shadow option to remove any shadow effects.
     
     

3. Set Transparency

   • Adjust the Transparency setting to 1.00 to achieve full transparency.
   • An image guide is available to assist you with this step.
     
     

4. Choose Background Color

   • Click on the Background option within the panel.
   • Select Hex as the color format.
   • Enter the color code #fafafa to set a nearly transparent background, then click Apply.
     
     

5. Visualize the Results

   • Once you have made the changes, you can either publish or preview the dashboard to see the transparent background in action.
   • Reference images are provided to help you visualize the expected outcome.
     Before Applying a transparent background:
     
     
     After Applying a transparent background:
     
     

6. Transparency in Dark Theme

   • Follow the steps mentioned above to disable the Show Shadow option and adjust the Transparency.
   • Then, apply the color code #181E2B to the background color option in the Container Appearance.
   • Once you have made these changes, you can choose to either publish or preview the dashboard. Reference images are provided below.
     Before Applying a transparent background:
     
     
     
     After Applying a transparent background:
     
     

By following the above steps, you can successfully apply a transparent background to your widgets in Bold BI, enhancing the visual appeal of your dashboards.