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
Description:
Specifies the CSS files to use on a custom page.
Allowed 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
Description:
Saves your changes.

Save and Close
Description:
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
Description:
Specifies the border style around the page.
To Open this Field:
  1. Turn on the Border field.
Allowed Values:
  • Dashed
  • Dotted
  • Double
  • Groove
  • Hidden
  • Inset
  • None
  • Outset
  • Ridge
  • Solid
Default Value:
None

Border Left (px)
Description:
Specifies the width in pixels for the left side border of the page.
To Open this Field:
  1. Turn on the Border field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Right (px)
Description:
Specifies the width in pixels for the right side border of the page.
To Open this Field:
  1. Turn on the Border field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Bottom (px)
Description:
Specifies the width in pixels for the bottom border of the page.
To Open this Field:
  1. Turn on the Border field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Top (px)
Description:
Specifies the width in pixels for the top border of the page.
To Open this Field:
  1. Turn on the Border field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Color
Description:
Specifies the border color for the page.
To Open this Field:
  1. Turn on the Border field.
Allowed 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)
Description:
Specifies the radius in pixels for the top-left border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Radius Top Right (px)
Description:
Specifies the radius in pixels for the top-right border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Radius Bottom Left (px)
Description:
Specifies the radius in pixels for the bottom-left border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Border Radius Bottom Right (px)
Description:
Specifies the radius in pixels for the bottom-right border of the page.
To Open this Field:
  1. Turn on the Border Radius field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Padding Top (px)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Padding Right (px)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Padding Bottom (px)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Padding Left (px)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Margin Top (px)
Description:
Specifies space in pixels on the top of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Margin Right (px)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Margin Left (px)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Margin Bottom (px)
Description:
Specifies space in pixels on the bottom of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
None

Shadow Color
Description:
Specifies the shadow color for a page.
To Open this Field:
  1. Turn on the Box Shadow field.
Allowed 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)
Description:
Specifies a horizontal distance in pixels between the shadow and the vertical line.
To Open this Field:
  1. Turn on the Box Shadow field.
Allowed 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)
Description:
Specifies a vertical distance in pixels between the shadow and the horizontal line.
To Open this Field:
  1. Turn on the Box Shadow field.
Allowed 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)
Description:
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.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
0

Spread (px)
Description:
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.
Allowed 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
Description:
Specifies whether to show the box shadow into the page.
To Open this Field:
  1. Turn on the Box Shadow field.
Allowed Values:
  • On - Shows the box shadow into the page.
  • Off - Shows the box shadow outside the page.
Default Value:
Off

Save
Description:
Saves your changes.

Save and Close
Description:
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
Description:
Specifies the background color for the page.
Allowed 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
Description:
Specifies the source for an image to set as a background for the page.
Allowed Values:
  • Web URL - Specifies the absolute URL or relative URL for an image.
    • You can specify the absolute URL to use an image from an external source.
    • You can specify the relative URL to use an image from the image library.
  • 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
Description:
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.
Allowed 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
  • /library/images/ap-logo.jpg
Limitations:
  • These requirements apply to images that use an absolute URL:
    • Images must be stored in a web server or cloud storage location accessible through HTTPS that AgilePoint NX can access.
    • Images cannot be stored on a local file system, such as your local machine or the AgilePoint Server machine.
    • Images must be referenced with an absolute URL.
  • These requirements apply to images that use a relative URL:
    • You must specify the file path for the relative URL in this format:

      /library/images/[file name with the extension]

    • You can use the relative URL only if you know the image file name. If you do not know the file name, you can use the Image Library option on the Image Source field to select an image from the image library.

      For more information, refer to Images screen

      .
    • The image file must exist in the image library in Page Builder. To add an image to the Image Library, refer to Add Image File screen.
    • Support for relative URLs is available in these releases:
  • .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
Description:
Specifies whether to stretch the background image to fully fill the page.
Allowed 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
Description:
Specifies whether the background image of the page is repeated.
To Open this Field:
  1. Turn off Stretch Background Image.
Allowed 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
Description:
Saves your changes.

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