Row Properties screen

Configures the properties, borders, margins, padding, and background of a row on a custom page.


Row Properties screen

Row Properties screen > Properties tab

Configures the properties for a row on a custom page.

Figure: Row Properties screen

Row Properties screen

Fields

Field NameDefinition

Name
Function:
Specifies the name of the row.
Accepted Values:
One line of text that can have spaces.
Default Value:
None

Height
Function:
Shows the height of the row in pixels.

To change the height of row, refer Add Section field in the Custom Page Design screen.

Accepted Values:
Read only.

Order
Function:
Specifies in which order the row shows on a custom page.
Accepted Values:
A positive integer.

Column Alignment
Function:
Specifies whether to stretch the column to completely fill the width.
Accepted Values:
  • Stretch - Stretches the column to completely fill the width.
  • Center - Column is aligned in center.
Default Value:
Stretch

Save
Function:
Saves your changes.

Save and Close
Function:
Saves your changes and closes the screen.

Row Properties screen > Container tab

Configures the borders, padding, margins, and box shadow for a row on a custom page.

Figure: Row Properties Container screen

Row Properties Container screen

Fields

Field NameDefinition

Border Style
Function:
Specifies the border style around the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
  • Dashed
  • Dotted
  • Double
  • Groove
  • Hidden
  • Inset
  • None
  • Outset
  • Ridge
  • Solid
Default Value:
None

Border Left (px)
Function:
Specifies the width in pixels for the left side border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Right (px)
Function:
Specifies the width in pixels for the right side border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Bottom (px)
Function:
Specifies the width in pixels for the bottom border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Top (px)
Function:
Specifies the width in pixels for the top border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Color
Function:
Specifies the border color for the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Border Radius Top Left (px)
Function:
Specifies the radius in pixels for the top-left border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Top Right (px)
Function:
Specifies the radius in pixels for the top-right border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Bottom Left (px)
Function:
Specifies the radius in pixels for the bottom-left border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Bottom Right (px)
Function:
Specifies the radius in pixels for the bottom-right border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Top (px)
Function:
Specifies space in pixels on the top between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Right (px)
Function:
Specifies space in pixels on the right side between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Bottom (px)
Function:
Specifies space in pixels on the bottom between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Left (px)
Function:
Specifies space in pixels on the left side between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Top (px)
Function:
Specifies space in pixels on the top of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Right (px)
Function:
Specifies space in pixels on the right side of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Bottom (px)
Function:
Specifies space in pixels on the bottom of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Left (px)
Function:
Specifies space in pixels on the left side of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Shadow Color
Function:
Specifies the shadow color for a row.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff

Horizontal Offset (px)
Function:
Specifies a horizontal distance in pixels between the shadow and the vertical line.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Shows the box shadow on the right side of a row.
  • A negative whole number - Shows the box shadow on the left side of a row.
Default Value:
0

Vertical Offset (px)
Function:
Specifies a vertical distance in pixels between the shadow and the horizontal line.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Shows the box shadow on the bottom side of a row.
  • A negative whole number - Shows the box shadow on the top side of a row.
Default Value:
0

Blur (px)
Function:
Specifies the number in pixels to create the blur effect on the box shadow.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
A positive integer.
Default Value:
0

Spread (px)
Function:
Specifies the radius in pixels for a box shadow.

If the value is not specified, the shadow shows on the same size as the widget.

To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Increases the size of a box shadow.
  • A negative whole number - Decreases the size of a box shadow.
Default Value:
0

Set Shadow Inside
Function:
Specifies whether to show the box shadow into the row.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • On - Shows the box shadow into the row.
  • Off - Shows the box shadow outside the row.
Default Value:
Off

Save
Function:
Saves your changes.

Save and Close
Function:
Saves your changes and closes the screen.

Row Properties screen > Background tab

Configures the background color and image for a row.

Figure: Row Properties Background screen

Row Properties Background screen

Fields

Field NameDefinition

Background Color
Function:
Specifies the background color for the row.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Image Source
Function:
Specifies the source for an image to set as a background for the row.
Accepted Values:
  • Web URL - Specifies the absolute URL for an image.
  • Image Library - Uses an image from the image library.

    To use image from image library, click Pick An Image.

Default Value:
Image Library
Limitations:
This field is available in these releases:

Background Image URL
Function:
Specifies the URL of an image file to set as a background for the row.
To Open this Field:
  1. In the Image Source field, click Web URL.
Accepted Values:
One line of text (a string) in URL format that points to an image file.

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .bmp
  • .tif
Default Value:
None
Example:
https://mysite.com/demo/image/upload/Sample.jpg
Limitations:

.jpeg and .tif format files are permitted, and .bmp format files are not permitted in these releases:

Pick An Image
Opens this Screen:
Image Picker screen
To Open this Field:
  1. In the Image Source field, click Image Library.
Function of this Screen:
Specifies an image file to show on your page or menu.
Limitations:
This field is available in these releases:

Stretch Background Image
Function:
Specifies whether to stretch the background image to fully fill the row.
Accepted Values:
  • On - Stretches the background image to fully fill the row.
  • Off - Shows the background image in original size. You can set the background image of the row to be repeated.
Default Value:
Off

Repeat Mode
Function:
Specifies whether the background image of the row is repeated.
To Open this Field:
  1. Turn off Stretch Background Image.
Accepted Values:
  • Don't Repeat - The background image does not repeat. The image shows one time.
  • Repeat Mode - The background image repeats both vertically and horizontally.
  • Repeat Horizontally - The background image repeats horizontally.
  • Repeat Vertically - The background image repeats vertically.
Default Value:
None

Save
Function:
Saves your changes.

Save and Close
Function:
Saves your changes and closes the screen.

Row Properties screen > CSS tab

Configures the CSS classes for a row on a custom page.

Figure: Row Properties CSS tab

CSS tab

Prerequisites

Fields

Field NameDefinition

CSS Classes
Function:
Specifies custom CSS classes for a row.
Accepted Values:
One or more custom CSS classes from the list.

This field shows the CSS classes that are configured in the CSS files you upload on the Style Properties screen.

Default Value:
None

Save
Function:
Saves your changes.

Save and Close
Function:
Saves your changes and closes the screen.