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

Skip to end of metadata
Go to start of metadata


The following table describes the style user interface and style properties available in Perspective. For an overview on using styles in Perspective, see also Styles and Style Classes.

This feature is new in Ignition version 8.0.8
Click here to check out the other new features

Perspective Style settings were updated with a new user interface in version 8.0.8.  


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.

 Expand for Weight options
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:

 Expand for Line Height options
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.

 Expand for Text Align options
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.

 Expand for White space options
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.

 Expand to see Transform options
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.

 Expand to see Decoration options
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. 

 Expand for Shadow options
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.

 Expand for Overflow wrap options.
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.

 Expand to see Background Clip options
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.

 Expand to see Background Repeat options
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.

 Expand to see Background Attachment options
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


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

This feature is new in Ignition version 8.0.10
Click here to check out the other new features

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.

 Expand for Border Style options


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.

 Expand to view Outline Style options
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.  

 Expand to see Cursor options
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.

 Expand to see Overflow options
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.

 Expand to see Overflow X options
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.

 Expand to see Overflow Y options
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