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.
   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.