Style: Make Your App Look Nice

To fit in with your existing design language for your website, edit the Style settings of your app.

You can choose an existing style you defined (recommended, to maintain consistency):

Or, you may choose to Clone and Edit a specific style:

If you choose to Clone and Edit, you will be able to fine tune the Style settings as desired and see a preview of your new style on the right as you develop it.

Name and Description

Choose an appropriate name for your new style and a description as appropriate.

General

This section governs the overall look and feel.

You may choose to remove the background so that when deployed on your website, it takes the background of your web page.

You may choose to show the groups and steps of your app

Design, Padding and Border deal with the general layout

Transition handles the animation from step to step

Colors allow you to select background and text hues

Flow Groups

You may set the group headers to look as bars or as text.

If they are not shown as bars, you may connect the items with a line.

They will use whatever icons you had set in your app.

Controls

In the General section, you will choose colors, look, and shape.

You can set default styles for slider, rating, links, checkboxes and radio buttons, as well as text input.

If you'd like to use tooltips, enable them and set their style.

Preloaders

These are default images or animations, that show up in certain contexts - e.g. during a remote API call, while uploading a file etc.

Your sources will come with a default preloader (typically an image), but you can choose to default to the ones defined in your Style as well.

Back Button

The back button can be enabled for the simplest workflows.

However, since you may be able to create advanced apps, please consider the additional complexity and testing needed if you choose to enable the back button for such apps. In most cases, we discourage its usage.

Submit Button

Your apps will typically have only one submit button per step (but you can add others).

Name it here and make it look nice.

Lastly, you may choose to add this style to your library, reset it to default if you made mistakes, or just save it for the current app.