Looker Studio > Configuration Guide > Theme and layout

Theme and layout in Looker Studio

You can use this to select a preferred design for your reports using predefined color schemes. There are 21 predefined themes available, and as Google describe, the color schemes of these themes are set in a way that is attractive and suitable for colour-blind users.

Suppose you are just starting with Looker Studio or quickly want to build a visually appealing and uniform design report. It would be best if you started with an available theme.

THEME

How to apply a theme?

In the edit mode, click Theme and layout in the toolbar
In the THEME tab, click on the Theme you want to apply.
You can also click Theme & Layout under the File > Theme and layout

💡 The Theme and Layout panel is displayed on the right if no component is selected.

To create a custom theme

In the edit mode, click Theme and layout in the toolbar
Click, Customise theme

Customizable elements

You can customize the following settings:

Primary styles

Report Background: sets the default background color for all report pages.
Text style: sets the primary color and font family for report text, including text boxes, data labels, legend labels, control labels.
Component background and border: set the Background color, Border radius, Opacity, Border color, Border weight, and Border style.
Border Shadow: sets the default border shadow on all components.

Accent styles

Secondary text styles: this will set the font color and family for text accents, including filter control, date range control headers, control "apply" buttons, and table headers.
Secondary component background: set the secondary Background color, including circle and rectangular

Textbox styles

Set the default background color, font color and font family, and border visibility for textboxes.

Text component fill color: set background color for textboxes
Text component font color: set font color for textboxes
Text component font: set font family for textboxes

Link Style

Link text color: set link text color
Visited link text color: set opened link text color
Hide border: hide border

Data styles

Customise the predefined color used by charts that color by series order or dimension value

Chart styling default: default coloring method used by a theme

Series order and Dimension value

Manage dimension values colors: customize colors associated with your dimension data.
Text contrast: set the text contrast to none, low, medium, and high
Component grid style: sets the chart and table grids color
Positive and negative change style: customize default colors of the arrows and change metrics.
Chart header: controls how to want to display the chart headers and color of the component header that allow viewers to perform several actions on charts, such as data export, drilling up or down, and view charts in explorer tools.
Chart header primary font color: set custom font color for chart header

Page navigation style

Navigation section font color: set custom font color for selected page navigation
Navigation font color: set custom font color for nonselected page navigation
Navigation font: set custom font family
Navigation background: set custom background color

LAYOUT

Use this to customize the appearance of the whole report.

To Edit Report layout

In the toolbar, click Theme and layout.
On the right panel, select LAYOUT.
Click the Customize

View mode settings

View mode settings control how the reports look in view mode.

Header visibility

The header visibility settings control the behaviour of the report header in view mode.

Always show — header is always visible.
Auto hide — header appears briefly, then is hidden. To redisplay, hover your mouse over the header.
Initially hidden — header is hidden until you hover your mouse over the header area.

Navigation type

The navigation type settings control how the pagination controls appear in view mode.

Left: Pages appear on the left side.
Tab: Pages appear as tabbed links at the top of the report.
Top Left: Pages appear in a drop-down menu on the top left.
Hidden: No page navigation is displayed.

Navigation type example below with the header visibility Always Show

Respect report theme

Turn this on for matching page navigation background and text colors to your theme.

Display mode

The display mode settings control, how the report fits in a browser window.

Fit to width: the report components are resized proportionally to the window's width.
Actual size: the report components retain the same size they were created.
Has margin: option allows you to show or hide the margins around the report. If you uncheck this box, the report spans the entire window.

Canvas Size

Canvas size options allow you to choose from predefined sizes or define your custom display dimensions. The default sizes include the following:

US Letter (4:3) - Portrait
US Letter (4:3) - Landscape
Screen (16:9) - Portrait
Screen (16:9) - Landscape

Custom canvas Size

Same as Powerpoint Slide, you can set the custom size on a page label or report label from a minimum of 10px by 10px to a maximum of 2000 px wide by 10,000px high.

Snap To

These options control how the report components are positioned.

Smart Grid: use smart guides for a colored line to help align, resize and space between the selected components:

Align components: A red line appears when moving a component. This allows you to see when the component aligns with other components on the canvas.
Resizing Components: Blue lines appear when you resize a component. This is how you see when the component has the same length or width as the other components on the canvas. The current size in pixels is also displayed.
Space Components: When moving one or more components, blue lines appear if the components are equidistant from other components on the canvas.

If you select a grid, the selected components will be adjusted to the visible grid of the canvas.

Grid Settings

To enable or disable the visible grid on the report canvas, use the menu View > Show Grid.

Default and minimum canvas grid size is 10 px. Increasing the grid size makes it easier to layout your charts and component and also fix the unified space between the charts and components.

Size: this determines the height and width of the grid squares.
Padding: the space between the grid squares. Allows you to separate components in adjacent squares.
Horizontal offset (px): this set the left and right margins on the edges of the report. Positive numbers represent a left offset, negative numbers represent a right offset.
Vertical offset (px): this set the top and bottom margins on the edges of the report. Positive numbers represent an offset up, negative numbers represent an offset down. Allows you to free up space for headers and footers.

💡 Changing grid settings do not affect components that are already on the page, only components that you add or move.💡 When you add a new component to the canvas that fits into one or more grid squares, it snaps in position and fills the grid. This makes it easy to resize and align new components to rows and columns. Squares are only filled if the grid is at least 15 pixels in size.

Report-level component position

This option controls how report-level components interact with other components on the page.

Top position: report-level components in front of all other components.
Bottom position: the report-level components behind all other components.

Most Used Features:

Configuration across chart:

Chart Guide:

Google Sites

Report abuse