In this video, we explore the styling options in Lightning Forms so that you can apply styles to your SharePoint list forms control. General styles can be styled along with individual styles.
Using the Lightning Forms styling features, you can add styles to every control on your SharePoint list form. The styles can be set on all of the controls of the same type. e.g., you can turn all labels to 14 pt instead of 12 pt, or make them blue instead of black. You can also set styles on individual controls, e.g., set the Total Expenses field to Bold with a wider border. Or you can set controls’ properties conditionally so that the styles are only applied if a condition evaluates to true – e.g. [[TotalExpenses]] >= [[ExpenseLimit]].
The styles default to using the current theme colour options which helps you to blend your styling into the current theme. However, you can also break away from the theme colours if you really need something to stand out such as exceeding the expense claim limit.
Adding styles to general controls
To view the General Styles, click the Styling button on the top of the command bar within your form. The Styling panel will display with General Styles at the top of the panel. All of the styles by default will inherit from your theme, but you can add a style to each control type under General Styles section. An example would be to change the size or color of all labels. To add a General Style:
- Click the ellipses next to the control type that you wish to change. In this example we will click the ellipses next to Fields.
- Click Add Style
- Provide a Name for your Style so that if you wish to use it again, you can.
- Click Next
- Change the styles that you wish to change. In the above example, we are changing the font color of the label.
- Click the check icon in the top corner, and choose Preview or Apply.
- Any style that has been modified will have an orange rectangle around it. You can, if you wish, set the style back to the default color.
Adding Styles to individual controls
As well as setting general styles, you can also set styles on an individual control. This is beneficial when you want a field to stand out such as Fullname. To add a style to an individual control:
- Click the styling button on the command bar.
- Locate your control that you wish to style under Control Styles (Note the styles are in order of the layout on the form).
- Click the ellipses next to the control that you wish to style.
- Click Add Style.
- Provide a name for your style – e.g. Change Fullname styling.
- Make your desired changes.
- Click Apply and Save & Close.
Using custom CSS
You can also add custom CSS styling if you wish to achieve something that's not available in the styling UI. You may notice that as you select various styling options, you can view the resulting CSS in the box below the options. This can then be modified manually, if you wish.
Change the label name
To display a custom label using custom CSS, add the following CSS code to hide the existing field label and add your own:
.sb-field-label {
visibility: hidden;
}
.sb-field-label:before {
visibility: visible;
content: 'Your Edited field label';
}