...
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.
...
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:
...
| Code Block |
|---|
/***** Very Tight Controls *****************
1. Use for Grids for row 2-n
*/
.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% width: 97% !important;
height: !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.
...