strAImer strAImer
Sign in

Styling an Overlay

People ask this as

What this page is

Every overlay is styled in the same editor: sections on the left, a live preview in the middle, the settings of the chosen section on the right. Alerts, chat, goals, the mascot, the input overlay, lists, timers, the auction board, the wheel, the bracket, the carousel, the pool bar and the challenge board all share it, so what you learn on one screen works on the rest.

The look belongs to one overlay. Two chat overlays in the same list are styled apart, and copying an overlay copies its look with it.

Nothing is saved until you press Save

Changes live on screen only. Move the sliders, try a ready-made look, pick colours — and if you do not like the result, leave: Save in the page header is what writes it down.

Leaving with unsaved changes asks first. That question appears both when you press Back to list inside a widget card and when you switch to another section in the left menu.

Ready-made looks work the same way: Apply puts the look on screen but writes nothing. Nothing is lost until you save, and nothing is kept until you do.

The reset button is no exception. Reset Customization, or Reset appearance in some overlays, only puts the default look into the editor. The overlay in OBS keeps its old look until you press Save, and leaving without saving undoes the reset.

Sizes are typed as well as dragged

Every size, offset, radius and thickness shows its number to the right of the label, and that number is a field: click it and type. Arrow keys move it by one step, Shift by ten.

The slider under it stays for setting things by eye, and a number larger than its scale stretches the scale to fit. Nothing stops at a limit we picked for you, which matters on a 4K source where padding and text have to be far larger than on 1080p.

The unit stands in the label, Text size (px), and never inside the field. A size without its unit is not a valid rule: the browser would drop it and the overlay would fall back to its built-in value while the screen still showed your number.

A field that does nothing in the current mode is hidden rather than left to move in vain. In the alerts, Media look with Size set to Fill the card hides Width, Height and Fitting. Switch back to Set by hand and they return with the values they had.

Ready-made looks

Ready-made looks sit in the Styling list, under Built-in. Neon, Minimal and Retro exist in every overlay except the mascot and use the same colours, fonts and borders. Apply one to all your overlays and they will look like one set, not like a dozen separate widgets. The mascot has no ready-made looks: its list holds only your own templates.

The overlays that have a Material section (see below) also list the twelve materials under Built-in, from Live pencil to Pearl glass. Such a look brings its own colours, fonts and corner radius together with its material, so it is the quickest way to see what a material looks like.

Applying a look also clears what it does not set, so the result does not depend on what you were turning before.

Below them is the list of your own templates: the name field with Save keeps the look that is on screen right now, and Delete removes a template. A template saved from one overlay can be applied to another, and the editor translates what it can. The material and the outline effect travel as they are, to any overlay that has those sections.

Material

Alerts, Chat Overlay, Donation Goals, Lists and Timers have a Material section, and so do four add-on overlays: Board overlay and Wheel overlay of the auction, Pool bar overlay and Challenge list overlay of the carousel. The mascot, Input, Bracket overlay and Carousel overlay do not have it. In the list of sections it stands right after the part it paints first, which on most overlays is Backdrop.

A material draws that part in a finished art style: Live pencil, Northern lights, Paper collage, Blueprint, Blocky, Field terminal, Tactical, Gilded oath, Clear glass, Frosted glass, Convex glass or Pearl glass. None turns it off. What it paints depends on the overlay:

  1. Open the overlay's look and pick Material in the list of sections.
  2. Choose a material. It keeps your colours, fonts and sizes: the background colour of each part it paints still comes from that part's own section.
  3. Below the choice are the settings of that material: its details (lines, grain, glints, ornaments) with their sizes and colours, and a switch for each detail that can be taken off. Live pencil also has Pencil thickness.
  4. Live pencil, Northern lights, Field terminal and Gilded oath can move. Decorative motion turns that on or off. Picked in this section, a material starts with motion Off; the ready-made looks of Live pencil, Northern lights and Field terminal switch it On. Moving looks are drawn by OBS, on the computer that encodes your stream, which is why motion waits until you ask for it.
  5. Press Save.

While a material is picked, the editor hides the fields it makes pointless: the border of each part it paints, and the shadow as well, except under Northern lights, Paper collage, Blueprint and the four glass looks. On alerts the backing, inner padding, outline and shadow of Media frame hide too, because the material draws its own rim there. Pick None and those fields come back with the values they had. On Tactical and Blocky, Corner radius sets the size of the cut or stepped corner rather than a curve.

Outline effect

The same overlays have an Outline effect section: a moving effect that runs around the edge of the overlay. That edge is the alert card, the whole goal, the list bar, the timer plate, the pool bar or the wheel's plaque, and each message of the chat, each row of the challenge list, the header and each lot row of the auction board. The effect is chosen apart from the material and works with or without one.

  1. Pick Outline effect in the list of sections.
  2. Choose under Effect: Electric, Comet, Liquid edge, Fire, Frost, Hologram, Ink frame, Bubbles, Magnetic particles or Fragment assembly. None turns it off.
  3. Set Effect color and Effect speed. Most effects also have Brightness, Motion size and a count of their own (comets, flame tongues, bubbles and so on).
  4. Under Plays, All the time keeps the effect running, and On event flashes it for Burst length when something happens on that overlay. Fragment assembly starts on On event, the others on All the time.
  5. Press Save.

The event belongs to the overlay: an alert appears, a chat message arrives, a goal grows, the text of a list changes (not when the source first loads), time is added to a timer or taken away, a card comes up on the pool bar, a new challenge appears, the wheel shows its result. The auction board names its sections after their parts: Header effect plays When the wheel stops, and Lots effect plays When the lot is drawn.

Electric is the electric border that alerts used to set with Border Effect in Backdrop, a field that is gone now. An alert that had it switched on finds it here, with the same colour, speed and chaos. The picture or video of an alert has an effect of its own: Effect in Media frame offers the same ten effects, chosen separately from the card's.

An outline effect runs along the outside of the edge, so on a Browser Source cut tight to the overlay part of it falls outside the frame. Edge padding, below, gives it room.

In OBS, materials and effects keep moving even if animation effects are switched off in the Windows settings: that setting is about your screen, not your viewers'. The preview in the editor does follow it, so with Windows animation effects off the materials and effects stand still there, all but Electric.

Edge padding

Every overlay except alerts has an Edge padding section in its look, with Top and bottom and Left and right in pixels. It is a transparent margin between the edges of the Browser Source and what the overlay draws, so that glow, shadows, outline effects and slide-in animations are not cut off by OBS. It starts at zero, so an overlay already in your scene does not move. The auction board is the exception: there the section is called Distance from the source edge, and it starts at 16 px top and bottom and 28 px left and right, because the board already kept a margin of its own. Alerts keep the same gaps inside their Placement section.

Colours

The colour picker holds two rows.

My colours stay until you remove them. The + at the end of the row keeps the colour you have picked right now; the cross in the corner of a colour removes it. Put the colours of your channel here once and they will be at hand in every overlay.

Recent are the last twelve colours you used anywhere in the app — the row flows on its own, a new colour pushing the oldest one out. That is why colours you care about belong in the row above.

Both rows are shared across the whole app: a shade picked in the chat overlay is one click away in alerts.

Every colour of the overlay's own sections has a transparency slider next to it: text, backgrounds, borders and shadows. The colours of a material's details and of the outline effects are solid, all but the colour of Electric. A two-colour background (a gradient) has a slider for each of its colours, with the percentage beside it, so a background can fade from solid to see-through. The code field in the picker takes a colour with its transparency as well, such as #00000080 for half-transparent black, or numbers like 15,12,30. The eyedropper next to the code field picks a colour from anywhere on the screen.

What it cannot do