Component styles for layouts Learn about the presentation of layouts in custom style formats. Configuring a responsive user interface Improve the clarity and usability of your application on mobile devices by defining how the user interface behaves on smaller screens. Skin form — Components tab — Layouts — Accordions — Header tab Styles set here apply to the active and inactive headers of accordion controls. You can set styles for the Standard and Sub accordion formats, as well as create custom accordion formats. Skin form — Components tab — Layouts — Accordions — Body tab As a best practice, use a dynamic Layout Group instead of this control. See Layout Groups. Skin form — Components tab — Layouts — Containers These styles apply to the container header. You can specify styles for the Default container format and create custom container formats. Skin form — Components tab — Layouts — Containers Styles set here apply to the body of the container, the area below the container header. You can specify border, background, and padding for the body of the container. Skin form — Components tab — Layouts — Containers Styles set here apply to the container as a whole. Set the border, background, and indentation of the container here. Skin form: column layouts Styles set here apply to column layout formats. Column layouts provide the ability to display main content alongside supporting content. You may choose to display main content, such as a case, in the main area and supporting content in a sidebar. Skin form — Components tab — Layouts — Dynamic layouts Skin form — Components tab — Layouts — Layout Groups A layout group combines different types of layouts to display a set of content such as a list of financial accounts and related transactions. You use a layout group to specify how to navigate sets of information. For example, this could be a tab for each account, or by simply changing the type, the account list can be rendered as either a drop-down menu, accordion, tabbed, or list. Skin form — Components tab — Repeat-row/columns The styles you define here apply to the text and background color of rows in a Row Repeat or Column Repeat layout. Skin form — Components tab — Repeat-row/columns Apply custom formats to column headers in Row Repeat and Column layouts to customize user interface. Skin form — Components tab — Layouts — Tabs Styles set here apply to tabs. When you create a tab group in a layout, you can select a format in the Style format field in the Tab Group properties panel. Tabs in a harness container always use the Standard format. Skin form — Components tab — Layouts — Tabs Styles set here apply to the tab body, the area beneath the tab header and underneath the layout in tab groups. When you create a tab group in a layout, you can select a format in the Format field in the Tab Group properties panel. You can specify values for the padding, border, and background of the following tab formats: Skin form — Components tab — Layouts — Trees and tables - General tab Use this tab to define default settings for text, border, and background in the selected grid format. You can then select a check box to apply these default settings to various table (grid) elements on the Rows, Headers, Borders, Behaviors, and Headers and footers tabs, rather than defining the text, border, and background style on each of these tabs. Skin form — Components tab — Layouts — Trees and tables - Rows tab Styles that you set on this tab apply to the rows in tables, tree tables, and tree layouts. Skin form — Components tab — Layouts — Trees and tables - General tab These styles apply to the column and row headers in a table, tree, or tree table layout. You can specify text, background, and border styling, as well as icons that indicate column sorting, filtering, and row handles. Skin form — Components tab — Layouts — Trees and tables — Borders tab Styles that you define here apply to borders of grid, tree, and tree grid layouts. Skin form — Components tab — Layouts — Trees and tables - Behaviors tab Styles set here determine the text and background of a grid row when the row has focus or is selected; the style of text in a row when the mouse pointer hovers over the row; and the border, background, and images associated with drag and drop behavior within the grid. Skin form — Components tab — Layouts — Trees and tables - Actions Layout tab Styles set here apply to the top and bottom action areas of the selected repeating grid, tree, or tree grid layout format. Skin form — Components tab — Layouts — Legacy layouts The styles you set here apply to Smart layouts. A Smart layout is a template containing fixed-width, fixed-height column pairs. Smart layouts ensure vertical alignment, even when layouts are nested.