Contents x
    Edit Components Style
      • PDF
      Contents

      Edit Components Style

        • PDF
        Article summary

        Article Overview

        The following article details the style properties of each component.

        Editing Components Style

        Each component has different parameters to style. The changes will be reflected in the preview area.

        Text Area

        (See Figure 1)

        1. Text color
        2. Background color
        3. Border width
          1. Thin (1px)
          2. Medium (2px)
        4. Border color
        5. Radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)


        Figure 1: Component Style

        NOTE
        • The colors for selection are set according to different categories using the right section of the theme. For additional information, click here.
        • Click the Reset To Default option (6) to cancel all changes. 

        Text Field

        (See Figure 2)

        • Input container:
          1. Background color
          2. Border width:
            1. Thin (1px)
            2. Medium (2px)
          3. Border color
          4. Radius:
            1. Round
            2. None (0px)
            3. Small (2px)
            4. Medium (4px)
            5. Large (8px)
            6. Xtra Large (16px)
          5. Input text color

        Figure 2: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (6) to cancel all changes.

        Radio Group

        (See Figure 3)

        1. Options text color
        2. Option background
        3. Option border width
          1. Thin (1px)
          2. Medium (2px)
        4. Option border-color
        5. The color of a checked option
        6. The border color of a checked option

        Figure 3: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (7) to cancel all changes.

        Dropdown

        (See Figure 4)

        1. Selected dropdown option text color
        2. Selected dropdown option background color
        3. Dropdown border-color
        4. Dropdwon radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        5. Dropdown border width
          1. Thin (1px)
          2. Medium (2px)
        6. Display value placeholder text color 
        7. Dropdown menu text color
        8. Dropdown menu background color
        9. Dropdown menu border-color
        10. Dropdown menu radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        11. Dropdown menu width:
          1. Thin (1px)
          2. Medium (2px)
        12. Dropdown arrow color 
        13. Dropdown options color
        14. Hovering above dropdown options color

        Figure 4: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (15) to cancel all changes.

        Checkbox

        (See Figure 5)

        1. Checkbox text color
        2. Checkbox background color
        3. Checkbox border-color
        4. Checkbox radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        5. Checkbox border width
          1. Thin (1px)
          2. Medium (2px)
        6. The color of the checkbox when checked 
        7. Checkmark color

        Figure 5: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (8) to cancel all changes.

        Buttons

        (See Figure 6)

        1. Label text color
        2. Background color
        3. Border-color
        4. Radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        5. Width
          1. Thin (1px)
          2. Medium (2px)

        Figure 6: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (6) to cancel all changes.

        Signature

        (See Figure 7)

        1. e-Signature color
        2. Signature container background color
        3. Signature container width:
          1. Thin (1px)
          2. Medium (2px)
        4. Signature container border-color
        5. Signature container radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        6. Button text color
        7. Button background color
        8. Button border-color
        9. Button radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        10. Button width
          1. Thin (1px)
          2. Medium (2px)

        Figure 7: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (11) to cancel all changes.

        File Upload

        (See Figure 8)

        1. Input container background color
        2. Input container border width
          1. Thin (1px)
          2. Medium (2px)
        3. Input container border-color
        4. Input container radius:
          1. Round
          2. None (0px)
          3. Small (2px)
          4. Medium (4px)
          5. Large (8px)
          6. Xtra Large (16px)
        5. Input text color
        6. Input with files text color
        7. Upload instructions text color
        8. Remove button background color
        9. Remove button border-color

        Figure 8: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (10) to cancel all changes. 

        Date Input

        (See Figure 9)

        • Input container:
          1. Background color
          2. Border width:
            1. Thin (1px)
            2. Medium (2px)
          3. Border color
          4. Radius:
            1. Round
            2. None (0px)
            3. Small (2px)
            4. Medium (4px)
            5. Large (8px)
            6. Xtra Large (16px)
          5. Input text color

        Figure 9: Component Style

        NOTE
        • The colors available for selection or set according to different categories using the Theme Branding. For additional information, click here.
        • Click the Reset To Default option (6) to cancel all changes.
        Was this article helpful?
        What's Next

        Can’t find what you’re looking for?

        Let us know what you need and we'll help you as soon as possible.

        Contact support