OpenClinica User Manual/StylingACRF

How to style a CRF

The default visual representation of a CRF in OpenClinica is fairly simple and sometimes it cannot fulfil the users' requirements to the layout. Most commonly, it concerns the following requirements:

Colours, both text and background
Text size
Links
More than 3 or 4 columns †
Column headers †
Increased spacing between LEFT_ITEM_TEXT and input field

All these can be resolved, some of them easy, others more complex. The requirements marked with a † are not straight forward and may require a some CSS know-how to fit correctly.

How to do this

Basically, all the requirements above are fulfilled by the use of in-line Cascading Style Sheets (CSS) in conjunction with basic HTML tags. The tags are typed directly into the cells of the XLS file. The following columns for input fields accept this kind of modification:

LEFT_ITEM_TEXT
RIGHT_ITEM_TEXT
HEADER
SUBHEADER

Below is an example of what is achievable. It addresses all the requirements mentioned before (and some more).

To see how this is done, please download the XLS file and carefully study the cell data: Click here to download from IFile.It

Tips and Hints

Personally, I use Firefox and the Firebug tool when styling CRFs. This enables me to change the styling within the browser and preview the outcome immediately. This is excellent for small tweaks to your styled colours, fonts and indents.
You can't always rely on the preview of the CRF (before submitting). The layout of this isn't usually exactly the same as viewing the CRF in Data Entry View. This is especially true when doing text-indents of first input field in a row.
You need to test the result in multiple browsers (at least Firefox and IE (with and without Compatibility View).
The QUESTION_NUMBER field is usually not usable when LEFT_ITEM_TEXT has been styled with regards to position, but you will see this immediately when previewing the CRF. If you need the QUESTION_NUMBER, an option is to include it in the LEFT_ITEM_TEXT, but keep in mind that the QUESTION_NUMBER text will always be left justified.