Custom Styles

Custom style sheets help you to change the style of the forms user interface and customize the style according to your corporate style guidelines.

Use custom style sheets to change style for HTML elements of controls using CSS classes.

To create a custom style

1. Create a style sheet in the <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/ folder.

2. If Theme is applied, the css file must be tagged with FormCustomThemePath, for example, var cssFiles=["FormCustomThemePath:MyCustomStyleSheet.css"]; and must be placed in ../<BPMUITemplates>/Default/NextGenForms/custom/Themes/<ThemeName>/css.

3. If Theme is not applied, the css file can be placed in ../<BPMUITemplates>/Default/NextGenForms/custom/css/MyCustomStyleSheet.css.
   You can create folder structure in <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/ to place the css files, for example, ../<BPMUITemplates>/Default/NextGenForms/custom/css/Mycssfolder/MyCustomStyleSheet.css

4. Enter the name of the style sheet for the Custom Style Sheet property of the form. For example, enter MyCustomStyleSheet for MyCustomStyleSheet.css.

5. Enter the name of the identifier for the Custom Style Identifier property of the control.

6. Edit the style sheet to define styles for HTML elements of controls using CSS classes.

   Note:
   - Prefix the Custom Style Identifier of a control with the CSS Class name to apply the style to the specific control.
   - Use the CSS Class name by itself to apply the style to all the controls.
   - Suffix your CSS declarations with !important to ensure it takes precedence over normal declarations.