Two choices in the settings shape the public player: the page layout arranges the player, chapters and transcript, and the player style changes the audio player itself. A shortcode can choose others for one player.
Page layouts
| Layout | Description |
|---|---|
| Classic (default) | The player on top, the chapter list beside the transcript. |
| Sidecar | The player, chapters and search in a column on the left, the transcript alongside. |
| Document | A reading view: a slim player that stays at the top while the page scrolls, with the chapters as headings in the transcript. |
Placement on item pages puts the player after the item's metadata (where plugins add to item pages), or before it, under the item's title. On phones, every layout stacks into one column.
Player styles
Styles apply to audio; video keeps the browser's controls.
| Style | Description |
|---|---|
| Basic (default) | The browser's own audio player. |
| Slate | A full-width dark bar with a large play button and a waveform you can click to seek. |
| Chapter timeline | A progress bar divided by chapter: hover for titles, click to jump. |
| Compact | A slim one-line pill with a small play button, a thin progress line and the times. |
| Card | A card with the file's picture (or the item's first picture, or a pattern), a large play button and the progress line. |
They are layouts, not color schemes: every style reads the same CSS custom properties, so a theme recolors all of them. The player's root element also carries a class such as oral-archivist-player--slate for targeted rules.
Colors from the theme
In the Theme Engine themes (Vitrine, Confetti, Plinth, Overprint) the player takes the theme's colors, light and dark, from its tokens. In other themes it is neutral gray and inherits the theme's fonts. To brand it, redefine the variables in the theme's stylesheet:
.oral-archivist-player {
--oa-accent: #1d4e33; /* current chapter, times, focus */
--oa-accent-bg: #1d4e33; /* filled buttons */
--oa-on-accent: #fff;
--oa-muted: #6f6a5d; /* secondary text */
--oa-border: #ddd6c7; /* rules and rails */
--oa-surface: #f7f3e8; /* panels */
--oa-highlight-bg: #f6efdf; /* current paragraph and chapter */
--oa-bar-bg: #1d4e33; /* the audio bar */
--oa-bar-fg: #fff;
--oa-play-bg: #d9a53a; /* the play button */
--oa-play-fg: #1d4e33;
--oa-wave-played: #d9a53a; /* the waveform, played */
--oa-wave-rest: rgba(255, 255, 255, 0.35);
--oa-pop-bg: #fff; /* footnote popups */
--oa-radius: 10px;
}
The segment pages at /oral-history use the same variables on .oa-segments-page.