---
title: "Design and theme"
description: "Set colors, fonts and rounding for the whole course, choose a design template, set up the course player and the course properties."
canonical_url: "https://docs.ols.yonn.online/en/build/design-and-theme"
---
# Design and theme

> Set colors, fonts and rounding for the whole course, choose a design template, set up the course player and the course properties.

The **design** (also called theme) gives your whole course a consistent look: the same colors, fonts and rounded corners on every slide. Change it once and every slide follows. This page covers:

- **The Design window**: templates, colors, fonts and corner radius.
- **Replacing fonts** in the whole course.
- **The player**: the frame around your slides with menu, buttons and progress.
- **Course properties**: title, author and language.

![The Design window with the templates Standard, Workshop, Forest, Ocean, Night and Classic, the nine colors, fonts and a live preview](https://docs.ols.yonn.online/screenshots/en/design-and-theme-design-dialog.png)

## Give your course a new look in 3 steps

<procedure>

### Open the design

Click <ui-path path="Design > Design">



</ui-path>

. The **Design** window opens with a preview on the right.

### Pick a template

Under **Templates**, click one of **Standard**, **Workshop**, **Forest**, **Ocean**, **Night** or **Classic**. Colors, fonts and rounding change at once.

### Adjust and close

Change single colors or fonts if you like. The preview shows headings, text, buttons and answer feedback. Click **Done**.

</procedure>

## The Design window

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Templates
      </strong>
    </td>
    
    <td>
      One click sets colors, fonts and rounding at once. Afterwards you can adjust everything.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Primary
      </strong>
    </td>
    
    <td>
      Main color, for example for buttons like "Next".
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Secondary
      </strong>
    </td>
    
    <td>
      Second color, for example for "Back" or borders.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Accent
      </strong>
    </td>
    
    <td>
      For highlights such as icons and markers.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Background
      </strong>
    </td>
    
    <td>
      Background of the slides.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Surface
      </strong>
    </td>
    
    <td>
      Surfaces and tiles on the slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Text
      </strong>
    </td>
    
    <td>
      Normal text color.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Muted
      </strong>
    </td>
    
    <td>
      Softer tones for hints and subtitles.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Correct
      </strong>
      
       and <strong>
        Incorrect
      </strong>
    </td>
    
    <td>
      Colors of the feedback for right and wrong answers.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Headings
      </strong>
      
       and <strong>
        Body text
      </strong>
    </td>
    
    <td>
      The two fonts of the course. They apply to all text where you haven't chosen your own font.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Corner radius
      </strong>
    </td>
    
    <td>
      How round buttons, tiles and shapes are. 0 is square.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Preview
      </strong>
    </td>
    
    <td>
      Shows your choice live.
    </td>
  </tr>
</tbody>
</table>

<hint-box kind="note" title="Your own changes stay">

Design changes apply at once to all slides that still use the design values. Colors, fonts and rounding you set by hand on single objects are kept. To bring an object back to the design, right-click it and choose **Reset to design**.

</hint-box>

<hint-box kind="tip" title="Good contrast">

Keep text dark on a light background (or the other way round), with a contrast of at least 4.5 to 1. Make **Primary** and **Secondary** dark enough for white text. Never use color alone to show something important.

</hint-box>

## Replace a font everywhere

<ui-path path="Home > Fonts">



</ui-path>

 replaces one font with another in the whole course, for example after you changed your house font. Your own fonts (WOFF, WOFF2, TTF, OTF) must be uploaded to the [media library](https://docs.ols.yonn.online/en/build/media) first.

## The player

The **player** is the frame learners see around your slides: the menu on the side, the buttons at the bottom, the progress. Open its settings with <ui-path path="Home > Player">



</ui-path>

 or <ui-path path="View > Player">



</ui-path>

.

![The Player window, tab Features, with the switches for sidebar and control bar](https://docs.ols.yonn.online/screenshots/en/design-and-theme-player.png)

### Features

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Show sidebar
      </strong>
    </td>
    
    <td>
      The side panel with menu, resources and glossary. On phones it opens as a drawer. <strong>
        Position
      </strong>
      
      : <strong>
        Left
      </strong>
      
       or <strong>
        Right
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Menu
      </strong>
    </td>
    
    <td>
      The list of slides, sorted by scene. From 6 slides on it has a search.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Resources
      </strong>
    </td>
    
    <td>
      Links and files for reference.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Glossary
      </strong>
    </td>
    
    <td>
      Technical terms with explanations.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Notes
      </strong>
    </td>
    
    <td>
      Slide notes as a transcript.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Course title
      </strong>
    </td>
    
    <td>
      Title bar above the slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Play / pause
      </strong>
    </td>
    
    <td>
      Learners can pause the slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Volume
      </strong>
    </td>
    
    <td>
      Mute and volume slider.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Captions
      </strong>
    </td>
    
    <td>
      Switch for the captions of videos, audio and narration.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Back / next
      </strong>
    </td>
    
    <td>
      The navigation buttons. The arrow keys only page when this is on.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Full screen
      </strong>
    </td>
    
    <td>
      Hidden automatically on iPhone.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Progress indicator
      </strong>
    </td>
    
    <td>
      Shows "Slide 3 of 12".
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Playback speed
      </strong>
    </td>
    
    <td>
      Learners choose 0.75x to 2x.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Accessibility menu
      </strong>
    </td>
    
    <td>
      Text size, reduced motion, clear focus, captions and keyboard shortcuts.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Submit button in the control bar
      </strong>
    </td>
    
    <td>
      For freeform questions without their own submit button on the slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Timeline
      </strong>
    </td>
    
    <td>
      The slide's progress bar: <strong>
        Hidden
      </strong>
      
      , <strong>
        Display only
      </strong>
      
      , <strong>
        Draggable
      </strong>
      
       or <strong>
        Draggable after the slide is complete
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>

### Other tabs

<table>
<thead>
  <tr>
    <th>
      Tab
    </th>
    
    <th>
      What you set there
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Navigation
      </strong>
    </td>
    
    <td>
      Which slides learners can reach in the menu: <strong>
        Free
      </strong>
      
       (all, any time), <strong>
        Restricted
      </strong>
      
       (visited slides and the next one) or <strong>
        Locked
      </strong>
      
       (only through the course's own buttons). <strong>
        Resume on restart
      </strong>
      
      : <strong>
        Ask
      </strong>
      
      , <strong>
        Always resume
      </strong>
      
       or <strong>
        Never resume
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Appearance
      </strong>
    </td>
    
    <td>
      <strong>
        Scaling
      </strong>
      
       (<strong>
        Fit to window
      </strong>
      
       or <strong>
        Fixed size
      </strong>
      
      ), <strong>
        Color scheme
      </strong>
      
       (<strong>
        Light
      </strong>
      
       or <strong>
        Dark
      </strong>
      
      ), <strong>
        Accent color
      </strong>
      
       and a <strong>
        Logo
      </strong>
      
       at the top of the sidebar.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Texts
      </strong>
    </td>
    
    <td>
      Every text of the player, for example for another language or your own tone. Empty fields show the default.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Resources
      </strong>
    </td>
    
    <td>
      Links and files (PDFs from the media library) that learners can open in the sidebar any time.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Glossary
      </strong>
    </td>
    
    <td>
      Terms and definitions learners can look up.
    </td>
  </tr>
</tbody>
</table>

Single slides can override these settings under **Player on this slide** in the slide's Format tab, for example to hide Next until a task is solved. Learners can also use the player with the keyboard: <key-combo keys="Space">



</key-combo>

, the arrow keys, <key-combo keys="C">



</key-combo>

, <key-combo keys="M">



</key-combo>

, <key-combo keys="F">



</key-combo>

 and <key-combo keys="?">



</key-combo>

.

## Course properties

<ui-path path="View > Course">



</ui-path>

 opens the basic details of your course.

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Title
      </strong>
    </td>
    
    <td>
      Shown in the player and as the name of the course package in Moodle.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Description
      </strong>
    </td>
    
    <td>
      An internal note for you and your team. Learners don't see it.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Author or organization
      </strong>
    </td>
    
    <td>
      Optional.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Language
      </strong>
    </td>
    
    <td>
      The language of your course texts. Helps screen readers and controls hyphenation and date format. It does not translate anything.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Allow JavaScript
      </strong>
    </td>
    
    <td>
      Only needed for triggers with "Run JavaScript". See <a href="https://docs.ols.yonn.online/en/interact/triggers-and-variables">
        Triggers and variables
      </a>
      
      .
    </td>
  </tr>
</tbody>
</table>

## If something doesn't work

<table>
<thead>
  <tr>
    <th>
      Problem
    </th>
    
    <th>
      What to do
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      A design change doesn't affect some objects
    </td>
    
    <td>
      Their colors or fonts were set by hand. Right-click them and choose <strong>
        Reset to design
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      My own font is missing in the list
    </td>
    
    <td>
      Upload the font file to the media library first.
    </td>
  </tr>
  
  <tr>
    <td>
      Learners can't jump around in the menu
    </td>
    
    <td>
      <strong>
        Navigation
      </strong>
      
       is set to <strong>
        Restricted
      </strong>
      
       or <strong>
        Locked
      </strong>
      
      . Choose <strong>
        Free
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      The menu or glossary doesn't show in the player
    </td>
    
    <td>
      Check the switches in the <strong>
        Features
      </strong>
      
       tab, including <strong>
        Show sidebar
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      The course title in Moodle is wrong
    </td>
    
    <td>
      Change <strong>
        Title
      </strong>
      
       in the course properties and publish again.
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.