CSS form layout customization examples

Most design components of a form or a workflow page may be altered by editing the properties and options made available under Theme & Style. You can also add your own custom CSS to customize layout and design even further.  Adding your own CSS is easy:

1. From withhin the Form Designer click on the Form Name in the Form Outline Panel.
2. In the Form Properties Panel, click the Custom CSS property to add/edit your own CSS
   

CSS Examples

Customizing BootStrap Style Button Color

/* reset button*/
.m.BootStrap_theme.btn1{
color: #fff;
background-color: #969696 !important;
border-color: #969696 !important;
}
.m.BootStrap_theme.btn1:hover, .m.BootStrap_theme.btn1:focus{
color: #fff;
background-color: #C0C0C0 !important;
border-color: #C0C0C0 !important;
}
/* submit button */
.m.BootStrap_theme.btn2{
background-color: #039be5 !important;
color:#FFFFFF;
}
.m.BootStrap_theme.btn2:hover, .m.BootStrap_theme.btn2:focus{
background-color: #039be0 !important;
color:#FFFFFF;
}

Changing the Flat Button SubTheme Color

// submit
 .Flat_theme.btn.btn2 {
  color: #fff !important;
  background-color: #3498db !important;
  border-color: #3498db !important;
 }
 // reset
 .m.Flat_theme.btn1 {
     background-color: #ffffff !important;
     border-color: #cccccc !important;
     color: #000000 !important;
 }

Changing the height of the heading area on a form:

.pageStart_wrap .headstrip {
height: 600px;
}

Changing the Footer on BootStrap Theme (border and background)

.footer_text {
    color: #c0bab7;
    border-top: 1px solid gray;
    background-color: white;
    height: 300px;
}

Adjusting the SubForm Button Width

span.addbtn.btn.btn-default {
  max-width: 510px;
  width: 100%;
  margin-bottom:20px;
}

Large Styled Checkbox & Radios

This CSS will increase  the font size and line height of checkbox and radio elements that use the styled property:

.bootstrap .radio_col_tbl label, .bootstrap .radio_row_tbl label {
    font-size:15px !important;
}

.bootstrap .radio_col_tbl label {
    line-height: 40px !important;
}

Increase Image Preview Size of File Upload Field

Increase the size of the image preview on a file upload field, with a media query to reduce it on mobile:

.fileinput-preview.thumbnail {
    width: 400px !important;
    height: 300px !important;
}

@media only screen and (max-width: 480px), screen and (max-device-width: 480px) and (min-device-width: 320px), screen and (max-device-width: 1024px) and (min-device-width: 768px), screen and (max-device-width: 1280px){
.fileinput-preview.thumbnail {
     width: 375px !important;
     height: 250px !important;
 }
}

Custom Color For Styled Checkboxes and RadioButtons

Change the color of a styled checkbox or radiobutton. Note, this CSS code uses the field ID selector. 

#field_1530304501974_24field_div input.labelauty:checked:not([disabled]) + label:hover {
    background-color: #69b2c9
}
#field_1530304501974_24field_div input.labelauty:checked + label {
    background-color: #69b2c9
}

Custom Color For the BootStrap Progress Indicator

Change the color of the BootStrap Progress Indicator used on multi page forms:

.progress-bar {
    background-color: #fef200 !important;
    color: #000000 !important;
}

Custom Color For the Save & Finish Later Pop Up Window

This CSS will set the panel heading color and font color and size to black.  

.bootstrap-dialog .bootstrap-dialog-title {
     color: #fff;
     display: inline-block;
}
.bootstrap-dialog.type-default .bootstrap-dialog-title {
     color: #fff;
     font-size:13px;
    font-weight:bold;
}
.bootstrap-dialog.type-default .modal-header {
     background-color: #000;
}

Change the back drop for a Sub Form pop up window

This code changes the dark color of the backdrop/overlay shown when the SubForm window is open, to a white color.

.modal-backdrop {
    background-color: #FFFFFF !important;
}

// or hide the backdrop/overlay completely
.modal-backdrop.in {
 opacity: 0;
}

BootStrap Style Tables on your Forms

Add tables in a free text heading element (be sure to have no borders (borders = 0) and this CSS will provide BootStrap styled tables

table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

table {
  background-color: transparent;
}

th {
  text-align: left;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}