on the toolbar row, or select the Wizard button 
from the Styles tab to open the Style Wizard.One of the most powerful features of Printess are Styles.
Styles can be used to control the appearance of all elements. Styles themselves can be controlled by Form Fields, conditions, and data. This makes them ideal for creating highly variable and versatile documents.
Printess now uses a no-code way to work with Styles!
Let’s have a brief look at an example of creating a Style that controls the presence of a drop-shadow via a Form Field. We use the Style Wizard (described further below in this chapter) to create this example style. Press the Style Wizard button on the toolbar row, or select the Wizard button from the Styles tab to open the Style Wizard.
Tip: To create a new empty Style with a name prompt, simply press the
button on the toolbar row next to the Style Wizard icon, or select
from the Styles tab.
Then select Drop Shadow Effect - Controlled via Form Field and press OK to create the Style.
Once created, the Style will show up in the Template. Here it is easy to change any property of the Style by entering values or properties with predefined selectable values in drop-downs. Styles can be collapsed or un-collapsed by clicking the small triangle to the left of the Style’s name.
Using the sign on the bottom of a Style adds a new property to the Style.
This opens the property selector which allows you to add all available Style properties sorted by frame type. Note that the text properties for a Multi Line text frame are located under Paragraph- and Character-Style.
To delete a property in a Style or switch it to be directly controlled by a Form Field, simply select the property and open the drop-down with the triangle to the left:
When using the Style editor, you can switch to the code representation of the Styles by clicking on the mode button 
in the top right corner of the Styles tab.
This will show all of the generated code:
Although all of the examples can be built completely within the Style editor, we will also show their code representations in this manual. Mainly because the code view provides an easy way to copy and paste one or multiple Styles from the manual or between documents. The code view also allows for an easy way to change the order in which styles appear in the Editor.
However, in the normal course of operation we recommend using the normal Style view as you don’t have to deal with rigid syntax and can simply add and edit the properties you’d like to control.
If you are interested please read more about the coded Style syntax at the end of this chapter.
Before going into the deep end, we recommend reading the general chapter about Styles and their best friends, Form Fields.
There are two different types of Styles:
Template Styles - are globally usable across all documents within a Template.
Document Styles - are local and only usable in the current document. For Snippets or documents which will be used as Sub Documents in Snippets, Styles must only be added as a Document Style.
Use the top tab to switch between Template and Document Styles. Document Styles will have the name of the current document in square brackets [DocumentName].
You can assign a Style to a frame directly from the Style tab by selecting the target frame, then clicking the gear icon 
and selecting Assign to Frame. You can also remove all Styles assigned to a frame with Remove from Frame. Note that assigning a new Style to a frame will remove any previously assigned Styles.
In rare cases you may wish to assign multiple Styles to a frame. To do this you need to use the Style Selector in the Position 
tab to choose and add whatever Styles you want applied to the frame.
x Will remove a selected style.
Tip: Conflicting Styles Behavior
If you select multiple Styles containing the same properties (e.g., color) - the Style which appears last in the Style tab will determine the property independent from the order in which the styles are mentioned in the frame’s Style Selector.
Notice: Document Styles will take precedence over Template Styles.
The Style Wizard is a great way to create Styles in conjunction with Form Fields, while simultaneously learning a lot about how Styles are used to create great user experiences.
Press the Style Wizard button on the toolbar or inside of the Style tab to open the Style Wizard. From here, just select an example to insert and enter names for the respective Style and Form Field that the Style Wizard will create.
Once created you can apply the Style to another compatible frame by simply selecting the frame and adding the Style to the frame with the Style Selector drop-down menu in the Position tab:
Styles can be made conditional. Read more about conditional styles here!
If a series of Styles are using the same Form Field to activate it, the Printess Editor automatically recognizes this and displays a little button on the top to set the Form Field value so that the selected conditional Style is active.
This allows you to work faster as you don’t need to switch between the Form Field and Style tabs all the time while testing and adjusting. Check out our Avatar T-shirt example to see a bunch of conditional Styles in action.
Special kinds of Styles are the character, paragraph, and base Styles of a frame. Paragraph Styles may contain all paragraph properties (e.g., indents, alignments, and paragraph distances) plus all character properties like font size, font color, etc. Character Styles can only use character properties such as font size and tracking.
Both Styles can either be applied to the frame (by using the Style selector from above) or selected within the Multi Line Text Editor in the Text tab. Styles can also be comfortably created within the Multi Line Text Editor.
Learn more about Multi Line text frame features here!
Both usages have different outcomes. If you apply a Style within the Multi Line Text Editor (paragraph or character Style Selector), the properties which are set in the Style tab will disable the respective UI elements and you cannot overwrite the properties.
If you set the Style for the complete frame, it will form the new base style of the text (resetting all styles will also revert to this style). Properties can be overwritten in Designer & Buyer Side UI.
This can be achieved by selecting the base Style in the Text tab while not being in the Editor:
Another convenient option if no Style has been created is to format the text as you want the base Style of the frame to be (for a minimum of one paragraph) and while the I-beam pointer is in the paragraph press the Add Paragraph Style button:
A popup will appear asking for the name of the Style, which you must enter and select Set as base style for selected frame. This will create a new Style and assign it to the current Multi Line Text Frame as its base Style.
A special paragraph Style that cannot be addressed via the UI elsewhere are the tabulator settings.
Start by creating a new paragraph Style with tabulator settings included:
This will create a Style where all tabulator-related properties are included. Alternatively, you can add them manually to a Style by adding from the paragraph Style properties.
fontSize - this controls the standard font size of the paragraph Style.
fontColor - controls the color of the paragraph text.
tabSize - this controls the standard tab size when no specific tab is defined. Values can be either % of the character height or absolute values (e.g., pt, px).
tabs - here you can define specific tab steps and types. The first parameter is the position of the tab followed by its type. Tabs can either left-, right-, or center-align a word. They can also align to a certain character in the word - a so-called decimal tab - here the choice is between , or . or -. Additionally, you can enable a line between the last position before the tab and the tab position.
The 
removes a tab position and the adds another position.
tabLineColor - controls the color of an activated tab line.
tabLineType - controls the type of the line where you have the choice between solid, dotted, and several dashed line types.
tabLineHeight - controls the height of the line. Can be expressed in absolute values (pt, px, etc.) or as % of the character height.
Here is the same Style expressed in code:
.Tabulator {
fontSize: 24pt;
fontColor: [Black];
tabSize: 150%;
tabs: L1cm C_3cm R5cm .7cm;
tabLineColor: [Black];
tabLineType: dotted;
tabLineHeight: 1pt;
}
Another special paragraph Style that cannot be addressed via the UI are the ruleAbove and ruleBelow Styles. Either use Add rules above and below in the Create New Paragraph Style dialog or manually add the following properties to a style from the paragraph Styles properties.
ruleAbovexxx properties control a line above the paragraph and ruleBelowxxx properties control the line below a paragraph.
ruleBelowWidth, ruleAboveWidth - can be set to frame which will create a line in the width of the frame, or text which will create a line the width of the text.
ruleBelowColor, ruleAboveColor - defines the color of the line.
ruleBelowOffset, ruleAboveOffset - defines the offset of the line to the baseline of the text. Positive offsets will move the below line downwards and the above line upwards.
ruleBelowHeight, ruleAboveHeight - defines the thickness of the line.
ruleBelowLineType, ruleAboveLineType - this property sets the line type. By default, it is solid which will show a solid line. dotted will create a line from dots, dashed1 - dashed6 will create a dashed line with different distances between the segments.
The above Style will create the following output when it is assigned to the first paragraph.
Here is the same Style expressed in code:
.headlineWithRuleBelow {
font:Noto Sans;
fontSize: 24pt;
fontColor: [Black];
spaceAfterParagraph:15pt;
ruleBelowWidth: frame;
ruleBelowColor: Pink;
ruleBelowOffset: 2pt;
ruleBelowHeight:2pt;
ruleBelowLineType:solid;
}
The Condition Editor is a great way to build conditional Styles.
Please also read about conditional Styles here.
To add a condition to a Style press the icon at the bottom of the style and select Add Condition.
Once added it will have the start editor icon: 
beside the condition in a Style.
With the Condition Editor you can easily combine AND and OR conditions for all the tests you do.
An AND condition means two tests must be true to let the whole condition be true.
An OR condition means one of the tests must be true to let the whole condition be true.
Here is an example of a conditional Style which exchanges an image only when the Form Field ‘hairstyle’ is set to ponytail AND the Form Field ‘glasses’ is not set to glasses OR the Form Field ‘haircolor’ is not set to Blonde.
Below is this example condition represented in the Condition Editor:
A big plus with the Condition Editor is that all defined values from a selected list are directly shown in drop-downs.
This is how the condition looks in the Code Editor:
The Condition Editor is also used for conditionally visible Form Fields.
In addition to Form Field values, you can also use the following special values to test for:
doc.name - this contains the name of the currently shown document.
doc.mode - this is ‘display’ when the document is configured or ‘production’ when the document is rendered as an output file.
doc.device - is ‘desktop’ if the current device is any desktop browser (or during production) and ‘mobile’ when a document is configured on a mobile device.
The Style Code Editor helps you to edit styles as code with syntax highlighting, auto-completion, and error messages.
While typing, auto-completion will start to automatically display and filter options from items contained inside of your current code.
To select an item from the list simply click on it or move up and down through the list with Cursor Up or Cursor Down and Return for inserting.
If an error is detected, an error message will appear at the bottom of the Editor tab.
For convenience, any colors used in a Style will create a small color patch to the left of the line where the color is mentioned.
If you are using the Code Editor to define Styles there is a certain CSS-like syntax you have to comply with. A Style is a collection of different properties and has a clear syntax:
.stylename {
propertyName:value;
secondProperty:value;
}
Note that a Style always starts with a . directly followed by the name of the Style. Then comes the Style’s properties which are enclosed in two curly brackets {}. The properties are used to control nearly every aspect of a frame or its content (e.g., fillColor, textColor, strokeWidth, etc.).
Here is the comprehensive cheat sheet of all the stylable properties of frames!
Each property is set with its respective propertyName followed by a :. Then you input a value, followed by a semicolon ;.