Quick Tip: Alternating Row Colors in Tables

Version 3.x Instructions
Optional: Go to the SurveyGizmo version 2.x instructions

The following tutorial is only necessary if you wish to override the automatic alternating row highlighting that is built-in and based off of the color theme of your survey, chosen under Look & Feel.

When displaying tables or matrices with many rows and columns, sometimes it is helpful for the survey taker to be able to easily identify each row within the table or matrix. A simple way to provide the visual aid is to alternate the colors of each row by making every other row have a slight background color, usually gray. Luckily, this can be accomplished with a simple adjustment to the Publish section of your survey.

Making changes to the Theme

• Go to the Publish tab in the Survey Editor
• Select the Customize link to the right of your survey screenshot
• Select the Advanced… tab on the left
• Choose the Append radio button to display the CSS box
• You will want to add the following code:

  .sg-even-row td {
  background-color: #CCCCCC !important;
  }

  Note: You can change the #CCCCCC hex code to represent any color (#CCCCCC is a dark gray). You can even replace it with the word ‘red’ (no quotes) if you are not comfortable with hexadecimal color codes.

• Click Save Changes

Secondary Tip: Continuing the Color Through Row Headers (far left column)

Add the following as an addendum below the above entry:

.sg-even-row th {
background-color: #CCCCCC !important;
}

table.sg_Table tr.sg_TR td.sg_TD1 { background-color: #EEEEEE;}

table.sg_Table tr.sg_TR td.sg_Group1 { background-color: #EEEEEE; }
table.sg_Table tr.sg_TR td.sg_Group2 { background-color: #EEEEEE; }