Customizing Content Using Themes

Create a unified look between your website, marketing materials, and the content you build in Ingage with an on brand Theme.

Contents

Creating & Editing Themes
Applying Your Theme to Ingage Content

Creating & Editing Themes

To edit an existing Theme:

1. In the left sidebar in the Ingage App, click Themes
2. Click the three dots in the lower right corner of the Theme you'd like to edit
3. From the menu, click Edit

To create a new Theme:

1. In the left sidebar in the Ingage App, click Themes
2. In the top left of this screen is an empty rectangle with a green plus button, click here to create a new Theme

To customize your Theme:

1. When creating a new Theme it can be helpful to have your company's brand guidelines, website, or another form of marketing collateral pulled up on the same screen
2. In the main Canvas area of the Theme editor you can see all of the values that can be manipulated, once you select a value by clicking on it, it will be surrounded by a thin green line and the tools to edit this value will appear in the Inspector panel on the right sidebar

When Editing or Creating a Theme, you can configure the following values

Page Background

Select the default background color for your pages

Text Styles for Title, Heading, Body, and Caption

Select the font, style, and size for different hierarchal text needs. Best practices include using only one or two fonts in a single theme, using bold styles for things like Title and Heading, and medium, regular, or light styles for Body and Caption

Pop-Up Style

While updating styles in the right sidebar, you can preview the styles you're selecting out on the canvas

Corner Radius
Make the edges of your pop-up round or sharp

Shadow
Add a drop shadow for extra dimension around your pop-up

Navigation
If Close Button is selected, an X will be visible in the upper right corner of your pop-ups to indicate how to close out
If Close Button is not selected, you will close out of your pop-ups by clicking on the background of the page
If Show Scrim is selected, the background of your page will go dark when a pop-up is active
If Show Scrim is not selected, the background of your page will be the same brightness as the active pop-up
Close Button Icon Color allows you to select the color of the X
Close Button Background Color allows you to add a circle behind the X that can be a Solid Color, Blur, or Gradient

Color Palette

Your Color Palette will include all the colors for your Text styles, Theme Colors, and other Solid Colors you'll have easy access to while designing your presentation

To customize your Color Palette

1. Click on the Color Palette in the upper right corner of the Canvas
2. In the right sidebar, delete any colors you don't need in your theme by right clicking on the colored circle and clicking Delete
3. To add a new color to the palette, click the green plus button to the right of any existing colors
   1. Enter the HEX code of the background color you'd like to use OR
   2. Click on the color swatch to the left of the HEX code to pull up the color picker for three other ways to select a custom color
      1. Enter the RGB values for the color you'd like to use
      2. Use the rainbow slider to select the color hue, and the color window above the slider to select the color shade
      3. Click the eyedropper tool to the left of the rainbow slider to select a color from someplace else on your desktop, like your company's website or a picture you like the colors in
4. Click Save in the color picker in the right sidebar once you've selected your color

Theme Colors

Using Theme Colors in your presentation make it easier to retheme your content down the line, and the colors you select here will be the ones that quickly populate when applying your Theme to content you install from the Ingage Marketplace

Primary & Accent Colors
These colors will appear most often as background colors in shapes, text boxes, and buttons

Primary & Accent Pairing Colors
These colors will appear most often as text colors on top of the Primary & Accent Colors

When selecting pairing colors, be mindful of the contrast to ensure legibility, the following website can be a helpful place to test contrast between colors that will often be layered together: https://webaim.org/resources/contrastchecker/

Button Styles

Text Button
Text controls the font, style, and size of the text on a Button
Text Color controls the text color on a Button
Background controls the color of a Button
Corner Radius allows you to make Button edges more round or sharp

Point of Interest
Choose Icon allows you to select a default Icon for new Points of Interest, without a default Icon selected, the Icon will default to represent the Action
Icon Color controls the color of a Point of Interest
Background allows you to add a circle behind the Icon that can be a Theme Color, Solid Color, Gradient, or Blur 

Nav Bar
The Nav Bar will be visible throughout your whole presentation

Background Style controls the color of the bar itself, which can be a light or dark blur, or a solid color
Label Text Color controls the text color of your Section Titles
Selected Section Color controls the color that highlights the Section you are actively presenting from
Selected Section Text Color allows you to change the color of the Section Title when it is selected
Button Tint Color controls the color of the other navigation buttons like back and forth, share, etc. in the Nav Bar

Applying Your Theme to Ingage Content

To apply your theme to a piece of content in Ingage:

1. In the Ingage App, enter Edit Mode on a presentation by clicking the three dots in the lower right corner of a presentation thumbnail and clicking Edit
2. From your Storyboard, navigate to the right side panel and locate the Theme section
3. The Theme section of the side panel will include a thumbnail of the current theme, the current theme's title, a description of what themes do, and the words Change Theme in green
4. Click Change Theme
5. In the Theme Picker, click on the Theme you'd like to apply
6. Back in the Storyboard, a pop-up will ask if you'd like to apply the theme, click Apply