Storyline 3: Using Text Styles

Use text styles in Storyline 3 to control the visual appearance of text elements, such as paragraphs and headings. Simply format each style with font and paragraph options so they look the way you want, and reuse the styles throughout your course for a consistent design.

Text styles are great for experimenting with different fonts, colors, sizes, spacing, etc. When you update a style, Storyline 3 applies the changes to your entire project instantly.

Text styles also play an important role in accessibility by making courses easier to navigate with a screen reader.

• Getting Started
• Defining Styles
• Creating Custom Styles
• Renaming Custom Styles
• Applying Styles
• Resetting Styles
• Reusing Styles

Getting Started

You need Storyline 3 build 3.12.24693.0 or later to use text styles. We recommend using the latest build for all the newest enhancements, including:

• Accessible text styles
• Custom text styles

• Hyperlink states

If you’ve used text styles in other apps, like Microsoft Word or Google Docs, you’ll find they work much the same way in Storyline 3. Define your styles and apply them to blocks of text in your project. It’s that easy. Let's get started by talking about style definitions, style previews, how to identify applied styles, and where styles are stored. 

Style Definitions

Storyline 3 has six built-in text styles, as defined here and shown below:

• Normal text is the default style for all text. You’ll typically use this style for body text in your project.
• Headings 1-4 add hierarchy and structure to your content. For example, you might use Heading 1 for slide titles and Heading 2 for subtitles. You could also use Heading 3 and Heading 4 to organize lengthy text in scrolling panels or call out important content on the slide.
• Hyperlink defines the default states for linked text—normal (unvisited), hover, active, and visited.

You can also create an unlimited number of custom text styles for other elements, including blockquotes, button labels, image captions, speech bubbles, and more. It's your choice!

Style Previews

The Text Styles drop-down list gives you a preview of what each style looks like. The previews update as you modify the styles. And if you’re using a dark background color with light text, the Dark 2 background color from your theme colors appears in the previews, too, as shown above.

Storyline 3 also supports live (real-time) previews of text styles for the selected text. Simply hover over your styles in the ribbon drop-down list to see how the selected text looks with each one.

How to Identify Applied Styles

You can always tell which style is applied to a block of text by placing your cursor in the text and looking at the Text Styles button on the ribbon. It displays the style that’s currently in use. (Hyperlinked text displays the style from which it inherits its font face and size attributes.)

Here’s another way to tell which style is currently in use. Place your cursor in the text and click Text Styles. A check mark identifies the text style applied to the text.

Get details about each text style by glancing at its sub-menu in the ribbon drop-down list. The sub-menu header displays the style name, HTML tag (for improved screen reader navigation), font, size, and decoration.

Styles & Design Themes

Text styles are saved with the design theme in each project file. If you use more than one design theme in a project, each theme has its own set of text styles. Learn more about design themes and reusing text styles.

Defining Styles

 

Follow these steps to define each of your text styles.

1. Format a block of text with font and paragraph options so it looks the way you want. (The Hyperlink style is more flexible than other styles. It doesn't include the font face, size, and paragraph properties of your selected text. Hyperlinks inherit those attributes from other text styles.)
2. Go to the Home tab on the ribbon and click Text Styles. You’ll see a check mark and an asterisk next to the style that’s currently applied to your text (Normal Text is the default style). The asterisk indicates that the style has been modified for the selected text.
3. Mouse-over the style you want to update with your formatting changes, then click Update style from selection on the sub-menu that appears. The style you choose to update automatically gets applied to your selected text. You don’t have to update the style with the asterisk beside it. You can update and apply any text style.

Tips & Time Savers

• If the option to Update style from selection is grayed-out, it means you selected the bounding box of the text object, and the object has more than one text style applied to it (you can have one style per paragraph). Place your cursor in one of the paragraphs to enable the update option.
• Text styles store all font and paragraph formatting options except bullets, numbering, and text direction. You’ll need to manually add bullets, numbering, and text direction where you want them. (Indents get stored in text styles unless they’re part of bullets or numbering.)
• Want to change the font for all your text styles all at once? Go to the Design tab on the ribbon, click Fonts, and choose a different set of theme fonts. The heading theme font is the basis for all heading text styles, and the body theme font is the basis for the other text styles.
• You can redefine your text styles as many times as you want. It’s a great way to experiment with different designs. If some text in your project doesn’t change when you update its style, it means you previously overrode the style with custom formatting for that particular object or slide. For example, let’s say your Normal Text style has a font size of 14, and you manually change the font size to 18 on one slide. Later, you decide to update the style with a font size of 16. Most of the text in your project will automatically update to a font size of 16, but that one slide will continue to use a font size of 18. If you want that slide to match the others, just reapply the text style to it. (Exception: If you override hyperlink formatting on a slide in your course and later want it to match your Hyperlink style, select the linked text, go to the Home tab on the ribbon, and click Clear Formatting.) 

Modifying Hyperlink States

You can easily define the normal (unvisited) state for hyperlinks using the "update style from selection" method described above. And since hyperlinks are interactive, you can customize the hover, active, and visited states too. Here's how.

1. Place your cursor in any text box, click the Text Styles button on the ribbon, scroll to Hyperlink, and select Modify.
2. Click each of the state tabs on the window that appears, as shown below, and then select a Text Color and Decoration. Here are some helpful tips for customizing hyperlink states:
• The default text color for the normal state comes from the Hyperlink color in your theme colors. You can override the theme color by choosing a different text color for the normal state.
• By default, the colors of the hover and active states are variations of the normal state, and they stay in sync when you change the normal state color. For example, if you change the normal state text color to red, the hover and active states become lighter shades of red. However, you can override the default behavior and choose any colors you'd like for the hover and active states.
• The Hyperlink style is more flexible than other text styles. It doesn't include font face, size, or paragraph properties. Hyperlinks inherit those attributes from other text styles. For example, if a hyperlink is in a paragraph of normal text, the link inherits the font face, size, and paragraph properties of the Normal Text style plus the colors and decorations of the Hyperlink style.
3. Click OK to save your changes.

Creating Custom Styles

You can create as many custom styles as you want. Create custom styles for every text element, such as blockquotes, button labels, image captions, and speech bubbles. You can even create light and dark versions of styles for different backgrounds in a course. 

1. Use the font and paragraph properties to format text on a slide the way you want it to appear, then place your cursor in the formatted text.
2. Go to the Home tab on the ribbon, click Text Styles, and select Add Style at the bottom of the list.
3. Enter a Name for your custom style, as shown below.
4. Choose how Storyline 3 should identify your custom style to screen readers. You can select Normal Text (<p>), Heading 1 (<h1>), Heading 2 (<h2>), Heading 3 (<h3>), Heading 4 (<h4>), or Blockquote (<blockquote>) from the Publish as drop-down list. (Learn more about accessible text styles.)
5. Click OK.

Renaming Custom Styles

Rename custom styles so they’re easy to identify as your list of styles grows. 

1. Place your cursor in any text box on the slide.
2. Go to the Home tab on the ribbon, click Text Styles, scroll to the style you want to rename, and click Modify from the sub-menu that appears.
3. Enter a new Name, as shown below.
4. Click OK.

Applying Styles

It’s a snap to apply styles. Place your cursor in a block of text or select its bounding box. Then go to the Home tab on the ribbon, click Text Styles, and choose a style from the list. That’s it! (Pro Tip: The Hyperlink style automatically gets applied when you add a hyperlink trigger to text.)

Tips & Time Savers

• You can save time by applying text styles to your slide master and feedback master first. Then, if you need to override a text style on a specific slide in your course, you can manually edit the text on that slide directly.
• If you override a text style on your slide master with special formatting (e.g., font size or color), that formatting will carry over to the content slides in your course, and the tooltip for that style will include “Modified by Slide Master” as a reminder.
• Each paragraph in a text box can have a different text style. In other words, you can apply more than one style to the same text box—one style per paragraph or line of text.
• When you copy text from one slide and paste it onto another slide that has a different design theme, the pasted text has the same style (Normal, Heading 1, etc.) as the original, but it could look different from the original, depending on how you paste it. If you press Ctrl+V or click the Paste button on the ribbon, the pasted text keeps the original formatting. If you select Use Destination Theme from the right-click menu or the Paste drop-down list on the ribbon, the pasted text matches the destination theme instead.

Resetting Styles

You can reset a style to its default formatting when you want to start over or when you need to make your project file compatible with older versions of Storyline 360 and Storyline 3 that don’t support text styles. (Learn more about compatibility.)

1. Place your cursor in a text box.
2. Go to the Home tab on the ribbon and click Text Styles.
3. Mouse-over the style you want to reset and choose Reset style from the sub-menu that appears.

Reusing Styles

Text styles are saved with the design theme in each project file. A project can have more than one theme, and each theme has its own set of text styles. Here are a few ways to reuse your text styles in other themes or projects.

Save Your Custom Theme

Easily reuse text styles in other projects by saving your custom design theme and applying it to the other projects. (Want to change your default design theme for new projects? Here’s how.) 

Create a Storyline Template

Since text styles are part of the design theme, you can create a custom Storyline template, and then use the template to start new projects or add slides to existing projects.

Paste Text with Source Formatting

Use this method when a project has multiple design themes. Since each theme has its own text styles, you need to format each theme’s styles separately. If you want to reuse the same styles across multiple themes, try this:

1. Go to a slide that has the text styles you want to reuse and create a text box with multiple lines of text. (You can delete this text box later.)
2. Apply each of your text styles to a different line of text.
3. Copy the text box.
4. Go to a slide where you want to reuse the text styles.
5. Press Ctrl+V or go to the Home tab on the ribbon and click Paste. This keeps the source formatting.
6. Place your cursor in the first line of text, click Text Styles on the ribbon, scroll to the style with the asterisk, and choose Update style from selection on the sub-menu that appears.
7. Repeat the previous step for the other six styles.

Tip: If you import a slide into your project and define text styles for it, you’ve effectively customized the design theme for that slide. If you later import another slide from the same source, the new slide won’t have your custom text styles since it has the original, unmodified design theme. You can follow the steps above to copy your text styles to the new slide, or you can apply your custom design theme to the new slide.