Let's say you want to change the background color of your forms/workflows so they will blend in nicely with your existing website. You can choose one of the provided global styles or create a new custom style. Once you create a custom style you can use it in as many forms/workflows as you like. Custom fonts for message control styling can also be added to frevvo.

Layouts

frevvo provides four layouts that can be applied to forms/workflows. New projects default to Nouveau and forms/workflows created in a project will inherit the Nouveau layout. New layouts can only be added by frevvo. The Layout dropdown on the Form Properties Style tab displays the choices:

1. Nouveau - takes advantage of newer browsers supporting modern CSS and is extremely well-suited to forms/workflows running on mobile devices.

2. Compact - This is very similar to the Nouveau layout except for the reduction of vertical space between controls.

3. Tight - Vertical and horizontal space is dramatically reduced - - controls will be positioned up against each other. 

4. Nouveau Square - this layout is the Nouveau layout with square corners for controls.

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.

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.

This image shows the same panel when the Nouveau Square layout is selected for the form. The Nouveau Square layout has the vertical and horizontal spacing of the Nouveau layout with square corners for input controls.

Styles

Styles are used to select a particular look & feel for your project, forms or workflows. 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 frevvo: global, tenant and user. 

1. Global Styles - can only be created by frevvo. They cannot be removed/edited by anyone including the frevvo 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.
   
   

2. Tenant Styles - created/modified/uploaded by the initial tenant admin ONLY.  This is the admin user that was created when the tenant was created. Tenant level styles are available to all users in the tenant.

3. 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, workflow or project. Styles must be manually moved from your test/development server to your production environment. You do this by selecting Download from the menu for each style you want to move from your test/development server and then selecting Upload from the 

 Add menu 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. You can also

sort Styles alphabetically (A-Z or Z-A).

Global Styles

frevvo provides four styles that can be chosen from the Style dropdown choices on the Style tab of the Form Properties panel. You will not see Global Styles on the frevvo Style tab. Only styles created by designers and the initial tenant admin will display there. 

The four Global Styles are: Blue, Neutral, Green, Aqua. You can use them for your forms, workflows and spaces but you cannot download or modify them in any way. 

Creating Styles

The Styles page is divided into 2 sections:

• The top section of the page provides a field for the Style name, a description and the default colors (hex values) for controls explained in the table below.

• The bottom section of the page provides the ability to set colors for specific control types. The overrides in this section are helpful if you want your frevvo projects/forms/workflows to match a Style Guide used by your company.

The frevvo tenant admin or any designer user can create a new Style.  

 Follow these steps:

If you are logged in as a tenant admin you must first click the Home link in order to see the Styles Tab.

1. Click on the Styles Tab. 
   
   

   Open

   

   
   
   
   

2. Click the 

   Open

   

    Add icon and select New Style. The Update Styles screen will display. Notice that most of the fields have

   Open

   

   Help icons. Click these to get more information about the color property. Also notice the background of each property field displays the assigned value:
   
   
   

   Open

   

   
   
   
   

3. Enter a name and description in the appropriate fields (limit of 255 characters.)

4. 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 #, frevvo 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, workflow navigation icons, button gradients etc.

5. 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: