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

  Skin form — Components tab — Layouts — Trees & grids — Borders tab

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

Styles that you define here apply to borders of grid, tree, and tree grid layouts.

Grid Styles

For the following formats, as well as custom formats, specify Outer Border, and Cell Border styles:

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.

Outer border

Use default border for this grid format

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

Use mixin

Select to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin. Click to select a different mixin from the list.

If desired, you can specify the Top, Left, Right, or Bottom border as none, solid, dashed, or dotted , rather than inheriting the style from the selected mixin.
Specify styles

Select to define a custom border:

  • Apply to all sides — select this checkbox to specify the same border style to the top, left, right, and bottom borders. Choose from none, solid, dashed, or dotted.
  • If you clear the Apply to all sides checkbox, select a border style for the Top, Left, Right, and Bottom borders. For each of these borders, you can select none, solid, dashed, or dotted. Specify the pixel width and color of the border, if applicable.

Cell border

Use default border for this grid format

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

Use mixin

Select to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin. Click to select a different mixin from the list.

If desired, you can specify the Top, Left, Right, or Bottom border as none, solid, dashed, or dotted , rather than inheriting the style from the selected mixin.
Specify styles

Select to define a custom border:

  • Apply to all sides — select this checkbox to specify the same border style to the top, left, right, and bottom borders. Choose from none, solid, dashed, or dotted.
  • If you clear the Apply to all sides checkbox, select a border style for the Top, Left, Right, and Bottom borders. For each of these borders, you can select none, solid, dashed, or dotted. Specify the pixel width and color of the border, if applicable.

Styling grid borders

Use the following table to set Outer Borders and Cell Borders to achieve the desired result.

If your grid has... in the Outer Border...and in the Cell Border...
a single cell
Single cell grid

Select: same for all sides
Set to none: Top, Left, Right, and Bottom

Rows Only
Rows only grid		Specify: Left, Right, Bottom

Set to none: Top

Specify: Top

Set to none: Left, Right, Bottom
Columns Only
Columns only grid		Specify: Top, Right, Bottom

Set to none: Left
Specify: Left

Set to none: Top, Right, Bottom
Row and Columns
Rows and columns grid
Specify: Right, Bottom

Set to none: Top, Left

Specify: Top, Left

Set to none: Right, Bottom

Creating a custom grid format

To create a new style format:

  1. Click Add a format.
  2. In the Create a new format dialog, type the Format name using only alphanumeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The style name that you enter is converted into the name CSS class/classes.
  3. Type a Usage annotation, if desired.
  4. Click OK. The new format is populated with default values.

If you want to create a new format that is a copy of an existing format, right-click the format that you want copy and then click Clone.

Using a custom grid format

  1. Click (Magnifying glass) on the Grid Repeat Layout to open the Grid Repeat Layout properties panel.
  2. On the General tab, select the Other as the Style.
  3. Press the down arrow to select the custom grid format that you want to use.

You can delete styles that you create; click Delete Link.

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 rulesAbout Skin rules

Open topic with navigation