htmlcssredcap

How to edit Source Code of Matrix in REDCap?


This is my first post on stack overflow so forgive me if I have made any mistakes around etiquette.

I have recently started working in REDCap and have an intermediate (or less) understanding of work with HTML/CSS. This, in hand with REDCap's lack of resources and counterintuitive design, has made things a bit difficult.

I am currently working to modify the color of alternating rows on a matrix. While other fields offer the option to edit source code, this is not the case with matrices. I have gone to work in the CSV to see if I can make edits to no avail.

My questions are:

  1. Can these edits even be done?
  2. Would these edits be made in the CSV, or elsewhere?
  3. Are there any good general resources for learning about aesthetic design for REDCap surveys?

Solution

  • As to your last question, you would be best off speaking to your local administrators and they can put you in touch with other admins via the REDCap Consortium Community who have done a lot of custom work with modifying the survey design and aesthetics.

    You will also need their assistance with my suggestions below, for your main question, since you will need some external modules to make these changes, and they can only be installed on your instance by an admin.

    So, get the CSS Injector External Module and you can override the standard survey CSS with your own rules. This may be sufficient to do what you need, but if not – say, if the DOM doesn't contain sufficient classes or ids to select in your custom CSS – then you might want to explore the JavaScript Injector External Module, which you might then use to modify the DOM to include classes that you can then style with your custom CSS.