How to apply styles to your controls on forms

With skybow's styling features, you can style each control in your SharePoint form individually. This styling can be set as the default for all controls of the same type.

You can also define styles for individual controls, e.g. to emphasize very important input fields or notes.

The styles can also be linked to conditions. The styles are then only displayed if the condition is true. In an onboarding solution, for example, the salary field could be highlighted if it exceeds a defined range.

The styles use the color options of the current theme by default, which helps you to integrate your design into the current theme. However, you can also break away from the theme's colors if you want to highlight something in particular, for example, if you exceed the salary range.

Adding styles to general controls

To view the General Styles of your SharePoint Form, click the "Styling" button on the skybow command bar. The Styling panel will display with General Styles and Control Styles. The General Styles can be found 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 the General Styles section.

To add a General Style you have to complete the following steps:

1. Click the three dots next to the control type that you wish to change. In this example we will click the three dots next to Buttons.
2. Click on "+ Add Style".
3. Provide a Name for your style. If you wish to use it again, you can do so.
4. Click on "Next".

Now all the different styling options for this control type appear. You can make all the changes to the style that you wish to. In the example, we are changing the hover color and the active color of the buttons.

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.

You can use the preview function at the bottom of the panel to test whether the styling changes meet your requirements. If this is not the case, you can simply continue editing. When you are satisfied, click on "Save & Close".

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 an element to stand out. To add a style to an individual control:

1. Click the "Styling" button on the skybow command bar.
2. Locate your element that you wish to style under "Control Styles".
   Note: The elements are in order of the layout on the form.
3. Click the three dots next to the element that you wish to style.
4. Click "+ Add Style".
5. Provide a name for your style.
6. Make your desired changes.
7. You can check your changes with "Preview". If everything is as you want it to be click "Apply" and "Save & Close".