Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column

makes it easy to select layouts and styling for your projects, spaces and forms/workflows. The designer can pick from four different layouts and four global styles where you can specify colors, font name and other properties. You cannot customize layouts but you can create custom styles.

This Expense Report uses the Compact Layout and Aqua Style.

See the CSS Class property for more form/workflow styling options.

Column
width400px

On This Page:

Table of Contents

...

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. 

 Image Modified

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. 

...

  • 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 a specific control types. The overrides in this section are helpful if you want your  projects/forms/workflows to match a Style Guide used by your company.

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

 Follow these steps:

Info

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. 
    Image Modified

  2. Click the  Add icon and select New Style. 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:



  3. Enter a name and description in the appropriate fields.
  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 #,  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:

...