Creating Custom Themes and Templates

Moving Beyond Fragmented Design

The End of 'Version Drift'

In Articulate 360, branding is often fragmented across separate .story files and Rise themes. If your brand changes, you must update every file manually. Claro uses a cloud-native architecture to centralize design.

Welcome! In this lesson, we'll explore how to create reusable themes and templates. In traditional desktop tools, branding is often trapped inside individual project files. This leads to version drift where different courses look slightly different. With Claro, we move to a centralized design architecture where one theme can control the look of your entire library.

The Theme Designer

Dynamic Global Styles

The Theme Designer is a standalone tool. It defines the 'skin' of your project, including fonts, colors, and player elements. Unlike Storyline, these styles are not locked inside one project.

Think of the Theme Designer as your brand's DNA. It exists outside of your projects. When you define a color palette or a button style here, it becomes a global variable. If you change a font in the Designer, you can push that update to every single project using that theme in seconds.

The Design Hierarchy

Themes, Master Pages, and Baselines

To build efficiently, you need to understand the relationship between these three core elements.

There is a clear hierarchy to design in Claro. First, the Theme provides the colors and fonts. Next, Master Pages define recurring elements like headers and footers. Finally, a Baseline Project combines these into a complete skeleton that your team can use to start any new course.

Scenario: The Instant Rebrand

The Power of Global Variables

Your company has rebranded! Change the primary brand color from Blue to Green and see what happens to the project library.

Let's put the cloud-native model to the test. Here is your current library of three courses, all using the 'Corporate Blue' theme. Your brand just updated to 'Eco Green.' Click the color swatch to update the theme. Watch that! Because all three projects were linked to that one dynamic theme, they all updated simultaneously. You just saved hours of manual work.

Creating a Reusable Theme

Step-by-Step: Theme Creation

  1. Open Theme Designer.
  2. Select a Base Theme.
  3. Set Global Styles (Colors, Fonts).
  4. Configure the Player Interface.
  5. Save and name your theme.

Creating a theme is straightforward. First, open the Theme Designer and pick a base like 'Modern.' Apply your brand colors and typography. Then, decide which player elements, like the menu or search bar, should be visible. Give it a name, and it's ready for the whole team.

Publishing a Baseline Project

Standardizing Your Workflow

A Baseline is your master template. It ensures every project starts with the correct structure and settings.

Once you have your theme, you'll want to create a Baseline Project. Build a 'skeleton' with your standard pages. Apply your new theme. Finally, in the project settings, click 'Set as Baseline.' Now, whenever a colleague starts a new project, your approved template is their first option.

Troubleshooting the Rebrand

Why did it fail?

You updated the Global Theme to Green, but the 'Welcome' page in Project B is still Blue. Diagnose the issue below.

Uh oh. You've pushed a brand update, but one page is refusing to change. Look at the settings for this specific text block. Why do you think it didn't update with the rest of the project? Type your diagnosis and submit.