E-SEC Authoring Support

Appearance

Content styles ​

Content styles is where a course's look is decided: the two fonts it uses everywhere, the default style of its subtitles, and reusable blocks of CSS you can apply to individual text components. You'll find it in the editor under Course Content → Content Styles.

Everything here is per course. There's no global setting across your library — a new course starts from the defaults, and you adjust it if you want something different.

Fonts ​

A course uses two fonts, and every piece of text in it takes one of them:

  • Heading font — the h1–h6 headings in text components, and the headings in the course menus.
  • Body font — everything else: body text in components, menu text, and the subtitles on a video.

Five typefaces are available: Lato, PT Sans, Open Sans, Open Sans Condensed and Vollkorn. The description beside each selection is shown in the font itself, so you can compare them before choosing.

INFO

Subtitles follow the body font. If you change it, subtitle text changes with it — the subtitle style controls colour and contrast, not the typeface.

Subtitle style ​

Sets which of the four subtitle styles a course uses by default — light or dark text, with or without a high-contrast bar behind it.

It applies to every subtitle in the course. A single cue can be given a different style in the subtitle editor when the footage under it calls for one, which is the exception rather than the rule.

Style sets ​

A style set is a named block of CSS you write once and apply to as many text components as you like. Every course starts with four of them:

  • Textbox-Light and Textbox-Dark — a padded, rounded panel behind the text, light grey or dark grey.
  • Button-Light and Button-Dark — centred text on a rounded, shadowed background that changes colour as the learner hovers over it, so a plain text component reads as a button.

These are just a starting point: edit them to suit the course, duplicate one to build your own, or delete the ones you don't use. A component with no style set shows plain text in the course's fonts.

Writing one. Give it a name and its CSS. Every selector has to start with .text-component, which is what ties the rules to the component the set is applied to:

css
.text-component {
	background-color: #e5e5e5;
	color: #111;
	border-radius: 7px;
	padding: 15px;
}

.text-component h2 {
	text-transform: uppercase;
}

A preview beside the CSS updates as you type, so you can shape a set before applying it anywhere.

Applying one. Text components — Markdown and HTML — carry a Style Set setting in their properties, set to None until you choose one. Other components (images, videos, icons) don't take style sets.

WARNING

Deleting a style set also removes it from every component it was applied to, and those components fall back to the course's plain text styling. There's no undo, so on a set used widely it's worth checking what it's applied to first.

When something looks off ​

  • A style set has no effect. Check that its selectors start with .text-component — rules that don't are ignored — and that the component itself has the set chosen in its properties.
  • A component can't take a style set. Only text components can. For images, videos and icons, style them with their own properties instead.
  • Subtitles don't match the course font. They follow the body font, so a course whose body font has changed shows subtitles in the new one. Colour and contrast come from the subtitle style, not from fonts or style sets.

See also ​