Style Properties screen

Specifies the look and feel for a custom page in Page Builder.


Style Properties screen

Style Properties screen > Properties tab

Configures the CSS files for a custom page in Page Builder.

Figure: Style Properties > Properties tab

Properties tab

Fields

Field NameDefinition

CSS Files
Function:
Specifies the CSS files to use on a custom page.
Accepted Values:
One or more custom CSS files from the list.

This field shows a list of CSS files you created on the CSS screen.

Default Value:
None

Save
Function:
Saves your changes.

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

Style Properties screen > Container tab

Specifies the borders, padding, margins, and box shadow for a whole page in Page Builder.

Figure: Style Properties Container screen

Style Properties Container screen

Fields

Field NameDefinition

Border Style
Function:
Specifies the border style around the page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 page.
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 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

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

Shadow Color
Function:
Specifies the shadow color for a page.
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 page.
  • A negative whole number - Shows the box shadow on the left side of a page.
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 page.
  • A negative whole number - Shows the box shadow on the top side of a page.
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 page.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • On - Shows the box shadow into the page.
  • Off - Shows the box shadow outside the page.
Default Value:
Off

Save
Function:
Saves your changes.

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

Style Properties screen > Background tab

Specifies the page background color and page background image for a custom page in Page Builder.

Figure: Style Properties Background screen

Style Properties Background screen

Fields

Field NameDefinition

Background Color
Function:
Specifies the background color for the page.
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 page.
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 page.
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 page.
Accepted Values:
  • On - Stretches the background image to fully fill the page.
  • Off - Shows the background image in original size. You can set the background image of the page to be repeated.
Default Value:
Off

Repeat Mode
Function:
Specifies whether the background image of the page 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.