You can use the Styles section under Tabs and tab permissions to modify the look and feel of your forms. There are certain common settings, such as background colors or borders. You can also modify more advanced settings, overriding the CSS styles on the form page.
Most of the CSS classes you will work with are just basic SharePoint classes that are found on built-in forms and pages. You can use F12 feature of your browser to examine the page structure and determine which styles you want to override. For example, if you want to modify the look and feel of column labels, you will modify the class ms-formlabel.
There are several classes that are introduce into the form page by Smart List Pro. Those are unique to the product and are not found on regular forms. Please refer to the following guide:
Class | Description | Default value |
iw-colsep | Separator column in multicolumn layouts | width: 20px; |
iw-slpgen | Row generated inside the form table | |
iw-formspan<x> | Field spanning more than one layout column | |
iw-formspanshort<x> | Same, but when column labels are placed above fields | |
iw-slpblank | Blank row | |
iw-slpblanktd | Cells in blank row | |
iw-sectionHead | Section header | |
iw-snippet | Fragment cell | |
iw-error | Validation error below form | background-color: red; width: 14px; height: 14px; border-radius: 50%; color: #fff; font-size: 10px; display: inline-block; font-weight: bold; |
iw-infobar | Field description in pop-up mode |
border: 1px solid #999999; |
iw-formtitle | Title above form | |
iwslp-validation | Bottom validation container | |
iwslp-tab | Tab button | |
iwslp_btns | Tab buttons container | |
iwslp_filler | Filler space on the right of the tab buttons | Depends on theme |
iwslp_tabDesc | Tab description | Depends on theme |
iwslp_body | Tab container | Depends on theme |
iwslp_tabCenter | Tab button center | Depends on theme |
iwslp_tabLeft | Tab button left | Depends on theme |
iwslp_tabRight | Tab button right | Depends on theme |