CSS workflow customization examples

Most design components of a form or a workflow page may be altered by tinkering with the properties and options made available under Theme & Style.

In some instances, it may not have the options you're looking for, like specific colors for the workflow navbar, etc.

The following lists the CSS codes that you may try using in the Custom CSS property of a form or a page. Simply change the color hex codes to what you need:

Changing the font used throughout the workflow and loading Google Fonts

This example shows how to load a font from google fonts and then how to apply that font as the default font in your workflow.

First load the google font of your choice by including it using the Head Includes property of the root Workflow node. 

In the above example, we're loading Monserrat:

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">

Now that the font is loaded and available, edit the Workflows CSS to set it as needed. In the below example we set it as the default body font:

body{
  font-family: 'Montserrat', sans-serif !important;
  font-weight:300;
}

Chaning the Color of the Navbar

.navbar, .navbar-default {
    background-color: #972f85;
    border-color: #972f85;
}
/* nav bar link color */
.navbar-inverse .navbar-nav>li>a{
color:white !important;
}

Changing the Color of the log in Button on the log-in Screen

.login-outerpanel .btn-primary {
    background-color: #000000;
    border-color: #000000;
    color:#FFFFFF   
}

Changing color of the text Heading on the Log in screen

.text-primary {
    color: #c91d2f !important;
}