...
| 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.
...
| Table of Contents | ||
|---|---|---|
|
Changing Your Form’s Background Color
...
| 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.
...
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 .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; } |
...