One way to customize the look of your interaction is to change the colors or font on your player. It's an easy way to complement design elements in your interaction or match your organization's color and font guidelines.

To change your player's colors or font, you'll need to open the Player Properties window. Click the first tab on the Engage ribbon (its name corresponds to the type of interaction you're using), and then click Player

When the Player Properties window appears, click Colors & Effects

Now you can use any of the following options to adjust the player colors or font. Click OK on the Player Properties window when you're done.

Switching to a Different Color Scheme

The Color scheme selector shows the name of the color scheme you're currently using. The preview area on the right half of the window shows what your player would look like with that color scheme. You can see how different colors would look by choosing different color schemes.

Customizing a Color Scheme

If you want to get very specific about the colors on any element of the player or apply custom colors that aren't available in the ready-made color schemes, you can customize your own color scheme. Here's how:

  1. Click Show advanced color editing. Some additional options will appear on the window.
  2. Use the Edit item drop-down to choose the part of the player you want to change. Need some help identifying which item is used for which part of the player? Here's a quick-reference diagram.
  3. Use the Color selector(s) to choose a new color. If you see both a Top color and a Bottom color, it means the color for the item you chose is a gradient composed of two colors. Note: The color selector shows several theme colors and standard colors. If you don't see the color you want, click More Colors to open a window where you can choose a specific color value. If you choose More Colors, a window opens where you can do one of the following to pick your color:
    • Click on the color you want (either a square color swatch or a color in the spectrum area).
    • Or, create a custom color by entering color values in the Hue/Sat/Lum fields, the Red/Green/Blue fields, or the Html field.
    • Or, use Engage's color picker to choose a custom color from anything viewable on your screen. To do that, click the eyedropper button in the lower-right of the window, hover over any area of your screen, and click to choose a color. If the color you've chosen is something you want to save for easy selection later, click Add to Custom Colors. The color will get added to the bank of Custom Colors in the lower left corner of the window.

      Click OK to close the Colors window when you're done.
  4. If you want to apply a transparency to the item you're editing, enter a value in the Transparency field.

Resetting a Modified Color Scheme

Any time you make changes to a color scheme, the name in the Color scheme field changes to include the phrase "(in project)" after the scheme name. If you've made some changes and want to revert back to the colors you previously used, click the Reset button.

Saving Custom Color Schemes

A modified color scheme becomes part of your project file. However, it won't be available for other projects unless you save it separately. To save a custom color scheme, click the Save button and give it a name. Then click OK.

When you save a custom color scheme, Engage adds it to the options in the Color scheme selector for any other interactions you build. The color scheme file gets stored in the following directory, depending on your version of Windows:

  • Windows Vista or later:
    C:\Users\%username%\AppData\Roaming\Articulate\Shared\3.0\Frames\StoryFrame\ColorSchemes
  • Windows XP:
    C:\Documents and Settings\%username%\Application Data\Articulate\Shared\3.0\Frames\StoryFrame\ColorSchemes

Deleting a Color Scheme

To remove a color scheme, select it from the Color scheme selector, and then click the red X. The deleted scheme will no longer appear in the Color scheme selector. If you delete a color scheme that was previously applied to another interaction, it won't be removed from that interaction—it'll just be stored within that particular interaction file.

Changing the Page Background Color

Page background refers to the color that appears behind the player when learners view your published content. Depending on their browser size and the size of your published interaction, learners may see this color around the perimeter of your player. If you've made the base portion of your player fully or partially transparent, the page background color will show there, too.

To choose a color for your interaction's background, use the Page background selector. The choices are determined by a color palette from your interaction's Theme Colors as well as some Standard Colors. If you don't see a color you like, click More Colors then use the Colors window as explained above.

Customizing the Player Font

To change the font for player elements—like buttons and prompts—use the Player font selector. Just like other player customizations, your new font selection will appear in the Preview area on the right side of the window.

Saving Your Changes to the Player

If you click OK on the Player Properties window and then save your interaction, Engage saves your player customizations within your interaction file. We recommend saving your player separately, so that you can easily apply your player customizations to other interactions.

To save your player, click the Current Player button on the Player Properties window and choose Save. Enter a name for the player if you're prompted, and click OK.

For more about using the Current Player options, see Saving Your Player or Switching to a Different One.