Changing default styles

Choose a profile to add custom styles

Access the CRX DE interface at the URL: http://<server>:<port>/lc/crx/de and create a profile or choose an existing profile. To know how to create a profile, see Creating a new Profile

Create a CSS style sheet for styling the Mobile Forms

Navigate to the folder in which you have created the profile renderer and create a CSS style sheet file. The steps to follow are

1. Right click the folder and select create -> create File from the menu
2. In the create file dialog, enter the name of the style sheet. Make sure that you use the extension .css (for example stylesheet.css)
3. From the navigation pane, open the CSS file that  you have created.
4. Define the CSS classes of the components that you want to style and add styles in those classes. 

Include the style sheet in Profile Renderer

Open the Profile Renderer page (jsp file) in CRX DE, and include the CSS file in the page just below the XFA client library. Perform these steps to include the CSS file in profile.

1. Search in the renderer page for the following line:
   
   <cq:includeClientLib categories="xfaforms.profile" />
2. Insert the following below the line above to include the style sheet:
   
   <link href="/path/to/stylesheet" rel="stylesheet" type="text/css"/>
3. Save the file.

Verifying the change:

Render a form using Mobile Forms IVS with this custom profile:

1. Access the URL: http://<server>:<port>/lc/MobileFormsIVS
2. Choose a form, say demo.xdp, and upload it.
3. Select the uploaded form. Choose custom in profile dropdown, and specify the profile name created in Step 1.
4. Click Render form and verify the changes in the rendered form.