...

 Below are examples of how you can edit the common.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

...

/******** 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.

...

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 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 Nouveau theme's print view. The image below shows the form as it looks in use mode.

...

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.

...

/*****  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; }

...