User Manual Quickstart General Concepts Buyer Side Snippets Engraving Styles and Form Fields Childs Book Pin to Frame Conditional Styles Condition Editor Exchanging images with Styles Flex Designs Sub Documents Scripting Workflows Editing Workflow Production Workflow Tutorial Videos Frame Features Resources Account Portal Style Reference Change Log Known Bugs & Limitations Glossary Acknowledgements Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api

Styles and Form Fields

Wherever one wants to control color, appearance or content via form fields or logic, Styles are a powerful option to use. Basically, every aspect of a Frame can be controlled with Styles. Since one Frame can use several Styles, you can solve pretty complex problems with them.

Another good use for Styles are documents where one would like to change the appearance of several Frames at once. Each Frame can have one or more Styles applied.

Please read more about the Styles Tab and how to create Styles here

A great source of wisdom are also our example documents which make use of Styles to showcase some cool functionality. You can also open them in the editor when creating a new document:

Childs Book - See Styles managing skin & hair color. Also explained below

Avatar - Use of Styles to recolor hair and skin tones in images

Business Card - Use of Styles to reposition elements . . .

Childs Book

Let’s have a look at a child book example, where all the complex personalization options for selectable hair and skin color are built with just a few simple Styles.

Try it yourself here!

Childbook Styles Example

We have switched on Show Styles in the top menu bar Settings menu to present us with small colored badges that show us the various Style names. (See how to switch on style badges)

As one can see, eyebrows and hairdo have the Style ‘hair’ assigned and all skin elements have the Style ‘skin’. (See how Styles are assigned!)

Looking into the Styles tab, we can see that both styles set the fillColor and are connected to a form field.

But in this case it’s pretty easy the style simply sets the fillColor of all skin elements to the color selected in the form field. Let’s have a look at what the form field looks like:

Childbook Skin Form Field

The form field User Interface is set to Image-List, creating a selection of nice color patches from small images. The Value of the form field is simply a color value (could be also one of your pre-existing named color swatches).

So, whenever the Buyer selects one of the available skin colors the applied Style will make sure that everywhere where there are skin portions in the document the skin color changes.

This even works (as long as a Template Style is used) in Sub Documents. In this children’s book, everywhere where the hair is used a Sub Document containing the hair in different Styles is also used.

Lets have a look at this document. It’s a document containing separate pages for each hairstyle. For each page the spreadName has been set to the name of the hairstyle (hair short, hair very short, …).

Hair Style and Color

This is how it looks in the code editor:

.hair {   
 	fillColor: ${form.HairColor}; 
 	spreadName:${form.HairStyle}; 
}

Each hairstyle shape also has the Style ‘hair’ assigned, which in this case will set the fill color for the hair (fillColor: ${form.HairColor};).

Childbook Hair Subdoc

The same Style is also assigned to all places where this ‘Hair’ Sub Document is used in the children’s book (have a look above). In this example, the Style Property spreadName (spreadName: ${form.HairColor};) comes additionally into effect by choosing the right page from the Sub Document to show the selected hairstyle.

In this case the form field to control the Styles spreadName property simply has the names of the pages in its values and looks like this:

Childbook Hair Form Field

Not only can properties like color be controlled via Styles but also content like a text or an image can be changed by a Style. Throughout this document the name of the child is also populated through a Style.

Childbook Hair Subdoc

Because we use a Style to set the text for each Frame with the Style ‘name’ assigned, the input field for the text is also disabled and the name of the Style which controls it is displayed above.

Adding the ‘Pajama’ Style and form field, which pretty much works the same as the skin color, we get an easy to use user interface and a simple to maintain yet feature rich personalizable document.

Pin to Frame

A nice use of form fields in conjunction with styles are Pinned Form Fields. Let’s create an example where we control the colorization of an image frame by a form field which only appears once the buyer clicks on the image.

Start by creating an image frame with any image. use sepia (100) to colorize it monochromatic. Next create yourself a Document form field named ‘HueRotate’ and set it to a number value list. Make sure you create a Document type Form Field as Template Form Fields don’t have this option. Now enter the small value list and the corresponding labels by selecting the small + on top left of the table.

Hue Rotate Form Field

Now we will connect it to the Frame, by selecting the image frame and then selecting Pin to Frame in the Form Fields context menu:

Pin to Form Field

A small pin will appear on top of the form field to indicate that it’s pinned to a frame.

Pin to Form Field

If you like you can test drive that the form filed only appears when the image frame is selected by switching to the buyer side.

Next, we will connect the form field and the image frame by using a style. Open the styles tab and create yourself a simple document style as follows:

Pin to Form Field

This will now change the color angle of the image based on the user’s selection in the drop down. Now go to the buyer side to proudly test your creation.

Hue Rotate Form Field

If more than just the Hue Rotate is necessary to reach the desired recoloring its also possible to control several image manipulation properties at once. There is even a convenient Create Style function integrated into the image parameter dialogue. This is especially useful if you’d like to create diffrent hair colors for avatars.

Hue Rotate Form Field

Once the image has the desired coloring use the Create Style Button and enter a style Name. In this case we have chosen ‘imageColor’. Then you can go on and create all your selectable color changes and for each create a equally named style.

Hue Rotate Form Field

After this one of the styles must get the default style and into all others a if condition needs to be added which reacts on the label or value of the form field like shown below.

Hue Rotate Form Field

Here is the code if you’d like to copy it to the code editor.

.imageColor {
	if: ${label.HueRotate === "Green"};
   brightness: -17;
   contrast: 24;
   saturate: 87;
   sepia: 0;
   hueRotate: 100;
}
.imageColor {
	if: ${label.HueRotate === "Red"};
   brightness: -17;
   contrast: 24;
   saturate: 87;
   sepia: 0;
   hueRotate: 315;
}

Conditional Styles

Conditional Styles are useful in cases where one would like to create Styles which only come into effect at the moment a condition is met.

A Conditional Style contains a condition which will activate the style.

A good example for conditional Styles is switching Frame positions and sizes based on document formats where a Flex Design is pushed to its limits, such as changing between landscape and portrait formats.

Let us have a look into the Calendar Grid Style Demo document. It has two different aspect ratios controlled by a DOCUMENT_SIZE form field. (Learn more about changing document size with form fields.)

DOCUMENT_SIZE Form Field

Now we create Conditional Styles which control the position and size of the main image in the calendar. As one can see, we used only percentage values which will keep the document size flexible even as we change dimensions.

Doc Size Style

Here is the code if you’d like to copy it to the code editor.

.inside-image { 
  	if: ${info.DOCUMENT_SIZE === "A4"};  
	left: 0%; 
 	width: 100%; 
 	top: 0%; 
 	height:50% 
} 
 
.inside-image {  
 	if: ${info.DOCUMENT_SIZE === "DESK"};  
  	left: 0%;  
  	width: 50%;  
  	top: 0%;  
  	height:100%  
} 

This is how the calendar looks if the DOCUMENT_SIZE form field is switched to A4:

Calendar A4

And this is how it looks when switched to DESK:

Calendar DESK

Another use case of Conditional Styles is switching visibility of certain Frames in a document. In the Style example below, the ‘hide’ Style is assigned a Frame that will only be visible if the form field ‘hide’ is set to ‘Show’.

Hide Style

.hide { 
 	visible: ${form.hide === "Show"}; 
}

With the same method one could control drop shadows, effects, and essentially every other aspect of a Frame. To discover more examples, we strongly recommend to use the Style Wizard which will create Frames, Styles, and their corresponding Form Fields. Our Style Wizard is a great way to have fun learning about the superpowers of styles.
(Start using the Style Wizard)

Additionally, we recommend exploring the available Style properties in the comprehensive Style Reference Manual. (Overview on all available Style properties)

Condition Editor

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

Please read about the condition editor in the styles chapter

The editor will automatically show the start editor icon: start condition editor beside an if condition in a style.

start condition editor

Exchanging images with Styles

Quite often one needs to change images based on Form Field values. This can be achieved by using styles.

In this example we simply want to react on a simple select-list form field for image selection.

Form Selct Image

We can simply pair this with a conditional style which simply points to the right (previously uploaded) image based on the form field value.

Form Selct Image

.changingImage {
		image:Printess.jpg;
}
.changingImage {
	if:${form.selectImage === "Frog"}
	image: frog.png;;
}

When this Style is applied to a frame containing an image feature it will change the image when the Form Field changes its value.

Change Image Apply Style

Pro Tip: You can also directly apply an image by using the image itself in an image-list form field and address it directly in the style. The Image then also automatically is used for the user interface to provide a visual selection.

Form Select Image

This is the corresponding style. In this case no Conditional Style is required note that the image is directly addressed with image.selectImage.

Form Select Image Style

.changingImage {
		image:${image.selectImage}
}

The same can be achieved by adding the image name directly to the form field in our example add Printess.jpg and frog.png to the form field value column. The corresponding style should look like this:

Form Select Image Style

.changingImage {
		image:${form.selectImage}

Same counts for the info column where the style would look like this:

Form Select Image Style

.changingImage {
		image:${info.selectImage}
}