Styles Tab - WorkView - Foundation 24.1 - Foundation 24.1 - Ready - OnBase - Premier - external - Premier

WorkView

Platform
OnBase
Product
WorkView
Release
Foundation 24.1
License
Premier

The following styles can be configured for the header section from the Styles tab:

Style

Description

background-color

--header-container-content-background-color

This option allows you to select the background color of the container of the header section. Click on the ellipsis (...) button to access a color picker to select the color.

border-color

--header-container-border-color

In the Style Value column, you can click the ellipsis button and select a color for the border around the header section.

border-style

--header-container-border-style

In the Style Value column, you can select the line style for the border around the header section. You can select none, dotted, solid, dashed, double, or inset.

border-width

--header-container-border-width

Enter the value for the width of the border line around the header section.

The value entered can be one of the following units of measure:

  • keywords: thin, medium, thick
  • px - Pixels (This is the default unit and is used if no unit is specified.)

  • % - Percentage

  • in – Inches

  • cm – Centimeters

  • mm – Millimeters

  • em – An em unit is the current font size. If the font size is set to 16 pt and the element is set to 2em, the element will be 32 pt.

  • ex – An ex unit is equal to the x-height of the font.

  • pt – Points

  • pc – Picas

The values can be set for all four borders separately, in the following order: top border, right border, bottom border, left border. The following is an example:thin medium thick 10px

height

Defines the height of the header section. The value entered can be one of the following units of measure:

  • px - Pixels (This is the default unit and is used if no unit is specified.)

  • % - Percentage

    Note:

    Relative height set on controls within a control that does not have a height set is not supported.

  • in – Inches

  • cm – Centimeters

  • mm – Millimeters

  • em – An em unit is the current font size. If the font size is set to 16 pt and the element is set to 2em, the element will be 32 pt.

  • ex – An ex unit is equal to the x-height of the font.

  • pt – Points

  • pc – Picas

width

Defines the width of the header section. The value entered can be one of the following units of measure:

  • px - Pixels (This is the default unit and is used if no unit is specified.)

  • % - Percentage

  • in – Inches

  • cm – Centimeters

  • mm – Millimeters

  • em – An em unit is the current font size. If the font size is set to 16 pt and the element is set to 2em, the element will be 32 pt.

  • ex – An ex unit is equal to the x-height of the font.

  • pt – Points

  • pc – Picas

text-align

This option allows you to define how text inserted into the header section will be aligned, as well as how the view will be aligned when the view does not take up 100% of a window. This setting does not control text within other container controls.

Alignment options available from the drop-down list are none, left, center, right, and justify.

--header-container-border-radius

This option allows you to define how much the corners of objects of the header section are rounded.

The value can be defined with:

  • One value: applies to all four corners
  • Two values: top-left and bottom-right corners, and top-right and bottom-left corners
  • Three values: top-left corner, top-right and bottom-left corner, bottom-right corner
  • Four values: top-left corner, top-right corner, bottom-right corner, bottom-left corner

The value entered can be one of the following units of measure:

  • px - Pixels (This is the default unit and is used if no unit is specified.)

  • % - Percentage

  • in – Inches

  • cm – Centimeters

  • mm – Millimeters

  • em – An em unit is the current font size. If the font size is set to 16 pt and the element is set to 2em, the element will be 32 pt.

  • ex – An ex unit is equal to the x-height of the font.

  • pt – Points

  • pc – Picas

--header-container-header-background-color

This option allows you to select the background color of the header section. Click on the ellipsis (...) button to access a color picker to select the color.

--header-container-header-background-image

This option allows you to set a background image for the header section. You can enter a link to the image from your local machine or a hyperlink.

Note: The maximum length of the value is 255 characters. It is recommended to use shorter URLs. If necessary, add your image to the Global Style sheet and set it on the control with a CSS Class name.

--header-container-header-background-position

This option allows you to set the position of the background image. Possible values:

  • Keyword: top, bottom, left, right, center
  • Percentage value, stating distance from the left side and from the top. The following is an example for 25% from the left and 75% from the top:
    25% 75%
  • Defined distance, stating the exact distance from the left and from the top. The following is an example for 25 pixels from the left and 1 inch from the top:
    25px 1in
  • Distance from the edges. The following is an example for 50 pixels from the bottom and 100 pixels from the right side:
    bottom 50px right 100px

--header-container-header-background-repeat

This option allows you to set whether the background image should repeat itself in the available header section space. Possible values:

  • repeat, which repeats the image horizontally and vertically
  • repeat-x, which repeats the image horizontally
  • repeat-y, which repeats the image vertically
  • space, which repeats the image horizontally and vertically without cropping it. If full multiple images cannot fit into the available space, white space is distributed evenly between the images
  • round, which repeats the image horizontally and vertically without cropping it. If full multiple images cannot fit into the available space, the image is stretched to fit the space
  • no-repeat, which does not repeat the image

You can use two-value syntax, where the first value represents the horizontal repetition, and the second value represents the vertical repetition. The following is an example for an image which will be repeated horizontally and not repeated vertically:repeat no-repeat

Note:

When properties can be configured on both the General and Styles tabs, the property changes will be properly displayed on both tabs.