Themes

What Are Themes?

Themes — also called design templates — define the visual appearance of your cBooks. They control fonts, font sizes, accent colors, and the overall layout. Every cBook uses one theme, and you can further customize a theme's look with theme variants.

Where to Find Theme Management

To open the General Settings, click the settings icon on the right side of the top menu bar. Then select Themes in the left sidebar menu (marked with a palette icon). Here you can see all design templates available to your organization.

Browsing Available Themes

The Themes page shows all available design templates as cards. Each theme card displays:

• Theme name
• Author — who created this version of the theme
• Active version — the version number currently in use
• Usage count — how many cBooks are currently using this theme (e.g., "Currently used in 12 cBooks")
• Capability icons — small icons showing what features the theme supports (see below)

You can toggle Show deprecated themes on or off. Deprecated themes are older templates that are no longer recommended for new cBooks but still work for existing ones.

Theme Capabilities

Each theme card shows icons indicating which features it supports. Hover over an icon to see its label:

• Responsive — the theme adapts to different screen sizes
• Quick Favourites — supports the Quick Favourites feature
• Accessibility — designed with accessibility standards in mind
• WYSIWYG Editing — supports visual editing directly in the editor

Customizing a Theme (CSS Editor)

If you're comfortable with CSS, you can extend a theme with your own custom styles. Click the Customize button on a theme card to open the theme editor.

The editor has three tabs:

1. CSS — Write custom CSS to override or extend the theme's default styles. All assets linked from the Master Asset Management folder will be packaged automatically during a SCORM export.
2. Style Formats — Customize TinyMCE style formats (in JSON). These define the formatting options available to authors in the rich text editor.
3. Overwriting Formats — Customize TinyMCE content formats (in JSON). These override the default content formats.

Helpful features in the editor:

• Code validation — the editor checks your code in real time. You'll see a green "Your code is looking good!" message or a red warning if something is wrong.
• Dark Mode toggle — switches the code editor to a dark theme, which can be easier on the eyes for users who prefer a dark editing environment.
• Asset Manager — insert references to uploaded assets directly from the CSS tab.
• Generate Font Face — insert a @font-face template to use custom fonts (available on the CSS tab).
• Multi-user warning — if another user is editing the same theme, you'll see a warning message.
• Unsaved changes warning — if you try to close the editor with unsaved changes, you'll be asked to confirm.

Click Save Changes to apply your edits, or Discard Changes to revert.

Theme Variants

Theme variants let you create alternative versions of a theme's CSS without modifying the theme itself. This is useful when you want a slightly different look for a specific group of cBooks.

Click the Theme variants button on a theme card to open the variant management dialog.

Creating a variant:

1. Click Add variant in the left panel
2. Enter a name for the variant
3. Confirm by clicking the checkmark icon

Editing a variant:

Select a variant from the list on the left. The editor on the right shows two CSS tabs:

• Client — This CSS replaces the custom overrides of the original theme, allowing you to provide entirely different styling for a specific group of cBooks.
• Last CSS — This CSS extends the custom overrides of the original theme. It is the last CSS file loaded by the cBook, so styles here have the highest precedence and override all previous stylings.

You can toggle Dark Mode to switch the code editor to a dark theme for more comfortable editing. Click Save Changes when done.

If you switch between variants or close the dialog with unsaved changes, you'll be asked whether to stay or leave.

Applying a Theme to a cBook

Once themes are set up in the General Settings, authors apply them in each cBook's settings.

1. Open a cBook and go to Settings > Design
2. In the Theme section, choose a theme from the Current theme dropdown
3. Optionally, select a Theme variant from the second dropdown (only available if variants exist for the chosen theme)
4. Click Save

When you change the theme, any previously selected theme variant is automatically cleared, since variants are specific to each theme.

Other Design Options (per cBook)

The Design settings page for each cBook also offers these additional options:

• Logo — Upload a logo that appears in the header of each Slide. You can also set a Logo link target to control which Slide the user navigates to when clicking the logo.
• Background — Set a background image that outlines each Slide within the cBook.
• Cover — Upload a cover image that is displayed in the Dashboard (recommended size: 210px x 140px, 2:3 ratio).
• Icon set — Upload a custom icon set to replace the default icons.

For each of these, you can add an image from the Asset Manager or remove an existing one.

Summary Table