...
| Info |
|---|
We recommend that you only customize themes where absolutely necessary. The CSS customizations depend on the forms underlying html structure. Since this structure is not guaranteed to stay the same in each release you will be required to retest your own themes and potentially make changes after each upgrade. |
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:
| Table of Contents | ||
|---|---|---|
|
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.
...
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.
| Code Block |
|---|
.f-form {
color: black;
border: none;
} |
...
| Code Block |
|---|
.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:
| Code Block |
|---|
.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.
...
| Code Block |
|---|
.l-control-vertical .horizontalSelect .f-select-item
{
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.
...
| Code Block |
|---|
/******** 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 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:
...
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.
| Code Block |
|---|
/** 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.
...
| Code Block |
|---|
/***** Very Tight Controls *****************
1. Use for Grids for row 2-n
*/
.f-form .row2-n .f-helpie-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.
...