Touchpoint custom activity themes

Use custom themes to apply styling to an activity quickly. Custom themes can increase authoring efficiency, and keep branding and appearance consistent across screens.

Create a custom theme

  1. In the Touchpoint app, click the arrow beside Activities and select Custom Theme.
    Result: The Custom Theme page appears.
  2. Click New theme.
  3. Type a template name and description, and click Create.
  4. Choose settings for all your theming elements.
  5. When you are finished, click Apply edits and preview your changes before saving the theme.
  6. In the upper right corner, click Save Theme.

Edit a custom theme

  1. On the Custom Theme page, click a theme to open it for editing.
  2. Click Edit Theme to make theming element selections.
    When you are finished, in the theme editor panel:
    • Click Apply edits to apply your changes.
    • Click Discard changes to discard your changes from this session.
    • Click Reset theme to Default to restore the default theme.
  3. Toggle between mobile, tablet, and desktop view to preview your changes.
  4. Select a screen type from the menu to preview your changes.
  5. In the upper right corner, click Save Theme to save your changes.

Select a theme for your activity

  1. In the Activity Builder, on the toolbar, click Activity Settings.
  2. Click Apply Theme and select a theme from the list.

Theming elements

Outer Background

Formatting option Description

Background image

  • Click this button to upload or select an image, and then click Save.
  • Once a background image is uploaded, you can click the options menu above the image thumbnail to edit, remove, or change the image, or use a background color instead.
  • Click Edit image to adjust the image's cropping, zoom, saturation, brightness, and blur. The controls work exactly the same way as the image editing controls in the Activity Builder. For more information, see Image Editor.

Background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Inner Background

Formatting option Description

Background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text Box

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text box background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Title Text

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Subtitle Text

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Prompt Text

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Logo

Formatting option Description

Logo image

  • Click Upload, select an image, and then click Save.
  • Once a logo image is uploaded, you can click the options menu above the image thumbnail to remove or change the image.

Choice Question Text

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Choice Question Display

Formatting option Description

Answer option color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Answer option shape

Click the button to select a shape for answer options. Options include:
  • Vertically stacked rectangles
  • Condensed pill shapes (Text questions)
  • Radio buttons (Single Choice questions)
  • Check boxes (Multiple Choice questions)

Radio button shape

If you select radio buttons as your answer option shape, you can set the shape of the radio buttons themselves. Options include:
  • Circle (Single Choice questions)
  • Check box (Multiple Choice questions)
  • Diamond

Answer option padding

Click the button and use the notched slider to adjust the padding along the top and bottom of answer options. Your selection snaps to the nearest notch in the slider. The leftmost notch represents almost no padding, while the rightmost notch represents the maximum amount of padding possible.

Answer option spacing

Click the button and use the notched slider to adjust the amount of space between answer options. Your selection snaps to the nearest notch in the slider. The leftmost notch represents the least amount of space between answer options, while the rightmost notch represents the most amount.

Numeric Scale

Formatting option Description

Scale button shape

Select a shape for the scale buttons:

  • Circles
  • Stars

Primary color

Secondary color

The primary color controls the color of the inner circles, and the color of the dotted outline around the selected number. The secondary color controls the color of the numbers, and the solid outline around unselected numbers.

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.
Table 1. Scale Input Display
Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Reaction Scale

Formatting option Description

Face

  • Monochrome gives you a range of faces from sad to happy. The faces can have two colors, a fill color and an outline color.
  • Expressive gives you a livelier range of facial expressions. The face colors are preset to a rainbow (red, orange, yellow, teal, green), and cannot be changed.

Face fill color

Outline color

Applies to Monochrome faces only.

The face fill color determines the color of the faces. The outline color determines the color of the faces' outlines and expressions.

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Date Entry

Date Input

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Font color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Date Input Display

Formatting option Description

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Align

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Button

Formatting option Description

Transition and submission button style

Select a transition and submission button style. Options include:

  • Static rectangular button with text.
  • Static arrow button with text.
  • "Swipe up" animated arrow with no text.

Font

Click the arrow on the right side and select a font from the menu. Options include:
  • Abril Fatface
  • Comfortaa
  • Courier Prime
  • Dosis
  • Lato
  • Roboto
  • Sacramento
  • Times New Roman
Any custom fonts you have added also appear in the menu. For more information, see Upload a custom font.

Font size

Click the arrow on the right side and select a font size from the menu. Options include:
  • 8
  • 12
  • 16
  • 24
  • 32
  • 40
  • 48
  • 56
  • 64

Bold

Click this button to apply or clear bold formatting.

Italic

Click this button to apply or clear italics.

Underline

Click this button to apply or clear underlining.

Button alignment

Click the arrow on the right side and select an alignment option. Options include:
  • Left align
  • Right align
  • Center

Text color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Text background color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.

Button size

If you selected a rectangular button with text, click this button to select a button size option. Options include:

  • Short (109 pixels width, 40 pixels height)
  • Medium (218 pixels width, 40 pixels height)
  • Long (327 pixels width, 40 pixels height)

The default button size is long.

Button corners

If you selected a rectangular button with text, click this button to adjust how rounded the corners of the button appear.

Drag the slider to one of the notches.

The leftmost side of the slider represents sharp, rectangular corners with no roundedness.

The rightmost side of the slider represents the maximum level of roundedness and gives the button a pill shape.

Progress Bar

Formatting option Description

Progress bar color

  • Use one of the preset colors (white, purple, black, or grey).
  • Use the slider above to adjust opacity.
  • Click the plus sign button to choose a custom color. This opens the custom color picker.
    • Click anywhere inside the ombre rectangle to select a shade.
    • Use the slider to select a different color.
    • Use the up and down arrow buttons to toggle between different options for specifying a color by code. Options include:
      • HEX
      • RGBA
      • HSLA
  • The custom colors you use are automatically saved. The first 20 custom colors are displayed. If more than 20 custom colors are used, the twenty-first color will replace the oldest color.