Hi,
Apologies if this is a straightforward question:
I’ve been mostly using “select_multiple_inline” prompts in developing an ODK Survey (ODK-X) form. In use, the selection buttons begin white with black text and then turn a shade of grey with black text when the item is selected.
I’m trying out switching to “select_multiple_grid” instead but the default selection color seems to be black with dark grey text so that I can barely read the text in a selected box (and the black is a bit overwhelming). At least on the gadget I am testing on.
Is there a standard way to change the selection color/shade in the select_multiple_grid type?
Thanks in advance.
Tim
There’s lots of customizability in terms of color/font etc. I am not 100% sure exactly what controls color, but you can try playing around with the survey css file (app/config/assets/css).
it is looking like the handlebars for grid has it hardwired:
in app/system/survey/templates/select_grid.handlebars
is this:
{{#if checked}}
!style="background-color:black;"
{{else}}
style="background-color:white;"
{{/if}}>
but in app/config/assets/css/odk-survey.css
is this
.grid-select-item:active {
border: 1px solid #aaa /*{d-bdown-border}*/;
background: #eee /*{d-bdown-background-color}*/;
font-weight: bold;
color: #333 /*{d-bdown-color}*/;
text-shadow: 0 /*{d-bdown-shadow-x}*/ 1px /*{d-bdown-shadow-y}*/ 0 /*{d-bdown-shadow-radius}*/ #fff /*{d-bdown-shadow-color}*/;
But #eee is a light gray, they color of the in_line style.
An attempt to modify the handlebar file didn’t seem to do anything … I assume I need to move it over to app/config?
Yes, it looks like I modify the handlebars file, move it, then specify the new location in a templatePath
column in the form xlsx file. As described here:
https://docs.opendatakit.org/odk-x/xlsx-converter-using/?highlight=handlebars#customizing-prompts
Doing this seems to slow things down, but I fully haven’t figured it out yet.