Style Reference

Text Menu

Property Name

Description

Example

Output

Font Family

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

fontFamily: Monospace

Size

Specifies 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

Style	Description
normal	Defines normal characters. This is the default.
bold	Defines thick characters.
lighter	Defines lighter characters.
bolder	Defines thicker characters.
100-900	Defines 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

Style	Description
normal	A normal line height. This is the default.
number	A number that will be multiplied with the current font-size to set the line height.
length	A fixed line height in px, pt, cm, etc.
percentage	A line height in percent of the current font size.

lineHeight: normal

lineHeight: 32px

Letter Spacing

Increases or decreases the space between characters. The default is 0.

letterSpacing: 12px

Word Spacing

Increases 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

Style	Description
start	Aligns text to the left.
end	Aligns text to the right.
left	Align text to the left.
right	Aligns text to the right.
center	Centers the text.
justify	Stretches the text so the text has equal width on each side.
justify-all	Stretches the text so the text has equal width on each side.

textAlign : right

textAlign: center

textAlign: justify

Text Indent

The 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

Style	Description
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is the default.
nowrap	Sequences 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.
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.
pre-wrap	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-line	Whitespace 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

Icon	Style	Decoration
	capitalize	Transforms the first character of each word to uppercase.
	uppercase	Transforms all characters to uppercase.
	lowercase	Transforms all characters to lowercase.

textTransform: uppercase

Decoration

Text decoration setting.

Expand to see Decoration options

Icon	Style	Decoration
	underline	Horizontal line under text.
	line-through	Horizontal line through text.
	overline	Horizontal 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

Style	Description
Color	Color for the shadow. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.
x-offset	Offset distance on x axis, in pixels
y-offset	Offset distance on y axis, in pixels
blur-radius	The 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.

Style	Description
normal	Breaks 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-word	Words 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 (...).

Style	Description
clip	The text is clipped and not accessible. This is the default.
ellipsis	Render an ellipsis ("...") to represent the clipped text.

textOverflow: clip

textOverflow: ellipsis

Background Menu

Property Name

Description

Example

Output

Background Color

Sets 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

Style	Description
border-box	Default value. The background extends behind the border.
padding-box	The background extends to the inside edge of the border.
content-box	The 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

Style	Description
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default.
repeat x	The background image is repeated only horizontally.
repeat y	The background image is repeated only vertically.
no-repeat	The 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

Style	Description
scroll	The background image will scroll with the page. This is the default.
fixed	The background image will not scroll with the page.
local	The 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 Shadow

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

boxShadow: 5px 10px #D3D3D3

Margin and Padding Menu

Property Name	Description	Example	Output
Padding Top/Left/Bottom/Right	Padding 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 Name

Description

Example

Output

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

Style	Description
none	Specifies no border. This is default.
solid	Specifies a solid border.
dashed	Specifies a dashed border.
dotted	Specifies a dotted border.
double	Specifies a double border.
groove	Specifies a 3D grooved border. The effect depends on the border-color value.
ridge	Specifies a 3D ridged border. The effect depends on the border-color value.
inset	Specifies a 3D inset border. The effect depends on the border-color value.
outset	Specifies a 3D outset border. The effect depends on the border-color value.
hidden	The 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 Radius

Defines 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/Right

Sets 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

Style	Description
none	Specifies no outline. This is default.
solid	Specifies a solid outline.
dashed	Specifies a dashed outline.
dotted	Specifies a dotted outline.
double	Specifies a double outliner.
groove	Specifies a 3D grooved outline. The effect depends on the outline-color value.
ridge	Specifies a 3D ridged outline. The effect depends on the outline-color value.
inset	Specifies a 3D inset outline. The effect depends on the outline-color value.
outset	Specifies a 3D outset outline. The effect depends on the outline-color value.
hidden	Specifies 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 Name	Description
Fill	Sets a color for the fill of an SVG shape.
Stroke	Sets 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 width	Sets the width of the stroke, in pixels.

Misc Menu

Property Name

Description

Example

Output

Opacity

Describes 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

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.

Icon	Name
(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

Style	Description
visible	The overflow renders outside the component's box. It is not clipped. This is the default.
hidden	The overflow is clipped, and the rest of the content will be invisible.
scroll	The overflow is clipped, but a scrollbar is added to see the rest of the content.
auto	If 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

Style	Description
visible	The content is not clipped, and will be rendered outside the left and right edges. This is the default.
hidden	The content is clipped. No scrolling mechanism is provided.
scroll	The content is clipped and a scrolling mechanism is provided.
auto	Will 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

Style	Description
visible	The content is not clipped, and will be rendered outside the content box. This is the default.
hidden	The content is clipped. No scrolling mechanism is provided.
scroll	The content is clipped and a scrolling mechanism is provided.
auto	Will cause a scrolling mechanism to be provided for overflowing boxes.

overflow y: scroll

OTHER USER MANUAL VERSIONS

GETTING STARTED

OTHER EDITIONS

LAUNCHERS

MODULES

PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

PARTNER LINKS

RESOURCES

OTHER USER MANUALS

Offline Ignition Manual

Employees

Text Menu

Alignment

Text Options

Background Menu

Advanced

Margin and Padding Menu

Border Menu

Shape Menu

Misc Menu