User Manual Quickstart General Concepts Frame Features Resources Pages Layers Snippets Images Fonts Colors Styles Template & Document Styles Assigning Styles Styles and Multi Line Text Style Wizard Style Editor Condition Editor Form Fields Account Portal Style Reference Change Log Known Bugs & Limitations Glossary Acknowledgements Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api


Styles Overview

Probably one of the most powerful features of Printess is Styles.
Styles are the low code option within Printess, that can be used to control the appearance of all elements. Styles themselves can be controlled by form fields, conditions and data. That makes them ideal for creating highly variable documents. Printess styles are written in a CSS-ish language so web designers should feel at home, and all others do not need to worry, as it is a powerful feature that is very easy to use. We also provide a lot of examples one can start from.

A Style is a collection of different properties and has a clear Syntax:

.stylename {

Note that a Style always starts with a ‘.’ directly followed by the name of the style which must be unique. This is followed by the Styles properties which are enclosed in two curly brackets {}. The properties can be nearly any aspect of a Frame and even its content (e.g. fillColor, textColor, strokeWidth, …).

Each property needs to be set by propertyName followed by a ‘:’ the comes the value and at the end after the value must be a semicolon ‘;’.

Here is the comprehensive cheat sheet of all the stylable properties of frames!

We also recommend reading the general chapter about Styles and their best friends, Form Fields, before going into the deep end.

Template & Document Styles

There are two different types of Styles:

Template Styles they are globally usable across all documents.
Document Styles are local and only usable in the current document. Especially for Snippets or documents which will be used as Sub Documents in Snippets, all styles must be added to the Document Styles only.

Use the tab on the top to switch between Template and Document Styles. Document Styles will have the name of the current document in square brackets [DocumentName].

Assigning Styles

A frame can have one or multiple styles assigned to it, which can control nearly every aspect of frame properties.

Style Selector

Use the Style Selector in the Position tab to choose and add a style that will be applied to the frame. x Will remove a selected style.

Styles Overwrite Behavior
If one selects 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 style selector of the frame. Also Document Styles will win over Template Styles.

Styles and Multi Line Text

Two special kinds of styles are the Character and Paragraph Styles of a frame. Paragraph Styles may contain all paragraph properties such as 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 they can be selected within the Multi Line Text Editor in the Text tab. They can also comfortably be created there.

Learn more about Multi Line text frame features here!

Select Style

Both usages have different outcomes. If one applies the style within in 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 (one cannot overwrite the properties).

If one sets the style for the complete frame, they will form the new base style of the text (Resetting all styles will also revert to this style). Properties can therefore still be overwritten in Designer & Buyer Side UI.

Warning: Use a Style to define the Base Style of the Frame which should get used for Rich Text Editing. Otherwise once the Buyer deletes all content there is no Text Style left and the Frame will return to the default Base Style (Noto Sans, 12pt, black).

This can be achieved by either selecting the Base Sytle in the Text Tab while not! being in the editor:

Select Base Style

Another covinience option if no Style have been created already is to format the text like the Base Style of the Frame should be (for in minimum one Paragraph) and while the cursor is in this Paragraph press the Add Paragraph Style button.

Select Base Style

A popup will appear which will ask for the name of the Style and must 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 a Base Style.

Select Base Style

Rule Above, Rule Below

A special Paragraph Style which cannot get addressed via the UI is the ruleAbove and ruleBelow.

This will create a line below the or above the text.

ruleBelowWidth, ruleAboveWidth can be set to either frame which will create a line in the width of the Frame or text which will create a line in the width of the text.

ruleBelowColor, ruleAboveColor defines the color of the line.

ruleBelowOffset, ruleAboveOffset defines the offset the line should have 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 set 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.

.headlineWithRuleBelow { 
 	font:Noto Sans; 
 	fontSize: 24pt; 
 	fontColor: [Black]; 
 	ruleBelowWidth: frame; 
 	ruleBelowColor: Pink; 
 	ruleBelowOffset: 2pt; 

The above Style will create the following output when the Style is assigned to the first paragraph.

Select Style

Style Wizard

The Style Wizard is a great way to create styles in conjunction with form fields and learn a lot about how styles can be used to create great user experiences.

Style Wizard

Press the Add Style button Add Style Button on top to open the Style Wizard. From there, one can select an example to insert and enter a name for the style before it is created. The only thing left to do is create a feasible frame and add the style in the Style Selector in the Position tab.

Style Editor

The Style Editor helps you to create styles 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.

Auto Completion

To select an item from the list simply click on it or move up and down the list with Cursor Up or Cursor Down and finally Return for inserting.

If an error is detected, an error message will appear at the bottom of the Editor tab.

For convenience, colors used in styles will create a small color patch to the left of the line where the color is mentioned.

Condition Editor

The condition editor is a great help to build conditional styles.

Please also read about conditional styles here

With the editor you can easily combine AND and OR conditions for all the tests you do. A AND condition means two tests must be true to let the whole condition be true.
A OR condition means one of the tests must be true to let the whole condition be true.

The editor will automatically show the start editor icon: start condition editor beside an if condition in a style. To start a new condition one can simply type if:$ in the first line of a style and an editor icon will appear beside it - click on it and define your new condition.

Here is an example of a conditional style which exchanges an image only in case the form fileld hairstyle is set to ponytail and the form field glasses is not set to glasses or the haircolor form field is not set to Blonde:

This is this example condition represented by the editor:

start condition editor

A big plus in the editor is that all defined values from a select list are directly shown in drop downs and those pesky syntax errors are a thing from the past.

And this is how the condition then looks in the Style editor:

start condition editor

The same Editor is also usable for conditionaly visible form fields.