Expose a limited set of enketo CSS variables to be customized in settings

Problem

  • Clients want a survey tool that meets their functionality and appearance requirements
  • When they detail the appearance requests, enketo only offers customization if hosted on a private server
  • The level of effort of setting up a private server is too high for the size and budget of the project, and the small changes needed
  • Clients end up looking for alternative tools

User story

As a kobo form developer, I want to be able to edit XLSForm settings to override a few select CSS variables for the overall form, such as the max-width of the page, the max-width of images, and the core colours used (e.g. header colour, repeat group colour, background colour)

As a kobo form developer, I want to be able to specify in a question’s appearance a limited set of styling variables (e.g. grid-theme background colour, font colour, etc.)

Proposal

  • Crowdsource a list of most requested styling elements to be customizable
  • Create a list of least complicated elements to expose to customization
  • Allow page-wide elements to be set in the xlsform ‘settings’ page with key-value entries
  • Allow question-specific css elements to be set in the appearance column
  • Test with pilot users, to help spot any inconsistencies in CSS application, especially in complex forms
  • Release for XLSform only, with documentation
  • Add to form builder for non-XLSform edit