Skyra kan styles direkte fra nettstedet ved hjelp av CSS-variabler. For mer detaljert kontroll finnes også støtte for CSS Parts.

For de fleste anbefaler vi å starte med Design i Skyra. Der kan du administrere farger, typografi, kantlinjer, avrunding og andre visuelle innstillinger uten å skrive CSS.

CSS er nyttig når du:

trenger en innstilling som ikke finnes i Design
ønsker å styre designet fra nettstedets egen CSS
vil overstyre enkelte egenskaper på bestemte sider eller undersøkelser
trenger mer detaljert styling med CSS Parts
ønsker å endre z-index for å legge over/under chatbot.

Vil du administrere designet i Skyra uten CSS?
Bruk designmaler dersom du ønsker et gjenbrukbart design som kan administreres sentralt og brukes på tvers av undersøkelser.

Les mer om Design og designmaler

Hva er forskjellen på Design og CSS?

Det er noe overlapp mellom de to metodene.

Vanlige innstillinger som bakgrunnsfarge, tekstfarge, knappfarger og typografi kan styres både gjennom Design og med CSS-variabler.

Andre innstillinger finnes bare ett av stedene.

Design gir blant annet visuell kontroll over flere innstillinger for kantlinjer, avrunding, fokusringer og skygger.
CSS gir på sin side tilgang til enkelte tekniske innstillinger, som z-index og maksimal høyde, som ikke kan settes i Design.

Du trenger derfor normalt ikke CSS for å lage et eget visuelt uttrykk. Bruk CSS når du har et konkret behov som løses bedre fra nettstedet eller ikke er tilgjengelig i Design.

PS: CSS på nettsiden overstyrer alltid designmalen

Skyra-widgeten er bygget slik at CSS-variabler satt direkte på nettsiden – i en <style>-tag eller et stilark – vinner over verdiene som kommer fra designmalen i valgt i Survey-Edit, selv om malen er valgt og lagret riktig.

Hvordan bruke CSS-variabler

CSS-variablene settes på skyra-survey på nettstedet der Skyra er installert.

Du kan bruke variablene til å overstyre standardverdiene i widgeten. Du kan også målrette CSS mot én bestemt undersøkelse dersom den skal ha egne innstillinger.

Designe i Figma først?

Last ned og bruk Figmafilen hvis du vil designe og teste utseendet visuelt først.

Last ned skyra-widget.fig

PS: Filen oppdateres ikke kontinuerlig og kan avvike fra dagens design.

CSS-variabler

Farger

Variabel	Standardverdi	Beskrivelse
`--skyra-bg-color`	`#f5f7fa`	Bakgrunnsfarge for widgeten
`--skyra-text-color`	`#012a53`	Hovedtekstfarge
`--skyra-interface-color`	`#315386`	Farge på rammer og ikoner
`--skyra-action-color`	`#002052`	Bakgrunnsfarge på primærknapper
`--skyra-action-text-color`	`var(--skyra-bg-color)`	Tekstfarge på primærknapper
`--skyra-secondary-color`	`#dde7f7`	Farge på sekundære elementer
`--skyra-link-color`	`blue`	Farge på lenker
`--skyra-error-color`	`#ca0a15`	Farge på feilmeldinger
`--skyra-warning-color`	`#92400e`	Farge på advarsler

Typografi

Variabel	Standardverdi	Beskrivelse
`--skyra-font-size`	`16px`	Basis tekststørrelse
`--skyra-font-body`	System sans-serif	Font for brødtekst
`--skyra-font-heading`	System sans-serif	Font for overskrifter

Layout

Variabel	Standardverdi	Beskrivelse
`--skyra-body-max-height`	`none`	Maks høyde for innholdsområdet

Variabler kun for popup-undersøkelser

Disse variablene fungerer kun for popup-undersøkelser, ikke inline-undersøkelser:

Variabel	Standardverdi	Beskrivelse
`--skyra-z-index`	`2147483647`	Stabling (hvor høyt på siden undersøkelsen vises)
`--skyra-shadow`	`0 0 20px 4px rgb(from var(--skyra-action-color) r g b / 0.25)`	Box-shadow rundt widgeten
`--skyra-option-list-max-height`	`400px`	Maks høyde for listen med svaralternativer
`--skyra-minimized-bg`	`#002052`	Bakgrunnsfarge i minimert tilstand
`--skyra-minimized-text`	`rgba(255, 255, 255, 1)`	Tekstfarge i minimert tilstand
`--skyra-minimized-border`	`#106eff`	Rammefarge i minimert tilstand
`--skyra-minimized-shadow`	`0px 0px 20px 4px rgba(1, 61, 150, 0.4)`	Shadow i minimert tilstand

💡 Tips: --skyra-z-index er nyttig hvis du har en chatbot eller annet innhold som skal vises over eller under undersøkelsen.

Avansert: CSS Parts

⚠️ Eksperimentelt: Denne funksjonen er for avanserte brukere. Parts kan endres i fremtidige oppdateringer av widgeten.

For mer detaljert kontroll kan du bruke ::part()-selektoren. Dette lar deg style spesifikke elementer inne i widgeten.

Tilgjengelige parts

Part	Element	Bruksområde
`wrapper`	`<aside>`	Hovedcontainer for widgeten
`heading`	`<h2>`	Korttittel
`description`	`<p>`	Beskrivelsestekst
`bodyHtml`	`<div>`	Rikt HTML-innhold
`options`	`<div>`	Container for svaralternativer
`button-primary`	`<button>`	Primærknapper (f.eks. "Neste")
`button-secondary`	`<button>`	Sekundærknapper
`button-link`	`<button>`	Lenke-knapper
`button-chip`	`<button>`	Alternativ-chips
`list-item`	`<label>`	Likert-skala og toggle-elementer

💡 Viktig begrensning: ::part() kan kun style selve elementet – ikke dets barn. Selektorer som ::part(wrapper) button vil ikke fungere.

Eksempler

Endre hovedfarger

Tilpass fargene til din merkevare:

<style>
skyra-survey {
  --skyra-bg-color: #ffffff;
  --skyra-text-color: #1a1a1a;
  --skyra-action-color: #2563eb;
  --skyra-action-text-color: #ffffff;
  --skyra-secondary-color: #e5e7eb;
}
</style>

Mørkt tema

Slik lager du et mørkt tema for undersøkelsen:

<style>
@media (prefers-color-scheme: dark) {
skyra-survey {
  --skyra-bg-color: #1f2937;
  --skyra-text-color: #f9fafb;
  --skyra-interface-color: #9ca3af;
  --skyra-action-color: #3b82f6;
  --skyra-action-text-color: #ffffff;
  --skyra-secondary-color: #374151;
  --skyra-link-color: #60a5fa;
  --skyra-error-color: #ef4444;
}  
}
</style>

Endre skrifttyper

Bruk dine egne fonter:

<style>
skyra-survey {
  --skyra-font-body: "Open Sans", sans-serif;
  --skyra-font-heading: "Montserrat", sans-serif;
  --skyra-font-size: 18px;
}
</style>

Style kun én undersøkelse

Du kan bruke slug-attributten for å style en spesifikk undersøkelse. Du finner din slug under survey settings.

<style>
skyra-survey[slug="min-side/tilbakemelding"] {
  --skyra-action-color: #059669;
}
</style>

Relaterte artikler

CSS-styling av undersøkelse