Types

These are the various property and data types used by the Style mod. For detailed information on where to use them, see: [style API](style API), [image API](image API) and [sound API](sound API).

Alignment

Sets text alignment within an element.

There are three possible values, with obvious effect:

• left (default)
• center
• right

The element size must be defined - either by the elements' own stylesheet (using size property), or a parent flow or frame stylesheet (using autoSize property).

style.button 'right-aligned' {
  align = 'right';
  size  = {200,30};
}

AutoSize

Determines how child elements are sized on a flow. It is passed through style.expand, so it can accept shorthand notations.

autoSize = { <width>, <height> } -- booleans

The <width> setting tells a vertical flow to make all it's children use the full width of the flow, which is defined by the widest element in that flow. However, if you set the flow size, minSize or maxSize, it stops working - probably a bug in the Factorio graphics library.

The <height> setting behaves similarly, but for height.

style.flow 'manual-sizing' {
  autoSize = false; -- equivalent to: autoSize = {false,false}
}

style.flow 'auto-width-only' {
  autoSize = {true,false};
}

style.flow 'auto-height-only' {
  autoSize = {false,true};
}

style.flow 'auto-width-and-height' {
  autoSize = true; -- equivalent to: autoSize = {true,true}
}

BlendMode

Specific to image.animation, defines the mode in which animation frames are rendered to the screen:

• nil - use default, presumed to be 'normal'
• 'additive'
• 'additive-soft'
• 'normal'

Note yet sure what effect these have, or even if that's a full list of possible modes.

Boolean

A simple boolean true or false value.

style.flow 'my-flow' {
  visible = false; -- hide flows that use this style
}

Border

Defines the width of the top, right, bottom and left border of a monolith image (in practice, this seems to have no effect whatsoever on the image or element). It is passed through style.expand, so it can accept shorthand notations.

For example, to remove border from an image:

local noBorder = image.monolith 'someImage.png' { border = 0 }
-- equivalent to: border = {0,0,0,0}

If you specify top and right values, the bottom and left values will default to top and right.

local mirroredBorder = image.monolith 'someImage.png' { border = {1,2} }
-- equivalent to: border = {1,2,1,2}

Color

Defines a color, the following formats are allowed:

• Factorio-style Color table: {r=r,g=g,b=b,a=a} v0.0.1+
• Shortform table: {r,g,b,a} (numerically indexed) v0.0.6+
• Hex string, with or without the # prefix, in one of the following formats: v0.0.6+
  • 'rrggbbaa'
  • 'rrggbb'
  • 'rgba'
  • 'rgb'
  • 'ww' -- greyscale
  • 'w' -- greyscale

For easier maintenance, it's a good idea to define colors separately at the top of your script so that they can be referenced by name in the remainder of your script.

local red_text = '#F00' -- equivalent to: red_text = {r=1}

style.label 'red-text' { color = red_text }

Image

See [image API](image API).

Number

Usually an integer number (unless specified otherwise).

Padding

Defines the top, right, bottom and left padding of an element. It is passed through style.expand, so it can accept shorthand notations.

For example, to remove padding from a frame title:

style.frame 'unpadded-title' {
  title = { padding = 0 } -- equivalent to: padding = {0,0,0,0}
}

If you specify top and right values, the bottom and left values will default to top and right.

style.frame 'padded-title' {
  title = { padding = {2,4} } -- equivalent to: padding = {2,4,2,4}
}

Priority

Priority to use for an image:

• 'extra-high-no-scale' - should be used for all GUI element images
• 'extra-high'
• 'high'
• 'medium'
• 'low'
• 'very-low'

It's not clear what the values mean, despite being discussed multiple times in the forums.

Prototype

The name of an existing style prototype, usually for a specific type of prototype.

For example, the inherit property should always point to a prototype that's the same type as the style being defined (if you're defining a label_style, it can only inherit from another label_style prototype).

style.label 'my-first-label' { .... }

style.label 'my-second-label' {
  inherit = 'my-first-label';
}

Another example is font properties - if set, they must point to a font prototype.

style.button 'my-button' {
  font = 'default'; -- the default font
}

Size

Defines width and height. It is passed through style.expand, so it can accept shorthand notations.

Note: If you specify a fixed size property in your style, the minSize and maxSize properties of that style are ignored.

style.frame 'my-frame' {
  size = 50; -- equivalent to {50,50} (width and height both 50px)
}

style.frame 'wide-frame' {
  size = {200,50} -- 200px wide, 50px high
}

Spacing

Defines spacing between elements in a flow or, when used in a scrollbar property it defines spacing of scrollbars. It is passed through style.expand, so it can accept shorthand notations.

style.flow 'spaced-flow' {
  spacing = 4; -- equivalent to: {4,4}
               -- (4px horizontal spacing, 4px vertical spacing)
}

style.flow 'alt-spaced-flow' {
  spacing = {2,4} -- 2px horizontal spacing, 4px vertical spacing
}

Sound

See [sound API](sound API).