We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.
Under Description you can enter a short text which will be displayed in Edit mode. This helps to identify the purpose. In Note you can add additional information, it is not displayed anywhere else, however.
In this section you can set the horizontal aspects of your style.
- Line Height: Sets the line height
- Letter Spacing: Influences the spacing between characters
- Word Spacing: Influences the spacing between words
- Font Kerning: This property controls the usage of the kerning information; that is, it controls how letters are spaced
- White Space: The white-space property is used to describe how whitespace inside the element is handled
- Width: Sets the width for the scope. Set to "0%" for "auto" behaviour
- Units: Selects the Width Units
- Text Align: The text-align property describes how inline content like text is aligned in its parent block element
- Text Indent: The text-indent property specifies the amount of indentation (empty space) should be left before lines of text in a block
- Units: Selects the Text Indent Units
- Hyphens: The hyphens property tells the browser how to hyphenate words when line-wrapping
- Pg Break Before: The page-break-before property adjusts page breaks before the current box-element
- Pg Break After: The page-break-after property adjusts page breaks after the current box-element
- Pg Break Inside: The page-break-inside property adjusts page breaks inside the current box-element
Here you can set how words are to be treated.
- Rotation: This setting allows you to rotate your text around 360°. When text is rotated it can be difficult to edit because the location of the input window is sometimes dodgy. The same applies to the alignment of the text. You might want to edit your text before applying this feature.
- Overflow-Wrap (also known as word-wrap): This property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
- Word-Break: This property is used to specify whether to break lines within words.
- Text Transform: This property specifies how to capitalize an element's text (capitalize, uppercase, lowercase).
- Text Decoration: This property sets what kind of line decorations are added to an element (underline, overlain, line-through or all of them).
- Decoration Color: This property defines the color of the lines specified by Text Decoration. It is currently only supported on Firefox, Chrome and Safari.
The List section allows you to customize the properties of list elements.
- List-Style: This property specifies the appearance of a list item element
- List Style Pos.: This property specifies the position of the marker box in the principal block box
The Size section allows you to customize all size related settings of your text. The different font sizes are chosen based on the break-points defined here.
Units: Selects the font size units
Font Size: The font-size property specifies the size of the font (historically the width of the capital "M")
Medium: This setting defines the break-point for medium-sized screens
Large: This setting defines the break-point for large screens
XL: This setting defines the break-point for extra-large screens
Units: Selects the font size units
Font Size: The font-size property specifies the size of the font (historically the width of the capital "M")
Medium: This setting defines the break-point for medium-sized screens
Large: This setting defines the break-point for large screens
XL: This setting defines the break-point for extra-large screens
Here you can set the foreground- and background colour of your text.
Here you can set the opacity of your text. A value of 1 means full opacity and 0 is fully transparent (i.e. invisible).
Here you can define the width and colour of an outline around individual characters. This only makes sense for big headlines.
- Stroke Width: The this property specifies the width of the stroke for text. It is currently not supported by all web-browsers
- Units: Selects the unit for the stroke width
- Stroke Color: The this property specifies the stroke color. If this property is not set, the value of the color property is used. It is currently not supported by all web-browsers.
Here you can define a shadow thrown by your text.
Negative values in the horizontal offset move the shadow to the left.
Negative values in the vertical offset move the shadow upward.
- Horiz. Offset: Sets the shadow offset to the right or left of the text
- Vert. Offset: Sets the shadow offset to the above or below of the text
- Blur Radius: Sets by how much the shadow is blurred
Negative values in the horizontal offset move the shadow to the left.
Negative values in the vertical offset move the shadow upward.
If you have problems with other settings overriding your Style settings, you can force your settings to override everything else. Use this only if nothing else helps and remember, it is on a last-come-first-served basis: if there is a setting which uses the Force after this one, it wins!
Here we can set the scope to which this particular instance of the Style stack should be applied. This can be an HTML element (Page scope), a CSS class or CSS selector. Or all of them combined.
The selected scope(s) are displayed in the stack instance in Edit mode.
The selected scope(s) are displayed in the stack instance in Edit mode.
Page scope:
You can apply this stack to any of the HTML elements shown by clicking on the appropriate icon in any combination you like.
You can apply this stack to any of the HTML elements shown by clicking on the appropriate icon in any combination you like.
CSS Class scope:
Enter the name of a CSS class which you would like to create or override.
Enter the name of a CSS class which you would like to create or override.
CSS Selector scope:
Enter the name of a CSS selector which you want to create or target, e.g. ".myHeader h3".
Enter the name of a CSS selector which you want to create or target, e.g. ".myHeader h3".
Style-Set
Select the desired Style Set from the drop-down. Style-Sets are a convenient way to assign fonts to stacks.
Many of the Platform stacks provide corresponding drop downs to apply style sets in their Extra section.
Other than the Platform stacks, our Columator, PriceThing and Barcode stacks support style sets as well.
The Wrap stack can enable any stack to support style sets!
Select the desired Style Set from the drop-down. Style-Sets are a convenient way to assign fonts to stacks.
Many of the Platform stacks provide corresponding drop downs to apply style sets in their Extra section.
Other than the Platform stacks, our Columator, PriceThing and Barcode stacks support style sets as well.
The Wrap stack can enable any stack to support style sets!
