Templates and styles

A template is a reusable graphic: a lower third, a ticker, a scoreboard. It has fields for the content (name, title, photo) and variables for the look (colors, fonts, sizes). To show a template on air, you add it to a screen as a layer (see Control).

A style is a design that every built-in template comes in, such as Minimal, News or Frame. Pick one style for the project and all your built-in graphics match.

Create a template

1. Click Templates in the sidebar (Ctrl+2).
2. Click New template.
3. Pick a style chip at the top to see every template in that style, or leave it on All.
4. Hover over a card to see a live preview with sample content.
5. Click a card, check the Name at the bottom and click Create. You can also double-click a card.

The template opens in the editor. It is saved in your project’s templates/ folder.

Built-in templates

Template	What it is
Lower third	A name strap with label, title, photo and logo.
Full-screen title	A large title card with a kicker and subtitle.
Corner bug	A small corner tag for a channel or event.
Ticker	A bottom strap with items scrolling in a loop.
Now & Next	What’s on now and up next, with a countdown.
Sponsor slideshow	One sponsor logo at a time, with its name, a transition and a progress bar.
Countdown	A full-screen countdown with a title and subtitle.
Poll	A live poll: the question, answers with growing bars, the QR code and link to vote, and the winner. See Live polls.
Scoreboard	A score bug with both teams, period and game clock.
Sponsor wall	A full-screen wall of sponsor logos that adapts to the count, with optional tiers.

Under More you’ll find Leaderboard, Schedule board and Next up countdown. They come in one look only. Older designs are under Legacy.

Blank gives you an empty template to build yourself in HTML and CSS. See Template format.

Styles

Style	Look
Minimal	Quiet type on a hairline, no plates: the picture stays the star.
Corporate	Solid panels, a clean sans and a brand-color edge for conferences and town halls.
News	Bold straps, strong contrast and a hard accent, built for fast information.
Elegant	Serif headlines, generous spacing and soft fades for galas and culture.
Swiss	A strict grid, flush-left type and one strong field of color.
Editorial	Magazine hierarchy: large headlines, small-caps kickers and fine rules.
Inline	Everything on one line: compact single-row straps with an auto-out bar.
Frame	Kinetra’s signature: viewfinder brackets, mono labels.
Pill	Rounded capsules and friendly type for streams and community shows.
Classic	The original Kinetra look.

Not every template has every style: Lower third and Poll have no Classic look, and Sponsor wall comes in Classic and Frame only.

Apply a style to the whole project

Do one of these:

• In the New template gallery, pick a style chip and click Apply Style to project.
• Open Preferences › Appearance › Style & brand and choose a Style.
• Open the command palette (Ctrl+K), type Apply style… and pick one.

Every layer made from a built-in template switches to that style, and keeps its content. Built-in templates that don’t have the look yet get it added. Templates you built yourself stay as they are.

If graphics are on air, Kinetra asks first. They either change on the next take or crossfade to the new look now, depending on the Live edit setting (see Control).

A toast tells you what changed. Click Undo in the toast (or press Ctrl+Z) within 10 seconds to go back.

Apply a style to one layer

In the screen editor or in Control, select the layer and click Browse styles… under its look. Pick a style, then click Apply to this layer only (or Apply to project).

Your brand

Preferences › Appearance › Style & brand holds your project’s brand. It’s used by every built-in template:

• Accent color, Secondary color, Text color and Plate color. Type a hex value such as #1a1a1a, use the swatch, or turn on Transparent. Reset goes back to the style’s color.
• Heading font and Body font, from Kinetra’s font list.
• Logo: used when a graphic has no logo of its own. Click Choose… to pick an image from the project.

A live lower third at the top shows the result. Changes save right away.

Settings on a single layer win over the brand. Templates you build yourself follow the brand only if they use the same variable names (see Variables).

Note

Kinetra only has the fonts in its list. You can’t add your own fonts, so that every computer showing your graphics shows the same thing.

Edit a template

On the Templates page, select a template and click Open editor, or double-click it.

The editor saves by itself a moment after you stop typing. Ctrl+S saves at once. The status at the top says Saved, Saving… or Not saved with the reason. Nothing is saved while a tab shows a red count of things to fix.

Tabs

• Fields: the content an operator fills in. Each field has a Key, a Label, a Type and a Default. Types are Text, Multiline, Image, Video, Color, Number, HTML, List, Clock and Timer. Click Add field to add one.
• Variables: the look, such as colors, fonts, sizes and choices. Change the values at the top. Open Edit variables to add or change variables (Color, Font, Range or Select).
• HTML and CSS: the template’s code. These tabs only show in Advanced mode (Preferences › General › Mode).

Looks

A template can have up to 12 looks (called variants in the editor). Each look has its own HTML, CSS and variable values, and shares the fields. The looks are the tabs above the editor. Use the ⋯ menu to Duplicate as variant…, Rename…, Set as default or Delete… a look.

A dot on a look means it doesn’t use some of the fields.

Preview

The preview on the right shows the template as it looks on air.

• Play in and Play out run the animations.
• Preview values lets you try content. These values are only for the preview and are never saved. Empty text fields show as [Label].
• Auto-out: turn on Play out automatically and set the seconds to take the graphic off air by itself, up to 600 seconds (10 minutes).

Other actions

• Duplicate makes a copy called “name copy”.
• Delete removes the template from the project. Backups keep a copy.
• Tweak with AI changes the template from a description. See AI templates.

“A newer look is available”

When a Kinetra update improves a built-in template, your copy shows A newer look is available. Click Update to get it. Your changes to the built-in looks’ HTML and CSS are replaced; looks you added and field values are kept. Kinetra makes a backup first, and you can Undo for 10 seconds.

Edit templates outside Kinetra

Templates are plain files in the project folder, so you can edit them in any code editor. Kinetra notices the change and reloads it, also on air. If you have unsaved changes in Kinetra at the same time, it asks whether to Reload or Keep mine.

To use a template in another project, copy its folder from one project’s templates/ folder to the other’s. Kinetra has no import or export button for templates.

Tips

• Start from a built-in template and change it, rather than from Blank.
• Use the brand settings instead of changing colors on every layer.
• Keep a template’s fields short and clear: the labels are what your operators see.

Common problems

“Not saved: …”

The message says what to fix, for example a field key used twice. Fix it and the template saves.

“Templates can’t contain …”

Templates can’t run scripts or load anything from the internet. Import images into the project and use an image field instead. See Never allowed.

I don’t see the HTML and CSS tabs.

Switch to Advanced mode in Preferences › General › Mode.

The preview says the output server isn’t running.

The output server runs while a project is open. Check the server status at the top of the window and see Troubleshooting.