How to Use External CSS to Style Your Adaptive Form

The last option in styling and adaptive form is using and external CSS (Cascading Style Sheet) file. Out of the three styling options this one requires the most technical skill to be able to use. This process first requires the style definition be created and added to CRX (Content Repository Extreme Development Environment). Next the form needs to be associated with the single CSS file. Lastly each field element in the form needs to specify which class(es) should be associated with the form element. Although the last two steps can be done by content authors the first step does require permissions to the development environment along with technical skill in writing CSS coding and should be done by a developer.

Just as with most of the interactions in the CRX repository adding the CSS must be done in the correct hierarchical position. You want to navigate to etc/designs where it is recommended to create a custom folder to hold your custom CSS files. Under this folder is where you will house your file filename.css. As for the file itself it is just straight CSS so write your code as you normally would. Remember to save as the CRX repository does not automatically save for you.

Now that you have the CSS file created you can now link the defined styles with your form. In the Form Container properties select the checkbox button next to the element for CSS File. This will open a browser window where you can navigate to the CSS file you want to associate with this form.

Lastly you need to associate the specifically defined styles with the element on the form. From the editing interface select the properties for the element you want to style and in the Basic options locate the CSS Class property. Here you can list all the different styles that you want to be enforced on the field here. Separate this list with a space.

Although this methodology does have more reuse than the inline styling option it is still a manual process to associate the required styling classes to each element. This process also is lower in maintenance cost then inline styling as a change made to the base CSS file would cascade to all of the different forms that are referencing in the same fashion as styling with a theme.