Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Section
Column
Panel
borderColorlightgrey
bgColor#F0F0F0
titleColorwhite
titleBGColor#88AACC
borderWidth1
titleOverview
borderStylesolid

There are two categories of themes in : global and custom. They are described below:

  1. Global Themes - themes provided by . There are two global themes: Nouveau and Nouveau Blue. These Global themes work nicely for all forms/flows take advantage of newer browsers supporting modern CSS and are extremely well-suited to forms/flows running on mobile devices. The Nouveau theme is the default theme for new forms created in version 5.1.1.
  2. Custom Themes- these themes are created by the designer. There are two types of Custom themes:
    1. Application Themes -  Customized themes added to to an application. Application themes will be included in the application download.
    2. Designer themes -  customized themes that are only available to the designer user that uploads them.

Refer to Basic Steps for more details.

Use customized themes when:

  • You want to give a particular form a certain look and feel that you cannot achieve using the properties in the Forms Designer, or
  • You want several forms to have the same look and feel, and wish to apply the theme to all the forms instead of changing properties for one form at a time.

Perhaps the most common reason to customize a theme is to change your forms’ background color so the forms will blend in nicely with your existing Web site, but you can add as many other stylistic touches as you wish to make your forms visually appealing. Once you create a customized theme, you can use it in as many forms as you like—including forms that already exist as well as those you haven’t created yet.

If you are customizing a theme for a single form, be aware of the various style properties that are available in the Forms Designer. Remember there are style properties for the form itself, as well as style properties for the individual controls in your form. You do not need to customize a theme if you wish only to change your form’s height, adjust the color and font of your labels, or create different types of borders around a specific control—you can make these changes simply by editing the appropriate properties.

If you are going to make extensive style changes you need an understanding of CSS and must spend a little time examining and making inferences from the structure and markup of the file (form.css) that uses for its own custom themes. A tool such as Firebug can help greatly with this. On the other hand, gives you as a starting point, a copy of the form.css file, which is well-commented. For many basic style changes, you do not have to do anything more than overlay the existing value or values with your own. We have provided several examples to get you started.

Warning

Be sure to test any form that uses a custom theme in all of the browsers your users might have. A form and its controls may display and function correctly in Internet Explorer, but not in Firefox or Safari. For example, adjusting the placement of controls in a form using custom themes may produce different results in a different browser or different browser versions.

Column
width240px
Panel
borderColorlightgrey
bgColor#F0F0F0
titleColorwhite
titleBGColor#88AACC
borderWidth1
titleThemes Chapters
borderStylesolid

Basic Steps

Common Customization Examples

Customized Themes and Templates

Items in a Custom Theme Zip File

Rezipping / UpLoading Modified Themes

Using / Editing Customized Themes

Image RemovedImage Added