...

 Below are examples of how you can edit the formcommon.css file to customize your own themes. Some are simple and require very limited knowledge of CSS; others are slightly more complex and require more experience with CSS including the ability to make inferences based on the structure and markup of the form XHTML document. Note also that the form.css file includes comments to point you in the right direction.

On this page:

Changing Your Form’s Background Color

This is an example of a simple change that requires little or no knowledge of CSS.  About halfway down the form.css page for the professional blue Nouveau Blue theme you’ll see the following. 

...

.f-panel.Coloryellow {  
        background-color: lightblue;
}

Replacing Icons

...

Panel Floating

Multi-column layouts can cause styling issue if the column content is unbalanced. In the example below, the top left panel 28 contains more controls then the top right panel 30. This causes panel 32 to float out of position. You can solve this by adding the f-newline css class to panel 32. This forces panel 32 to start on a new line. See the screen image on the right.

Section
Column width 400px  Image Added Column Image Added

Another possible solution is to add an extra panel into the form above panel 32 and set that new panel's width to 100%. Then drag/drop panels 32, 33 and 34 into the new 100% width panel. It is better to avoid extra panels when possible as they do add a slight bit of extra html to your form. If your form contains 100s of controls and extra unnecessary panels it can effect performance. So good to avoid extra panels and controls when possible. 

Replacing Icons

Forms include standard icons for collapsible and expandable sections, a control’s Help property, and so on. You can replace these standard icons with your own. In this example, we will replace the icon that displays when you set a control’s Help property.   Here is the relevant portion of the professional-blue theme’s form.css file:

...

The relevant portion of the form.css file is shown below—as you can see,  uses the .f-form class for label colors, and the professional blue Nouveau Blue theme uses black font.

.f-form {  
        color: black;  
        border: none; 
} 

...

.l-control-vertical .f-select-item 
{ 
clear:none; 
}

However, with this change the options still come underneath the label as shown above.  We need to add the following code to the form.css file so the options will be positioned on the same line as the label:

.f-select1 fieldset, 
.f-select fieldset  
{      
    clear:none;      
    padding:0;         
}

If there are several radio or checkbox controls on our form and we only want certain ones to be horizontal, we can add a CSS Class property to the control options we want displayed horizontally.  We'll call the property “horizontalSelect” and edit the control's CSS Class property in the Forms Designer as shown below.

...

.l-control-vertical .horizontalSelect .f-select-item 
{ 
clear:none; 
}
.horizontalSelect  fieldset,.horizontalSelect fieldset      
{       
{ 
 clear:none; } .horizontalSelect fieldset,.horizontalSelect fieldset {         clear:none; padding:0;         
} 

This lets us display the option horizontally for our Colors checkbox and Size radio control while leaving the options vertical for the remaining controls.

...

By default when you drag in most controls from the palette they take up a certain amount of your form’s width based on your theme--for the professional blue Nouveau Blue theme, the default is 50%. In this example, we’ll show you how to change this default width to a different value.

...

/******** Hide Tab in Print View ******/ 
/* Tab label */ 
.s-print .h-switch .h-case .f-label { 
        display:none; 
} 
/* The entire tab group contents */ 
.s-print .c-switch { 
        border: none; 
} 
/* A tab header */ 
.s-print .f-switch .h-case { 
        border: none; 
}

Disable Expanded/

...

Collapse

In this example we want to disable the expand/collapse functionality on section controls.

/* Do not allow Sections to be collapsed */ 
.s-expanded .f-expand {
     display:none !important;
 display:none !important}

#page-form .s-expanded .h-section  {
     pointer-events: none;         
     cursor: default;
} 

Reduce White Space Between Controls

...

Print view styling affects the pdf files (or other image types) generated when the form is submitted (ex: Pdf attached to an emailed submission)  or the  icon is clicked.  See Print View Printing Forms for details.

Print View

You can style your form's print view. This enables you to have one look & feel in use mode and a different look & feel in print mode. Print view styling affects both the pdf (or other image types) generated when the form is submitted (ex: Pdf attached to an emailed submission) as well as the print view for the pdf file generated and downloaded by clicking on the form's printer icon.

You can find information about implementing a work-around that will support international characters in submission PDFs here.

Here are examples of several common customizations to the default Clear Nouveau theme's print view. The image below shows the form as it looks in use mode.

...

This image shows how the 1st tab of the form looks with the default Clear Nouveau theme in print mode when the printer icon was clicked. The form print view will be the same when the pdf (tiff, etc..) print image is generated upon submission.

...

Radio and Checkbox control option labels can be only one line using the default Clear Nouveau and Professional Nouveau Blue themes. This is in order to keep these controls the same height as the other input controls to prevent alignment issues. Sometimes you do need an option labels that span multiple lines. The css class "multilineopt" does this. This is how your form will look prior to having the custom theme:

...

This is how the form looks with the custom theme. You must set the control's css class in the designer to "multilineopt".

Required Controls

' default behavior is to display a red asterisk next to required controls that are missing values and to change the font color of section and tab controls labels to red if either contain a required control missing values.

...

Sometimes you require a separate comment input for each selected checkbox. This theme changes the required indicator from a red asterisk to a red left-hand bar and only displays the comment if the associated checkbox is selected. Otherwise the comment input remains hidden and not required. The latter behavior is created via a custom rule shown in in the Many Checkbox Comments rule sample. Download a working sample form here. Note that the CompactCommentsSample.zip must be extracted and contains both the form and the completed theme. You can also Try this form now.

/** Change required indicator from asterisk to bar **/
.f-form .compact .f-required {
   display:none;
}
.compact.s-invalid {
	border-left: 3px solid red;
}

/** reduce white space so comment input aligns with checkboxes **/
.l-control-vertical .compact.f-input,
.l-control-vertical .compact.f-output,
.l-control-vertical .compact.f-textarea,
.l-control-vertical .compact.f-select,
.l-control-vertical .compact.f-select1,
.l-control-vertical .compact.f-upload,
.l-control-vertical .compact.f-trigger {
	padding: 1px;
	margin: 1px;
}

.l-control-vertical .compact .f-select-item {
	margin: 2px 0px 2px 0px;
}

.compact.f-select fieldset,
.compact.f-select1 fieldset {
	padding: 0px;
	margin: 0px;
}

/** Invisible comment inputs must takes up space on form
    so they align with the associated checkbox **/
.compact.s-invisible {
	visibility:hidden;
	display:block;
}
/** Reverse above so comment inputs are visible in designer **/
.s-edit .compact.s-invisible {
	visibility:visible;
	display:block;
}

Tables and Grids

Using a table/grid layout is a useful space saving technique. This layout resembles a Microsoft excel worksheet. The table control makes table/grid form layout easy. You can also create a table layout via a custom theme.worksheet. The table control makes table/grid form layout easy.

Here are a couple forms that have been organized with a table layout. This expense report uses a repeating control in a table layout.

...

/*****  Very Tight Controls *****************  
        1. Use for Grids for row 2-n
 
*/ 
.f-form .row2-n .ie-date-time-hr,
.f-form .row2-n .f-help, 
.f-form .row2-n .f-required, 
.f-form .row2-n .f-calendar, 
.f-form .row2-n .f-label label {  
        display:none !important; 
} 
.l-control-vertical .row2-n.f-input, 
.l-control-vertical .row2-n.f-output, 
.l-control-vertical .row2-n.f-textarea, 
.l-control-vertical .row2-n.f-select, 
.l-control-vertical .row2-n.f-select1, 
.l-control-vertical .row2-n.f-upload, 
.l-control-vertical .row2-n.f-trigger {  
        clear:both;   padding:0px !important; 
}  .l-width-custom .f-panel .f-input input,  .l-width-custom .f-panel .f-textarea textarea {
        width: 97% !important;  
        height: 17px !important;  } .l-width-custom .f-panel .f-select1 .select {  
        width: 100% !important; 
} 
.row2-n.f-select1 fieldset, 
.row2-n.f-select fieldset {
        padding:0px !important; 
} 
/* 
.row2-n.f-textarea textarea {
        overflow:hidden;  }  */ 
/* remove space around sections with repeat used in grids */  .row2-n .c-section,  .row2-n .h-section {  
        padding: 0px !important;  
        border-bottom: 0px !important;  }  .row2-n.f-section {  
        margin: 0px !important;  } 
.f-form .row2-n .f-add, 
.f-form .row2-n .f-remove {
        float: left !important;  } 
.row2-n.s-expanded .f-expand {     display: none; 
} 

Custom Behaviors

You can add custom javascript to your forms to add additional interactivity. This is done by adding javascript code custom.js in your theme. See Customizing Behavior for full details and examples.

...