Workflow Themes

Jenny Fung

February 16, 2017 17:16

Within the Workflow Designer, click the Theme & Style button in the top right corner of the window to open the Workflow Theme Settings window.

Workflow Themes

Workflow themes are based on the BootStrap framework. Click on a theme thumbnail to apply that theme. Each theme defines, button colors, background colors, text sizes' and more. All of the Bootstrap themes are mobile responsive.

Pro Tip:
The theme styles shown in the Workflow Theme settings window have corresponding themes in the Form Designers Theme & Style Editor. When using forms and workflows together, select the same theme for a unified look and feel.

Deprecated Themes

We strongly recommend all users to use the Bootstrap based themes and not the themes found in the deprecated themes menu. These themes have been left as an option for backward compatibility. A lot of the functionality available on the Bootstrap themes is not available on the older style themes and moving forward no new features are being added to the deprecated themes.

Workflow Theme Settings

After selecting a theme, click the Settings icon in the top right of the window to toggle to the settings panel. Here you can configure some of the theme style settings.

Navbar Settings
Fixed	When set to true, the top navigation bar will remain on screen even when the user scrolls down.
Inverse	All themes have a standard and inverse mode. Change this setting to see the inverse theme style.
Margin Bottom	Define the margin below the navbar.
Background Color	This setting will override the theme's navbar background color. This setting is not recommended since the theme also defines many complimentary colors and simply changing the navbars background-color may not result in an aesthetically pleasing result.
Link-Font-Color	Change the navbar link color. After adjusting the background color of the navbar, it may also be necessary to adjust this color.
Hover-Font-Color	Change the navbar link hover color. After adjusting the background color of the navbar, it may also be necessary to adjust this color.
Text-Shadow	Change the navbar link text-shadow color. After adjusting the background color of the navbar, it may also be necessary to adjust this color.

Page Heading
Font Size	Page Heading font size
Line Height	Page Heading line height
color	Page Heading font color

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.