Custom styles

Custom style sheets allow you to change the appearance of the Forms user interface and customize styles according to your corporate style guidelines.

You can use custom style sheets to modify the styles of HTML elements of controls by using CSS classes.

Create a custom style

1. Create a style sheet in the following folder:

   <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/ folder.

2. If a Theme is applied:

   • Place the CSS file in the following folder:

     <InstallPath>/Web/BPMUITemplates/Default/NextGenForms/custom/Themes/<ThemeName>/css

3. If a Theme is not applied,

   • Place the CSS file in the following folder:

     <InstallPath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/MyCustomStyleSheet.css

   • You can create subfolders under:

     <Installpath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/

     For example:

     <InstallPath>/Web/BPMUITemplates/Default/NextGenForms/custom/css/MyCssFolder/MyCustomStyleSheet.css

4. In the Form Properties, set the Custom Style Sheet property to the name of the style sheet by tagging the CSS file with FormCustomThemePath (.css extension is not required).

   For example: FormCustomThemePath:MyCustomStyleSheet

5. In the Control Properties, set the Custom Style Identifier property to the required identifier name.

   Note:
   - Prefix the CSS class name with the Custom Style Identifier to apply the style to a specific control.
   - Use the CSS class name by itself to apply the style to all controls of that type.
   - Suffix CSS declarations with !important to ensure that custom styles take precedence over default styles.

Example

6. Open the Central Configuration website and navigate to Repository List.

7. Edit the required repository to open the Manage Repository page.

   Under the Enabling Theme section:

   • The Enable Theme flag indicates whether a theme is enabled for the repository.

   • If the Enable Theme flag is selected, the Theme Name field displays the name of the applied theme.

8. Based on the Enable Theme setting:

   • If Theme is enabled (for example, the theme name is Default), create the custom CSS file in the following path:

     <InstallPath>/Web/BPMUITemplates/Default/NextGenForms/custom/Themes/Default/css

   • If Theme is not enabled, create the custom CSS file in the following path:

     <InstallPath>/Web/BPMUITemplates/Default/NextGenForms/custom/css

9. Create a file named MyCustomStyleSheet.css in the appropriate folder based on the repository’s theme settings.

10. Refer to Other Controls for information about the structure of CSS class names applied to form controls (excluding container controls). Control-specific styling details are documented in the corresponding topics.

11. For a TextInput control:

    • The .skfli CSS class represents the control label.

    • The .skc CSS class represents the main control.

    To apply italic styling to all TextInput control labels, add the following rule to MyCustomStyleSheet.css:
    

    .skfli {

    font-style: italic !important;

    }

12. Design a form with three TextInput controls.

    • Open the Form Properties, navigate to the Appearance tab, and set the Custom Style Sheet property to:

      FormCustomThemePath:MyCustomStyleSheet

    • Save the form properties.

13. Refresh the Form Design view. All three TextInput control labels appear italicized. The same styling is reflected in the preview mode.

14. To apply additional styling to a specific control, for example, to display the label of TextInput3 in bold:

    • Open the TextInput3 control properties.

    • In the Appearance tab, set the Custom Style Sheet Identifier property to BoldText.

    • Save the control properties.

15. Add the following rule to MyCustomStyleSheet.css:
    

    .BoldText_skfli {

    font-weight: bold !important;

    }

    This rule combines the Custom Style Sheet Identifier (BoldText) with the label class (.skfli) to target the specific control.

16. Refresh the Form Design view. The TextInput3 label is now displayed in bold, in addition to being italicized.