Overlays
Overlays er grafikklag du legger oppå videoinnholdet ditt i OBS. StreamAdmin leverer ferdige overlays som nettleserkilder – du trenger ikke designe noe fra bunnen av, men alt kan tilpasses med egendefinert CSS og HTML.
Legge til overlay i OBS
Uansett hvilken overlay-type du velger, er fremgangsmåten den samme:
- Gå til Overlays i StreamAdmin-dashbordet
- Velg eller opprett en overlay
- Klikk Kopier nettleser-URL
- Åpne OBS og legg til en ny kilde: Nettleser
- Lim inn URL-en i feltet URL
- Sett bredde til 1920 og høyde til 1080 (eller din outputoppløsning)
- Huk av Oppdater nettleserkilde når scenen blir aktiv
- Klikk OK
Overlays er designet med gjennomsiktig bakgrunn. For at dette skal fungere korrekt i OBS, la innstillingen Tilpasset CSS i nettleserkilden stå tom, og ikke huk av «Sett bakgrunn som gjennomsiktig» med mindre overlayens CSS krever det.
Overlay-typer
Arrangementsinformasjon
Viser informasjon om pågående arrangement – arrangementsnavn, logo, dato og tilpasset tekst. Ideell som permanent overlay øverst eller nederst på skjermen under LAN-partyer og turneringer.
Konfigurering:
- Legg inn arrangementsnavn, beskrivelse og logo-URL
- Velg skrifttype og fargeskjema fra de tilgjengelige temaene
- Posisjoner: topp, bunn, hjørner
Lower third
En «lower third» er en grafikkremse som typisk viser navn og tittel på en person som snakker. Perfekt for intervjuer, podkaster og nyhetsformat.
Konfigurering:
- Navn og undertittel (kan oppdateres live fra dashbordet)
- Inn- og ut-animasjon (gli inn fra venstre, fade, etc.)
- Varighet (vises i N sekunder og forsvinner automatisk)
Scoreboard
Viser poengstilling for to lag. Kan oppdateres i sanntid direkte fra StreamAdmin-dashbordet uten å endre overlayinnstillingene.
Innstillinger:
- Lagnavn og lagsfarger
- Nåværende poengstilling
- Kampnummer / runde
- Valg av sportstype-ikon (fotball, esports, generisk)
Nedtelling
En visuell nedtellingskjerm med tid til neste kamp, pause eller start av arrangement.
Innstillinger:
- Mål-tidspunkt (dato og klokkeslett) eller varighet i minutter
- Bakgrunnsbilde eller video
- Tekstmelding under nedtellingen
Sosiale medier
Viser Twitch-følger-varsler, YouTube-abonnentmål og lenker til sosiale profiler.
Tilpassbare elementer:
- Plattformikoner (Twitch, YouTube, Kick, Twitter/X, Instagram)
- Følger- eller abonnentmål med fremdriftslinje
- Siste følger-visning
Chat-overlay
Kombinerer chat fra Twitch og YouTube til én samlet chat-visning som legges over videoen.
Innstillinger:
- Velg hvilke plattformer som inkluderes
- Maks antall meldinger som vises
- Skriftstørrelse og gjennomsiktighet
- Filtrer ut bot-meldinger og kommandoer (f.eks. meldinger som starter med
!)
Egendefinert overlay
Full frihet med egendefinert HTML og CSS. Overlayene kjøres i en Chromium-basert nettleser (samme motor som OBS-nettleserkilder), slik at du kan bruke moderne CSS og JavaScript.
Tilgjengelig informasjon via JavaScript-variabler:
- Stream-status (live/offline)
- Gjeldende seertall
- Siste hendelse (ny følger, abonnent, donasjon)
- Scoreboard-data
Temaer
StreamAdmin leverer følgende forhåndsbygde temaer:
| Tema | Beskrivelse |
|---|---|
| Klassisk | Mørk bakgrunn, hvit tekst – tidløst og profesjonelt |
| Gaming | Neon-aksenter, gaming-estetikk |
| Minimalistisk | Rent design, liten visuell profil |
| Nyheter | Avis-/TV-inspirert layout |
| LAN | Optimalisert for LAN-party og esports-turnering |
Hvert tema kan tilpasses med egendefinerte farger, fonter og logo.
Egendefinert CSS
Alle overlays kan tilpasses med egendefinert CSS. Redigeringsvinduet har syntaksfarging og sanntidsforhåndsvisning.
Eksempel – endre bakgrunnsfarge på lower third:
.lower-third-container {
background-color: rgba(18, 121, 255, 0.85);
border-left: 4px solid #00d4ff;
}
.lower-third-name {
font-family: 'Rajdhani', sans-serif;
font-size: 28px;
font-weight: 700;
color: #ffffff;
}
Stream-mål på overlay
Du kan vise fremgang mot et mål (følgere, abonnenter, donasjoner) som en fremdriftslinje i en overlay.
- Gå til Mål i StreamAdmin
- Opprett et nytt mål med type, startnivå og målnivå
- Aktiver overlay-visning og kopier overlaylenken
Fremdriftslinjen oppdateres automatisk i sanntid når nye hendelser kommer inn.