Contents

Design and the player

Site Settings ▸ Design sets the look of the player pages. Site Settings ▸ Player sets the controls and the colours of the player. Open Site Settings from the gear in the Library toolbar, or with Kitset ▸ Site Settings… (⌥⌘,).

Each tab keeps your changes until you click Save in the bar at the bottom. Revert discards them. A save of one tab does not save the other. Every Mac of the site sees the saved settings.

The Design tab of Site Settings

Templates

The Template menu has four choices.

Template Look
Automatic Light or dark, as the viewer’s device is set.
Light Always light.
Dark Always dark.
Custom Your own HTML file. See Custom templates.

The three built-in templates share one simple layout, with the video in the middle. Only their colours are different. The home page and the sign-in pages use the colours of the built-in template that you choose. With a custom template, they use the colours of Automatic.

Fonts

The pages use the Inter font by default. You can choose a font for each use:

  • Text font: the text of the pages.
  • Heading font: the titles, the link to the home page and the player controls. It is the same as the text font by default.
  • Tooltip font: the tooltips of the player controls. It is the same as the heading font by default.

The menus offer the fonts that your site has: Inter, a font in your bucket, and the fonts of your stylesheets. A character that a font does not have shows in Inter.

A font from Google Fonts

  1. Find a family on fonts.google.com.
  2. Next to Google Fonts, click Import…, and enter the name of the family with the same capitals, for example “Source Serif 4”.
  3. Click Download, then Save.

Kitset downloads the font and copies it to your bucket. So your viewers make no connection to Google.

Your own font files

Click Import Font Files…, and choose the files of one family: WOFF2, WOFF, OTF or TTF. Kitset reads the family name from the files. Then click Save.

Anyone can download the font files from your site. Import font files only when their licence allows use on the web.

The bucket holds one font. A new import replaces it, and it becomes the text font. Remove removes the font.

Stylesheets

A stylesheet from another site can give the pages a font, for example from Adobe Fonts, or change their look. Paste a <link> element, an @import rule or an address that starts with https:// into the field, and click Add. Kitset reads the stylesheet at once, and its fonts appear in the font menus.

  • The pages load your stylesheets after their own styles, so your rules win.
  • Viewers connect to the sites of the stylesheets. The sign-in pages do not load them.
  • A stylesheet cannot run a script. For scripts, use a custom template.

An Adobe Fonts kit needs its own Adobe subscription, and the terms of Adobe do not allow a copy of its files in your bucket.

Visit Site

Visit Site opens the page of your newest video in your browser. It shows the saved settings, not the changes that you have not saved yet.

The player

The Player tab of Site Settings

Playback

  • Autoplay starts the video when the page loads. Browsers allow this only for a video with no sound, so Muted turns on with Autoplay.
  • Muted starts the video with no sound.
  • Loop plays the video again from the start when it ends.

Controls

Control Bar and Overflow Menu each have a list of controls. Click Edit… to turn controls on or off, and drag them into a new order. Then click Done.

By default, the player uses its own lists for each kind of device: a computer, a phone, a tablet and a TV. The default control bar of Kitset also has a Subtitles button. A list that you change applies on every device. Reset to Defaults goes back to the default lists.

Controls that a video cannot use stay hidden, for example Subtitles for a video with no tracks.

  • Big play button: Default shows a big button on phones, tablets and TVs only. Always and Never do the same on every device.
  • Playback speeds: the speeds in the speed menu. The default is 1×, 1.25×, 1.5×, 2× and 3×.
  • Show tooltips: the names of the controls when a pointer is over them. Phones and TVs never show them.

Colours

Seek Bar Colours sets the colours of the part that played, the part that is buffered, and the part that is not buffered.

Control Colours sets:

Colour What it colours
Controls The icons, the time and the text of the tooltips.
Button background The shape under each button, the shadow behind the time, and the background of the tooltips.
Bottom fade The shade at the bottom of the player, under the controls.
Menu background The overflow menu, the settings menus and the context menu.
Menu text The text in those menus.

Each control has a soft shape under it by default, so the controls are easy to read over a bright video.

Reset all player options

Reset to Defaults… under All Player Options resets every option of this tab. It also removes options that a person added to the settings file by hand. The pages change when you save.