Add a Shared CSS Code Snippet

To add Cascading Style Sheet (CSS) code that you can use in all eForms in an app, do the procedure in this topic.

Figure: Shared CSS Code Snippet screen

Shared CSS Code Snippet screen

Video: Use Custom CSS with eForms

Video: eForm Builder Interface

Examples

Good to Know

  • If you create a new version of an application, and change shared JavaScript or CSS at the application level, when you publish the new version, the changed shared JavaScript or CSS files apply to all versions of the application, including all previously published versions, and all application instances.

    This rule does not apply to custom JavaScripts and CSS created in an eForm. If you want to use different versions of JavaScript or CSS for different versions of an application, you can specify the scripts in your eForms, instead of specifying them at the application level.

How to Start

  1. Open eForm Builder.

    For information about how to open this screen, refer to eForm Builder screen.


    Eform Builder screen
  2. On the eForm Builder screen, click CSS > Shared CSS.

    Click Shared CSS

Procedure

  1. On the Shared Form CSS screen, to add a new CSS code snippet, do this procedure.
    • To enter a new CSS code snippet, do this procedure.
      1. On the Shared Form CSS screen, click Add.
      2. On the Create Style Sheet screen, complete the fields as necessary.
      3. Click Next.
      4. On the StyleSheet screen, enter your CSS code as necessary, without headers.

        Example:

        .center {
            text-align: center;
            color: red;
        }
    • To upload a CSS file from your local file system, do this procedure.
      1. On the Shared Form CSS screen, click Upload.
      2. Browse your local file system and select the CSS file.
      3. Click Import.
  2. (Optional) Click Preview Preview icon to view the CSS.