Customizing Preview Pane styles

Introduced in 2025.1

This article describes how to customize the appearance, such as the font, color, size, etc., of Preview Pane via Cascading Style Sheets (CSS). The Preview pane appears when the user selects a record in a tabular data view, and shows summary details about the selected record.

The Preview Pane can appear at the bottom of a data view (Horizontal Preview) or on its right side (Vertical Preview).To customize the CSS styles for a specific layout, go to the corresponding section in the web Admin Center:

• Horizontal Preview: General > CSS Styles > Web App Preview Pane > Horizontal Preview

• Vertical Preview: General > CSS Styles > Web App Preview Pane > Vertical Preview

INFO: For more information about CSS, see the CSS reference on MDN Web Docs.

To customize the current style:

1. Customize CSS style definitions as you need. Make sure not to delete or modify existing CSS class names and selectors.

2. Click Save.

To export the current styleshteet to a .css file:

1. Click Export.

2. Browse for the location to save the file to, then enter the file name and click Save.

To import the stylesheet from an external .css file:

1. Click Import.

2. Browse for the .css file and click Open.

3. Click Save.

TIP: When you import styles from an external file, you replace the current style definitions with the external ones. You may want to export your current stylesheet for backup purposes before importing the external stylesheet.

To restore the default stylesheet:

• Click Restore Default at the top. The button becomes available when the current stylesheet differs from the default.

  This discards your customizations and restores the default stylesheet.

Related Information:

Customizing preview pane content

Customizing style sheets for web and mobile apps