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
In the Touchpoint app, click the arrow beside
Activities and select
Custom Theme.
Result: The Custom Theme page appears.
Click
New theme.
Type a template name and description, and click
Create.
Choose settings for all your theming elements.
When you are finished, click
Apply edits and preview your changes before
saving the theme.
In the upper right corner, click
Save Theme.
Edit a custom theme
On the Custom Theme page, click a theme to
open it for editing.
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.
Toggle between mobile, tablet, and desktop view to preview your
changes.
Select a screen type from the menu to preview your changes.
In the upper right corner, click
Save Theme to save your changes.
Select a theme for your activity
In the Activity Builder, on the toolbar, click
Activity Settings.
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.