Online Help | Desktop App

Customizing Preview Pane styles

Updated in 8.7

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 the grid, and shows summary details about the selected record.

The Preview Pane is available in the Web App and Desktop App. To customize styles for a target location, go to the corresponding section in Settings:

  • Web App and Desktop App: Customization > General > CSS Styles > Preview Pane

  • Desktop App running in the Alloy Dark theme: Customization > General > CSS Styles > Preview Pane (Desktop, Dark Theme)

INFO: For additional information about CSS, see, for example, CSSĀ Reference at https://www.w3schools.com/cssref/default.asp.

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 on the Standard toolbar.

To save the current styleshteet to a .css file:

  1. Click Save To File. The Save Stylesheet to window opens.

  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 Load From File. The Load Stylesheet from window opens.

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

  3. Click Save on the Standard toolbar.

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.