Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



Additional information and examples are available in Styles and Style Classes.

Text
Property NameDescriptionExampleOutput
Color

Specifies the color of the text. You can set the color with a HEX, RGB, or HSL value. For more information, see Color Selector Reference.



Code Block
languagecss
titleColor - HEX
color : #FF0000

Code Block
languagecss
titleColor - RGB
color : #0000FF



Image Modified


Image Modified

Font 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.


Code Block
languagecss
titleFontSize - 12 px
fontSize : 12px
color : #0000FF


Code Block
languagecss
titleFontSize - 26 px
fontSize : 26px
color : #0000FF




Image Modified


Image Modified

Font 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.



Code Block
languagecss
titleFontWeight - 100
fontWeight : Bold
fontSize : 24 px


Code Block
languagecss
titleFontWeight - 100
fontWeight : 100
fontSize : 24 px




Image Modified


Image Modified

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


Code Block
languagecss
titlefontFamily - Monospace
fontFamily : Monospace
color : #0000FF




Image Modified

Font Style

The font style for text: normal or italic. Normal is the default.


Code Block
languagecss
titlefontStyle - italic
fontStyle : italic
color : #0000FF




Image Modified

Font Variant

Specifies whether or not text is displayed in a small-caps font.

StyleDescription
normalThe default is set to normal which is all lowercase letters.
small-capsUses uppercase letters, however, the uppercase letters are in a smaller font size than the original uppercase letters in the text.




Code Block
languagecss
titlefontVariant - small-caps
fontVariant : small-caps
color : #0000FF




Image Modified






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.



Code Block
languagecss
titleLine Height - normal
lineHeight : normal
color : #0000FF
fontFamily : times
 


Code Block
languagecss
titleLine Height - normal
lineHeight : 32px
color : #0000FF
fontFamily : times
 



Image Modified


Image Modified

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.



Code Block
languagecss
titletextAlign - right
textAlign : right
color : #0000AC
borderStyle : solid


Code Block
languagecss
titletextAlign - center
textAlign : center
color : #0000AC
borderStyle : solid


Code Block
languagecss
titletextAlign - justify
textAlign : justify
color : #0000AC
borderStyle : solid
borderWidth : 1 px




Image Modified




Image Modified



Image Modified


Text Transform

Controls the capitalization of text.

StyleDescription
noneNo capitalization. The text renders as it is. This is the default.
uppercaseTransforms all characters to uppercase.
lowercaseTransforms all characters to lowercase.
capitalizeTransforms the first character of each word to uppercase.
full-widthForces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).



Code Block
languagecss
titletextTransform - uppercase
textTransform : uppercase
color : #0000FF
fontFamily : times



Image Modified

Text Shadow

Adds shadow to text. Shadow is set in pixels. The default is no shadow.

StyleDescription

none

No shadow. This is the default.
horizontalPosition of the horizontal shadow.
verticalPosition of the vertical shadow.
blur-radiusThe blur-radius. The default value is 0.



Code Block
languagecss
titletext-Shadow - Horizontal, Vertical and Blur Radius
textShadow : 6px 6px #ff0000
fontFamily : times
fontSize : 24px
fontWeight : bold



Image Modified

Text Decoration

Specifies the decoration added to text.

StyleDecoration
noneNo decoration. This is the default.
overlineHorizontal line above text.
line-throughHorizontal line through text.
underlineHorizontal line under text.



Code Block
languagecss
titletextDecoration - line-through
textDecoration : line-through
fontFamily : times
fontSize : 24px


Code Block
languagecss
titletextDecoration - underline
textDecoration : underline
fontFamily : times
fontSize : 24px



Image Modified


Image Modified

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


Code Block
languagecss
titleletterSpacing - 12 pixels
letterSpacing : 12px
color : #0000AC
fontFamily : times
fontSize : 18px
fontWeight : bold



Image Modified



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


Code Block
languagecss
titlewordSpacing - 20 pixels
wordSpacing : 24px
color : #0000AC
fontFamily : times
fontSize : 18px
fontWeight : bold



Image Modified

Text Justify

The justification method of text when textAlign is set to justify.

StyleDescription
noneDisables justification methods.
autoThe browser determines the justification algorithm.
inter-wordIncreases or decreases the space between words.
inter-characterIncreases or decreases the space between characters.



Code Block
languagecss
titletextJustify
textJustify : inter-word
color : #0000AC
borderStyle : solid
borderWidth : 1 px



Image Modified

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


Code Block
languagecss
titletextIndent - in pixels
textIndent : 24px
color : #0000AC
fontFamily : times
borderStyle : solid
borderWidth : 1 px



Image Modified

Word Wrap

Allows long words to be able to be broken and wrap to the next line.

StylesDescription
normalBreak words only at allowed break points. This is the default.
break-wordAllows unbreakable words to be broken.



Code Block
languagecss
titlewordWrap - break-word
wordWrap : break-word
color : #0000AC
fontFamily : times
borderStyle : solid
borderWidth : 1 px



Image Modified

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.



Code Block
languagecss
titlewhiteSpace - pre-wrap
whiteSpace : pre-wrap



Image Modified

Background
Property NameDescription

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).


Code Block
languagecss
titlebackgroundColor - #D5D5D5
backgroundColor : #D5D5D5



Image Modified

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.


Code Block
languagecss
titlebackgroundImage - url
backgroundImage : url("http://files.inductiveautomation.com/
training/user_manual_images/
ignition_logo.png")
backgroundRepeat : no-repeat
fontSize : 56px
fontWeight : bold
textAlign : center


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


Image Modified

(image resized)


Image Modified

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.



Code Block
languagecss
titlebackgroundClip - content-box
backgroundClip : content-box
backgroundColor : #CCCCFF
borderStyle : dotted



Image Modified

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

  • 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.


Code Block
languagecss
titlebackgroundPosition - 100px 100px
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 Modified

(image resized)

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.



Code Block
languagecss
titlebackgroundRepeat - repeats
backgroundRepeat : repeat
fontSize : 32px
fontWeight : bold
backgroundImage : url("http://files.inductiveautomation.com/
training/user_manual_images/
ignition_logo.png")


Image Modified

(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.



Code Block
languagecss
titlebackgrountAttachment - fixed
backgroundAttachment : fixed



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


Code Block
languagecss
titleboxShadow - in pixels with color
boxShadow : 5px 10px #D3D3D3



Image Modified


Margin and Padding
Property NameDescription

All MarginMargin is the space outside of a component. Sets the margin for all four sides outside of a component.


Code Block
languagecss
titlemargin - All four sides
margin : 10px
color : #0000FF
fontFamily : times



Image Modified

All PaddingPadding is the space inside of a component. Sets the padding for all four sides inside of a component.


Code Block
languagecss
titlepadding - All four sides
padding : 10px
color : #0000FF
fontFamily : times



Image Modified

Margin Top/Left/Bottom/RightSets the margin for each side outside of the component: margin-top, margin-left, margin-bottom, margin-right.

Padding Top/Left/Bottom/RightSets the margin for each side inside of the component: padding-top, padding-left, padding-bottom, padding-right.

Border
Property NameDescription

All 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.



Code Block
languagecss
titleborderStyle - dotted
borderStyle : dotted



Code Block
languagecss
titleborderStyle - dashed
borderStyle : dashed




Image Modified



Image Modified

All Border WidthSets the width of a component's four borders.


Code Block
languagecss
titleborderWidth - in pixels
borderWidth : 7px
borderStyle : solid
alignVertical : center
textAlign : center



Image Modified

All Border ColorSpecifies a color of a component's four borders.


Code Block
languagecss
titleborderColor - All four sides
borderColor : #AC00AC
borderWidth : 3px
borderStyle : solid
alignVertical : center
textAlign : center



Image Modified

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


Code Block
languagecss
titleborderRadius - All four corners
borderRadius : 10px
borderWidth : 3px
borderStyle : solid
alignVertical : center
textAlign : center



Image Modified

Border Style Top/Left/Bottom/RightSets the style for each of the component's four borders: Top border style, Left border style, Bottom border style, Right border style. Each border style must be set before you set the border color.

Border Width Top/Left/Bottom/RightSets the width for each of the component's four borders: Top border width, Left border width, Bottom border width, Right border width.


Code Block
languagecss
titleborderTopWidth - in pixels
borderTopWidth : 12px
borderTopColor : #0000D9
borderTopStyle : solid
borderStyle : solid
borderWidth : 3px
borderColor : #AC00AC
textAlign : center



Image Modified

Border Color Top/Left/Bottom/RightSets the color for each of the component's four borders: Top border color, Left border color, Bottom border color, Right border color.


Code Block
languagecss
titleborderColor - Top/Left/Right/Bottom/Right
borderTopColor : #4747FF
borderLeftColor : #AC00AC
borderBottomColor : #008000
borderRightColor : #FF0000
borderWidth : 3px
borderStyle : solid



Image Modified

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.


Code Block
languagecss
titleborderRadius - Left / Right Radius
borderTopLeftRadius : 10px
borderBottomRightRadius : 10px
borderStyle : solid



Image Modified

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 outiline-color value.
hiddenSpecifies a hidden outline.



Code Block
languagecss
titleoutlineStyle - dashed
outlineStyle : dashed
outlineWidth : 6px
outlineColor: #0000AC
borderWidth : 3px
borderStyle : solid

Code Block
languagecss
titleoutlineStyle - dashed
outlinsStyle : double
outlineColor : #000AC
outlineWidth : 12px
borderWidth : 3px
borderStyle : solid



Image Modified


Image Modified

Outline WidthA line that is drawn around a component (outside the borders) to make the component stand out. Specifies the width of an outline.
Outline ColorA line that is drawn around a component (outside the borders) to make the component stand out. Specifies the color of an outline.
Misc
Property NameDescription

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.


Code Block
languagecss
titleopacity - .50
opacity : 0.50



Image Modified

CursorSpecifies the mouse cursor to be displayed when pointing over a component. Options are


Code Block
languagecss
titlecursor - pointer
cursor : pointer


Code Block
languagecss
titlecursor - help
cursor : help


Code Block
languagecss
titlecursor - crosshair
cursor : crosshair



Image Modified


Image Modified


Image Modified

Box Sizing

Defines how the width and height of a component are calculated: should they include padding and border, or not.

StyleDescription
content-boxThe width and height properties (and min/max properties) includes only the content. Border and padding are not included. This is the default.
border-boxThe width and height properties (and min/max properties) includes content, padding and border.


Editor_notes

This may be removed in the furture. See FB14723. Regarding boxSizing, it looks like there was some discussion about removing it as an option or otherwise changing how it is applied (on the ticket).





Image ModifiedImage Modified

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.



Code Block
languagecss
titleoverflow - visible
overflow : visible
borderWidth : 3px
borderStyle : solid
borderColor : #FFAC47


Code Block
languagecss
titleoverflow - hidden
overflow : hidden
borderWidth : 3px
borderStyle : solid
borderColor : #FFAC47


Code Block
languagecss
titleoverflow scroll
overflow : scroll
borderWidth : 3px
borderStyle : solid
borderColor : #FFAC47


Image Modified

Image Modified

Image Modified

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.



Code Block
languagecss
titleoverflowX - visible
overflow x : visible


Code Block
languagecss
titleoverflowX - hidden
overflow x : hidden


Image Modified


Image Modified

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.



Code Block
languagecss
titleoverflowY - scroll
overflow y : scroll


Image Modified

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.



Code Block
languagecss
titleoverflowWrap - normal
overflow wrap: normal
borderStyle : solid
borderColor : #000D9
borderWidth : 3px


Code Block
languagecss
titleoverflowWrap - break-word
overflow wrap: break-word
borderStyle : solid
borderColor : #000D9
borderWidth : 3px


Image Modified

Image Modified

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.



Code Block
languagecss
titletextOverflow - clip
textOverflow: clip


Code Block
languagecss
titletextOverflow - ellipsis
textOverflow: ellipsis



Image Modified


Image Modified




Next_link