The zip file includes an images folder and several files. The most important is the common.css file; this is often the only file you’ll need to edit. A read me file is also provided.
Below are the downloaded items and the purpose of each:
- common.css - This is the recommended file to place all of your custom css in. If this is done, the migration steps will be easier when you upgrade to a new release. Refer to Migration Considerations for the details.
- form.css – This is where you make the vast majority of stylistic changes
- form-edit.css – Typically this file is not used but it is available in case you want to customize what you see when designing your form.
- container.css – Edit this to add styling touches if you are using pop-up windows or embedded forms. As the file name implies, you can make changes such as modifying the border color of the pop-up window.
- custom.js file – You can include your own javascript here. Your form will use your custom code because this file gets loaded automatically when the form is loaded. See the chapter on Customizing Behavior for ideas.
- flow.css - This is where you customize flows.
- space.css - This is where you customize a
Space.
- tasks.css - This is where you customize the task list.
- login.css - This is where you customize the login for forms with tenant login security.
- submissions.css - This is where you customize and embedded submissions page.
- form-layout.css - This style sheet is intended for custom layouts. You should only put layout-specific CSS in here. For colors, borders, fonts etc. please modify common.css.
- login.css, submission.css, flow-edit.css and form-edit.css are currently not used.
- Images folder – This contains image files used for displaying borders and headers of a pop-up window but more importantly is where you place any images you might use for customization--for example, if you edit form.css to replace the standard icons shown in your forms. Also, if you will be using pop-up forms and want a header, you'll need to add an image called header.png in the folder. The dimensions of the image must match the width of your forms.
