ThemeGenerator - rev 126

The documentation on this page corresponds to rev 126 (February 2015) of the tools suite. See Older Versions for documentation on earlier releases of this suite.

This is an older version of our software.

The websites referenced in this documentation will generally have been updated to work with the newer software, and therefore may not function with this older release.

Where practical, we have provided zip files of the ApplicationDesigner environment used in creating those sites. See Survey and Tables Aux Files

Release Designation

ODK ThemeGenerator rev 126 (February 2015) designated Alpha software.

See Release Designations for the meaning of this designation.

Overview

The appearance of ODK Survey forms can be customized with the Theme Generator. You can use the Theme Generator by clicking on the Customize tab of the Application Designer. The Theme Generator creates a css file that can be used with your survey form to customize the colors and fonts.

NOTE: Future releases will use Bootstrap for rendering prompts. This will be an incompatible change that replaces the existing JQueryMobile rendering mechanism. While the XLSX-level description of the Survey is not expected to change, custom prompts and the customized CSS produced by the ThemeGenerator will need to be rewritten.

The nomenclature used for the components of the survey form are:

  • Background Color - the background color that will be used for all of the screens within the survey
  • Button Background Color - the background color that will be used for all of the buttons within the survey excluding the navbar buttons
  • Button Text Color - the text color that will be used for all of the buttons within the survey excluding the navbar button text
  • Navbar - header at the top of the survey screen that has the survey options button and the navigation buttons
  • Text Color - the color that will be used to display text in the survey screens

Customized-survey-screen

There are four tabs within the Theme Generator:

General

The three things that can be changed within this tab are below.

  • Background - this will change the background color
  • Text - this will change the text color
  • Font - this will change the font of the screen text

Button Styles

This functionality has not been fully implemented and does not work properly.

Changes made to the css within this tab soley affect the buttons within the survey screens and NOT the navbar.

  • Text Color - changes the button text color
  • Color - changes the button background color
  • Selected Color - changes the color of the button if it is selected
  • Border color - changes the color of the button border
  • Rounded edges - changes the curvature of the button edges
  • Button height - changes the size of the buttons
  • Button text size - changes the size of the text within the buttons

Navbar Styles

This functionality has not been fully implemented and should not be used.

Finish

Once all of the css changes are satisfactory, clicking on the "Generate Styles" button within the Finish tab will create a customStyles.css file. This file must be named customStyles.css.

After creating a customStyles.css file using the Theme Generator, save the file in the canonical directory structure that was created for the form. For example, if your form is called form_one, and the table id is my_table_id, you should save the file as app/tables/my_table_id/forms/form_one/customStyles.css.

If all of the previous steps for setting up a survey have been followed, you should now be able to see the theme changes by clicking on the Preview tab of the Application Designer and choosing your form.