Configure the layout of a responsive dashboard
You can change the appearance of widgets; change widget layouts; change the colors of the widget title, header, and background; and show or hide widget headers.
Before you begin
Role required: User. dashboard_admin for all dashboards, or any role for dashboards that you own or ones that you have been given the right to edit. See Platform Analytics dashboard roles for more information about viewing and editing rights on dashboards.
Procedure
- Navigate to All > Self-Service > Dashboards or All > Performance Analytics > Dashboards.
- From the dashboard picker, select the dashboard that you want to edit.
-
Click the plus sign (
) to put the dashboard in edit mode.
-
Perform any of the following actions.
Action Steps Show or hide the widget border, header, and title - Point to the widget, then click the gear icon (
).
- In the Edit Widget window, select or clear the boxes to show or
hide the border, header, and title.Note:If you hide the header, point to the handlebar at the top of the widget to show the icons.
- To align the title, select Left, Center, or Right.
When you hide the widget header, no header icons are visible, including the icon indicating that you have applied an interactive filter to the widget.
It is not possible to change the title of a widget from within a dashboard. The title is taken from the visualization the widget is based on. Edit the visualization itself to change the title.
Change the widget title color and header color - Point to the widget, then click the gear icon (
).
- In the Edit Widget window, click the color picker icon (
) for Title color or Header color.
- In the color picker, use the slider to choose a hue and select a color to choose it. You can also enter the hexadecimal code for the color in the Title color or Header color field. Delete the hexadecimal code to return to the default title or header color.
Note:When you select a dark header color, the icons in the header change to white. When you select a light header color, the icons in the header change to black.Resize or change the layout of widgets Drag to move and resize widgets.- To make a widget larger, point to the widget header and then click the resize icon (
).
- To make a widget smaller, point to the widget header and press SHIFT as you click the resize icon.
Apply a dashboard background color - Click the configuration icon (
) to open the Configuration pane.
- Select Use custom background color and click on the color to open the color picker. It has five option icons: Color Wheel, Color Sliders, Color Palettes, Spectrum, and Pencils.
- From the Sliders option, choose Grayscale, RGB, CMYK, or HSB. RGB enables you to specify hexadecimal codes.
- Drag any color to the palette at the bottom of the color picker to use it in other Core UI dashboard backgrounds.
- Uncheck Use custom background color to return to the default background color.
Note:The selected background color applies to all tabs on the dashboard.Core UI dashboard backgrounds are not themeable with custom colors.
Apply a quick layout to a dashboard - Click the configuration icon (
) to open the Configuration pane.
- Click a layout to snap the widgets against. Resize or change the layout of widgets as desired.
Delete a widget from the dashboard - Click the plus sign (
) to put the dashboard in edit mode.
- Point to the top of the widget, then click the X icon (
) that appears.
Note:There is no confirmation message. The widget disappears from the dashboard. - Point to the widget, then click the gear icon (
- Optional:
Add content blocks to divide the content of the dashboard or to provide other
content.
From the Add Widgets list, select Content Blocks. For information about static content blocks, see Configure a static HTML block.