You are here: Reference > Rule types > Skins > Skin form - Layouts - Trees & grids - Rows

  Skin form — Components tab — Layouts — Trees & grids

 
  1. General 
  2. Rows 
  3. Headers 
  4. Borders 
  5. Behaviors 
  6. Action Layouts 

Styles you set here apply to the rows in grids, tree grids, and tree layouts.

Select Enable row banding options (zebra striping) to specify alternating text or background colors for odd and even rows.

Only text color is used when using default grid text or mixin. Only background color is used when using default grid background or mixin.

Grid Rows

A preview of the currently selected format displays to the right. You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview. In the Skin Preview, click the Grids tab. Select the format you want to preview: Default, Spreadsheet, Transparent, or a custom format.

 

Enable row banding options (zebra striping)

Select to enable alternating odd and even text and background colors. Without selecting this option, you can apply formatting to the rows, the total row, the tree icons, and the expand pane icons. After you select this check box, you can select different styling for the odd and even rows.

Rows: All, Odd, Even, or Total

Set the Text and Background color for rows: all (without banding), odd and even (with banding) or total row.

Text

Use the default text for the grid format or choose the mixin style or a specific style.

To set the row handle image, select the Headers tab.

Use mixin

Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin.

The Mixin field displays the name and a preview of the currently selected mixin. Click the magnifying glass icon to select a different mixin from the list.

Specify styles

Select to define a custom style for the selected format and specify a Color for the text. Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.

  • Additional styles — Add additional styles, specific to styling the text for this element, by specifying a CSS Attribute and Value. Specify only CSS related to text styles. Click Add additional styles to define another CSS attribute-value pair. Click delete to remove an additional style.

Background

Applies to the background color of odd, even, and total rows.

Use default background for this grid format

Select to use the default background color specified in the Default background area on the General tab.

Use mixin Select to use a mixin to define the background color. Mixin displays the name and a preview of the currently selected mixin. Click the magnifying glass icon to select a different mixin from the list.
Specify styles Select to specify a Color. The default is transparent (no fill). Enter a value using CSS hex notation (such as #3d3d3d) or click the box next to the field to Choose a Color.
  • Additional styles — Add additional styles, specific to styling the background for this element, by specifying a CSS Attribute and Value. Specify only CSS related to background styles. Click Add additional styles to define another CSS attribute-value pair. Click delete to remove an additional style.

Tree icons and Expand Pane icons

Specify Expand and Collapse images for:

Expand

Collapse
To search for an image, click the magnifying glass icon to open the Image Catalog tool. Enter any portion of a file name (relative path, file name, or extension) in the Search box, and click Find. If you can’t find the image, make sure it is in the webwb directory.

 

Related topics Harness and Section forms — Adding a Grid layout
Related topics Harness and Section forms — Adding a Tree layout
Related topics Harness and Section forms — Adding a Tree Grid layout
Related topics Skin rules — Completing the Components tab

About Skin rules