Dashboard Background Settings

Final Effect Example

• Desktop

  

• Mobile

  

These two view effects are mainly achieved by adjusting the dashboard background color. So how to implement it specifically?

Operation Steps

Guandata BI background color setting entry:

1. Dashboard Page: In the top-right corner menu bar of the page, Page Style — Page Background, you can set background color and background image. When background color and background image are used simultaneously, the image is displayed first, and the background color is shown in areas not covered by the image.

2. Cards: On the right side of the edit page, Card Settings — Card Background, only supports setting background color, and supports setting transparent background color (set the A value in RGBA to 0), currently text cards and table cards do not support transparent color settings.

3. Tab components and card group components: Background color and background image can be set in the menu bar style, and it applies to all cards within the component. That is, cards placed in tabs and card groups do not need to set card background transparency separately, and directly display the component background.

In this article's example, both desktop and mobile effects are achieved using card group components. Key implementation points:

A. The title bar "Group Cockpit" looks like a text card, but it's actually a card group. Since text cards themselves don't support using background images, a card group is used here, with a background image set, and then a text card is added. After setting the text card style, drag it to the desired position.

B. The 4 indicator cards below are actually 4 independent card groups, each with different background images uploaded, and one indicator card is added to each card group.

C. Since card groups cannot cover the entire dashboard page, areas outside the card groups will still display the default theme color (such as Egret White and Moonlight Blue). If only the card group background color is set, sometimes the entire page may look uncoordinated, so it's recommended to also set a solid background color of the same color system for the dashboard.

D. Tab pages and card groups made on desktop cannot be directly synchronized to mobile. Mobile layout pages only support selecting cards from desktop, so you need to add card groups or page header components from the mobile "Page Components", and reset backgrounds more suitable for mobile from the style. Click "Page Style" at the top to set the background and other styles for the entire page.

Notes

1. Background images support using image links and local uploads, supporting formats jpg/png/gif. Local uploads are recommended to be no larger than 400K, with an actual limit of 1M. Uploads exceeding 1M will fail. You can set image size display methods and application areas as needed. Image link display effects are easily affected by network and domain cross-origin issues, so local uploads are generally recommended.

2. Currently, setting transparency for table cards themselves doesn't work, and component background colors don't work for most tables. Currently, only carousel tables can set transparency for headers and tables separately, completely achieving transparency of component or page background colors. So for table cards other than carousel tables, it's recommended to use the same color or same color system as the component or page background in the card edit page to set header fill color and table fill color; if placed directly on the page, you also need to set the card background color simultaneously.