The following table describes the style user interface for style properties in Perspective. These styles are based on Cascading Style Sheets (CSS), a style sheet language used for describing the presentation of a document or webpage. For an overview on using styles in Perspective, see also Styles and Style Classes.

On this page ...



Text Menu 


Property NameDescriptionExampleOutput
Font FamilySpecifies the font for the component. Examples of a Font Family are Times, Courier, Arial, Monospace, etc.

fontFamily: Monospace

SizeSpecifies the size of the font in pixels (px) or points (pt). If you enter just a number, Perspective assumes the value is in pixels.

fontSize: 26px

Color

Specifies the color of the text. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.

color: #FF0000

Weight

Sets how thick or thin characters in the text are displayed.

StyleDescription
normalDefines normal characters. This is the default.
boldDefines thick characters.
lighterDefines lighter characters.
bolderDefines thicker characters.
100-900Defines from thin to thick characters. 400 is the same as normal. 700 is the same as bold.

fontWeight: Bold
fontSize: 26px

fontWeight: Lighter
fontSize: 26px
Italic

Checkbox to indicate if the font style should be italic.

fontStyle: italic

Line Height

Specifies the height of a line. Can be specified as one of the following:

StyleDescription
normalA normal line height. This is the default.
numberA number that will be multiplied with the current font-size to set the line height.
lengthA fixed line height in px, pt, cm, etc.
percentageA line height in percent of the current font size.

lineHeight: normal

lineHeight: 32px

Letter SpacingIncreases or decreases the space between characters. The default is 0.

letterSpacing: 12px

Word SpacingIncreases or decreases the white space between words. The default is normal.

wordSpacing: 24px

Alignment

Text Align

The horizontal alignment of text in a component.

StyleDescription
startAligns text to the left.
endAligns text to the right.
leftAlign text to the left.
rightAligns text to the right.
centerCenters the text.
justifyStretches the text so the text has equal width on each side.
justify-allStretches the text so the text has equal width on each side.



textAlign : right

textAlign: center

textAlign: justify

Text IndentThe indentation of the first line in a text-block. The default value is 0.

textIndent: 24px

White space

Specifies how white-space inside a component is handled.

StyleDescription
normalSequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is the default.
nowrapSequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.
preWhitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.
pre-wrapSequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-lineWhitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.

whiteSpace: pre-wrap

Text Options

Transform

Capitalization setting for the text.

IconStyleDecoration
capitalizeTransforms the first character of each word to uppercase.
uppercaseTransforms all characters to uppercase.
lowercaseTransforms all characters to lowercase.

textTransform: uppercase

Decoration

Text decoration setting.

IconStyleDecoration
underlineHorizontal line under text.
line-throughHorizontal line through text.
overlineHorizontal line above text.

textDecoration: line-through

Break-word

Allows unbreakable words to be broken.

wordWrap: break-word

Shadow

Adds shadow to text. Shadow is set in pixels. 

StyleDescription

Color

Color for the shadow. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.
x-offsetOffset distance on x axis, in pixels
y-offsetOffset distance on y axis, in pixels
blur-radiusThe blur-radius. The default value is 0.

textShadow: #ff0000 6px 6px 2px

Overflow wrap

Allows the browser to break a line of text inside a component into multiple lines in an otherwise unbreakable place, thus avoiding a long string of text causing layout problems due to overflow.


StyleDescription
normalBreaks lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container. This is the default.
break-wordWords or strings of characters that are too large to fit inside their component will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphen property is used.

overflow wrap: normal

overflow wrap: break-word

Text overflow

Specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or it can display an ellipsis (...).

StyleDescription
clipThe text is clipped and not accessible. This is the default.
ellipsisRender an ellipsis ("...") to represent the clipped text.

textOverflow: clip

textOverflow: ellipsis





Background Menu


Property NameDescriptionExampleOutput
Background ColorSets the background color of a component. The background of a component is the total size of the component, including padding and border (but not the margin). You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.

backgroundColor: #D5D5D5

Background Image

Sets one or more background images for a component. By default, a background-image is placed at the top-left corner of a component, and repeated both vertically and horizontally.

This setting also has options for setting a linear or radial gradient as the background image.

backgroundImage: url("http://files.inductiveautomation.com/training/user_manual_images/ignition_logo.png")
backgroundRepeat: no-repeat
textAlign: center

(image resized)

backgroundImage: linear-gradient(rgb(237, 237, 237), rgb(150, 50, 150))
fontSize: 20px
fontStyle: italic
fontWeight: bold
textAlign: center

Background Position

Sets the starting position of a background image. By default, a background-image is placed at the top-left corner of a component, and repeated both vertically and horizontally.  Values can be as follows:

length in pixels

 The first value is the horizontal position, second value is the vertical position. For example 100px 5px will move the image 100px to the right and five pixels down. 

percentages Moving a background image by a percentage means it will align the percentage point in the image to the same percentage point in the container.  For example, 50% means it would align the middle of the image with the middle of the container., where 100% means it will align the last pixel of the image with the last pixel of the container
keywords Options are top, bottom, left, right, and center.

backgroundPosition: 100px 100px
borderStyle: solid
borderWidth: 3 px
 
fontSize: 56px
backgroundImage: url("https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg")

(image resized)

Advanced

Background Clip

Defines how far the background (color or image) should extend within a component. (Be sure to set up the border, padding, background properties, and add some content before configuring the background-clip, otherwise you will not see any changes when you add a value for the backgroundClip.

StyleDescription
border-boxDefault value. The background extends behind the border.
padding-boxThe background extends to the inside edge of the border.
content-boxThe background extends to the edge of the content box.

backgroundClip: content-box
backgroundColor: #CCCCFF
borderStyle: dotted

Background Repeat

Sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

StyleDescription
repeatThe background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default.
repeat xThe background image is repeated only horizontally.
repeat yThe background image is repeated only vertically.
no-repeatThe background-image is not repeated. The image will only be shown once.

backgroundRepeat: repeat
backgroundImage: url("http://files.inductiveautomation.com/training/user_manual_images/ ignition_logo.png")

(image resized)

Background Attachment

Specifies whether a background image scrolls with the rest of the page, or is fixed.

StyleDescription
scrollThe background image will scroll with the page. This is the default.
fixedThe background image will not scroll with the page.
localThe background image will scroll with the component's contents.

backgroundAttachment: fixed


Background size

The following feature is new in Ignition version 8.1.28
Click here to check out the other new features

Sets the size of the components background image. The following lists the possible values:

  • auto: Scales the background image so that the proportions are maintained.
  • contain: Scales the background image as large as possible within the component without cropping or stretching.
  • cover: Scales the background image, while maintaining proportions, to the smallest possible size to fill the container. If the proportions of the background differ from the element, the image will be cropped either vertically or horizontally.
  • Percentage value: Stretches the background image in the corresponding dimension to the specified percentage of the background positioning area. Negative values are not allowed.
  • Length value: Stretches the background image to the specified length. Various em and pixel values like 3.2em or 24px are accepted. Negative values are not accepted.

backgroundImage: url("http://files.inductiveautomation.com/training/user_manual_images/ignition_logo.png")
backgroundRepeat: no-repeat
backgroundSize: 50%
backgroundPosition: 100px 80px

backgroundImage: url("http://files.inductiveautomation.com/training/user_manual_images/ignition_logo.png")
backgroundRepeat: no-repeat
backgroundSize: 25%
backgroundPosition: 100px 80px

Box ShadowAttaches one or more shadows to a component. No shadow is the default.

boxShadow: 5px 10px #D3D3D3





Margin and Padding Menu

Property NameDescriptionExampleOutput
Padding Top/Left/Bottom/RightPadding is the space inside of a component, between the border and the content of the component. This property sets the padding for each of the four sides inside of a component.

paddingBottom: 2
paddingLeft: 30
paddingRight: 13
paddingTop: 13

Margin Top/Left/Bottom/Right

Margin is the space outside of a component. This property sets the padding for each of the four sides surrounding a component.

marginBottom:  
marginLeft:  
marginRight:  
marginTop:  


Border Menu

Property NameDescriptionExampleOutput
Border Unlink Sides / Link Sides

The first item on the Border menu is the Border Unlink sides icon. When you click this icon, the four border sides of the component are "unlinked," and the Border Styles settings can be applied individually to each side. 

When the Link Sides  icon is selected, then the Border Styles settings will apply to all four borders equally.



Border Style


Sets the style for an component's four borders.

StyleDescription
noneSpecifies no border. This is default.
solidSpecifies a solid border.
dashedSpecifies a dashed border.
dottedSpecifies a dotted border.
doubleSpecifies a double border.
grooveSpecifies a 3D grooved border. The effect depends on the border-color value.
ridgeSpecifies a 3D ridged border. The effect depends on the border-color value.
insetSpecifies a 3D inset border. The effect depends on the border-color value.
outsetSpecifies a 3D outset border. The effect depends on the border-color value.
hiddenThe same as "none", except in border conflict resolution for table elements.

borderStyle: dotted

borderStyle: dashed

Border Width

Sets the width of the border.

If the Unlink sides icon is selected, you can set separate border widths for the top, left, bottom, and right sides.

borderWidth: 7px
borderStyle: solid
textAlign: center


borderTopWidth: 12px
borderTopColor: #0000D9
borderTopStyle: solid
borderStyle: solid
borderWidth: 3px
borderColor: #AC00AC
textAlign: center

Border Color

Specifies the color of the border. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference

If the Unlink sides icon is selected, you can set separate border colors for the top, left, bottom, and right sides.

borderColor: #AC00AC
borderWidth: 3px
borderStyle: solid
alignVertical: center
textAlign: center


borderTopColor: #4747FF
borderLeftColor: #AC00AC
borderBottomColor: #008000
borderRightColor: #FF0000
borderWidth: 3px
borderStyle: solid

Border RadiusDefines the radius of the component's corners allowing rounded borders.

borderRadius: 10px
borderWidth  3px
borderStyle: solid
alignVertical: center
textAlig : center


Border Radii Top/Left/Bottom/RightSets the radius for each of the component's corners: Border top left radius, Border top right radius, Border bottom left radius, Border bottom right radius.

borderTopLeftRadius: 10px
borderBottomRightRadius: 10px
borderStyle: solid

Outline Style

Specifies the style of an outline.

StyleDescription
noneSpecifies no outline. This is default.
solidSpecifies a solid outline.
dashedSpecifies a dashed outline.
dottedSpecifies a dotted outline.
doubleSpecifies a double outliner.
grooveSpecifies a 3D grooved outline. The effect depends on the outline-color value.
ridgeSpecifies a 3D ridged outline. The effect depends on the outline-color value.
insetSpecifies a 3D inset outline. The effect depends on the outline-color value.
outsetSpecifies a 3D outset outline. The effect depends on the outline-color value.
hiddenSpecifies a hidden outline.



outlineStyle: dashed
outlineWidth: 6px
outlineColor: #0000AC
borderWidth: 3px
borderStyle: solid

outlineStyle: double
outlineColor: #000AC
outlineWidth: 12px
borderWidth: 3px
borderStyle: solid





Shape Menu

Property NameDescription
 FillSets a color for the fill of an SVG shape.
StrokeSets a color for the stroke. The stroke is a border around SVG shapes. Specifies the color of the text. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.
Stroke widthSets the width of the stroke, in pixels. 


Misc Menu 

Property NameDescriptionExampleOutput
OpacityDescribes the transparency level for a component, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. Opacity applies to text, border, and outline properties.

opacity: 0.50


Cursor

Specifies the mouse cursor to be displayed when pointing over a component.  

Note: The table below lists the options available in the style editor. Additional options are available, but must be manually typed into a style property via the Property Editor. 

IconName
(none)auto
(none)none
alias
all-scroll
copy
crosshair
grab
grabbing
help
not-allowed
pointer
progress
text
wait
zoom-in

cursor: pointer

cursor: crosshair

Overflow

Specifies what should happen if content overflows a component's box: whether to clip content or add scrollbars when a component's content is too big to fit in a specified area.

StyleDescription
visibleThe overflow renders outside the component's box. It is not clipped. This is the default.
hiddenThe overflow is clipped, and the rest of the content will be invisible.
scrollThe overflow is clipped, but a scrollbar is added to see the rest of the content.
autoIf overflow is clipped, a scrollbar will be added to see the rest of the content.

overflow: visible

overflow: hidden

overflow: scroll

Overflow X

Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level component, when it overflows at the left and right edges.


StyleDescription
visibleThe content is not clipped, and will be rendered outside the left and right edges. This is the default.
hiddenThe content is clipped. No scrolling mechanism is provided.
scrollThe content is clipped and a scrolling mechanism is provided.
autoWill cause a scrolling mechanism to be provided for overflowing boxes.

overflow x: visible

overflow x: hidden

Overflow Y

Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level component, when it overflows at the top and bottom edges.


StyleDescription
visibleThe content is not clipped, and will be rendered outside the content box. This is the default.
hiddenThe content is clipped. No scrolling mechanism is provided.
scrollThe content is clipped and a scrolling mechanism is provided.
autoWill cause a scrolling mechanism to be provided for overflowing boxes.

overflow y: scroll


  • No labels