Live Forms v5.3 is no longer supported. Click here for information about upgrading to our latest GA Release.
Layouts and Styles
Let's say you want to change the background color of your forms/flows so they will blend in nicely with your existing Web site. You can choose one of the provided global styles or create a new custom style. Once you created a custom style you can use it in as many forms/flows as you like.
Layouts
Nouveau - takes advantage of newer browsers supporting modern CSS and is extremely well-suited to forms/flows running on mobile devices.
Compact - This is very similar to the Nouveau layout except for the reduction of vertical space between controls.
Tight - Vertical and horizontal space is dramatically reduced - - controls will be positioned up against each other.
New Applications default to Nouveau and forms/flows created in an application will inherit the Nouveau layout.
This image shows a panel in an Expense Report form that has the Nouveau layout selected. Notice the vertical and horizontal spacing between the controls:
Here is the same panel when the Compact layout is selected for the form. The vertical spacing between the controls has been removed.
Lastly, this image shows the same panel when the Tight layout is selected for the form. Notice the changes in the vertical and horizontal spacing and the rounded input control corners are replaced by square corners.
New layouts can only be added by frevvo.
Styles
Styles are used to select a particular look & feel for your application, forms or flows. The Style feature is primarily concerned with colors (background and font colors) but there is also the opportunity to specify other properties such as the font name, etc.
There are three levels of Styles in
Global Styles - can only be created by frevvo. They cannot be removed/edited by anyone including the
superuser. Global Styles are available to all tenants and users. You will not see the global styles on the Styles tab but they will show in the Style dropdown as choices.Tenant Styles - created/modified/uploaded by the initial tenant admin ONLY. This is the the admin user that was created when the tenant was created. Tenant level styles are available to all users in the tenant.
User Styles - created/modified/uploaded by the designer user. They are only available to that user.
The Styles tab is divided into two sections: My Styles and Tenant Styles. Global Styles are not listed here. Styles created/modified/uploaded by the designer user will be listed in the My Styles section. Styles created/modified/uploaded by the initial tenant admin will show in the Tenant Styles section. Styles created/uploaded by additional admins in a tenant will not display here.
Styles are not included in the zipfile when you download a form, flow or application. Styles must be manually moved from your test/development server to your production environment. You do this by clicking the Download button for each style you want to move from your test/development server and then clicking the Upload button in the styles tab on your production server. Remember to upload the style at the same level on your production server as you had on your test/development server.
Global Styles
The four GLobal Styles are: Blue, Neutral, Green, Aqua. You can use them for your forms, flows and spaces but you cannot download or modify them in any way.
Creating Styles
The tenant admin or any designer user can create a new Style.
Follow these steps to create a new Style.
If you are logged in as a tenant admin you must first click the Home link in order to see the Styles Tab.
Click on the Styles Tab.
Click the
New icon. The Update Styles screen will display. Notice that most of the fields have
Help icons. Click these to get more information about the color property. Also notice the background of each property field displays the assigned value:
Enter a name and description in the appropriate fields.
The base color defaults to #84baee - the hex value for the color blue. You can replace this value but it MUST be with a hex color value. If you do not supply the #,
will add it for you. Lighter/darker colors are calculated from this color. If you change the base color, they will automatically be recalculated when you tab out of the field or when you click the Recalculate from base button. This color is used for anything that's clickable in your form e.g. print, help, date picker, uploads, flow navigation icons, button gradients etc.
The colors for most of the categories are generated from the base color. Some colors have defaults instead. You can change any color you want provided you supply the hex color value. Here is a list of the properties, the default colors and where in your form the assigned color will display:
Style Property | Default Value | Description |
|
|---|---|---|---|
Style Name | MyStyle | Name of your Style |
|
Description | My customized colors and fonts | Description of your Style |
|
Base Color | #84baee | Lighter/darker colors are calculated from this color. If you change the base color, they will automatically be recalculated when you tab out of the field. This color is used for anything that's clickable in your form e.g. print, help, date picker, uploads, flow navigation icons, audit trail icon, button gradients etc. |
|
Background | #ffffff | Form Background Color. Background color of a space. |
|
Font | Lucida Grande | Change the form/flow font. Be aware that changing the default font can have side effects like disturbing precise control alignment. Please check your forms/flows carefully if you change the font. Leave blank to use the default font. When you click on the field, you will see a dropdown which will display a list of the default fonts: Arial, Geneva, Helvetica, Lucida Grande, Monaco, sans-serif, Tahoma, Times, Verdana |
|
Label Font Color | #333333 | Color of Control Labels. If you specify a different font color on a particular control in your form, it will override the Style setting, used when no task in present in Task List on devices, form/flow name,user's First /Last name,audit trail header,messages on the Task List. |
|
Input Font Color | #111111 | Color of text entered in input, text area and other controls. Also, used as the font color dropdown options. |
|
Input Focus | #fffcdf | Color displayed when the field has the input focus. It is the highlighting color when an input field is selected. |
|
Borders | #badeff | Color of most borders. Some controls like Tables use a slightly lighter border. See Lighter Borders below. |
|
Headers | #f2f9ff | Section header, Table header, Dropdown gradient, top bar in Mobile renderings. |
|
Invalid Control Bot | #fffed9 | If the control contains invalid data, the bottom half of the Invalid control displays with this color. Use this color value in conjunction with the Invalid Control top to change the color for Required fields in your form. See the example below. |
|
Invalid Control Top | #fffbf7 | If the control contains invalid data, the top half of the Invalid control displays with this color. Use this color value in conjunction with the Invalid Control bot to change the color for Required fields in your form. See the example below. |
|
Invalid Section/Tab | #ff5b4f | Color of collapsed section that is invalid (label/icon), Tab that is not selected containing invalid controls, Must Sign button, Error icon, Error msg. |
|
Lighter Four | #f7fbff | Text and tic for the Done button in the Signature Lightbox, text and tic for the Done button of the Upload control Lightbox. Label and decorator for continue / submit / done (signature) / upload (upload control). Much lighter version of the base color. |
|
Lighter Three | #f2f9ff | Color of watermark used in spaces. Also used for the dropdown hover when selecting forms/flows/Task List from a the main menu of a space. Lighter version of the base color. | |
Lighter Two | #d9edff | Color of selected drop down option, signature icon, task in task list, disabled icons in task list. Lighter version of the base color. |
|
Lighter One | #a3d3ff | Color of all decorators, flow step that is not ready, disabled icons in task list. |
|
Lighter Borders | #d9edff | Used as the border for the Table control, icons and tasklist in a mobile space . |
|
Darker One | #1578d4 | Top color of button gradient, Percent/Step navigation for flows, Mobile navigation control text |
|
Darker Two | #136bbd | Running/Runnable steps for flows, Space menu links on desktop. |
|
Darker Three | #0f5699 | Help display background color, selected radio/checkbox, task descriptions. |
|
Plus icon | #3ca959 | Plus icon for adding repeat items. |
|
Minus Icon | #d03232 | Minus icon for removing repeat items. |
|
Primary Btn Start | #84baee | Primary Action Button Gradient Start Color. The Primary Action Button is the Submit button on a form and the Continue/Submit button on a flow. Default value is the same as the base color. Primary and Secondary Btn Start parameters will not take effect on IE9 |
|
Primary Btn End | #1578d4 | Primary Action Button Gradient End Color. The Primary Action Button is the Submit button on a form and the Continue/Submit button on a flow. Default value is the same as darker one. |
|
Primary Btn Border | #136bbd | Primary Action Button Border Color. The Primary Action Button is the Submit button on a form and the Continue/Submit button on a flow. Default value is the same as darker two. |
|
Secondary Btn Start | #ffffff | Secondary Action Button Gradient Start Color. The Secondary Action Button is the Cancel button on a form. Default value is white. Primary and Secondary Btn Start parameters will not take effect on IE9 |
|
Secondary Btn End | #f7fbff | Background Color for the Cancel,Save,Print,Clear buttons. Secondary Action Button Gradient End Color. The Secondary Action Button is the Cancel button on a form. Default value is the same as lighter four. |
|
Secondary Btn Border | #136bbd | Secondary Action Button Border Color. The Secondary Action Button is the Cancel button on a form. Default value is the same as darker two. |
|