# CSS-styling av undersøkelse

Canonical: https://www.skyra.no/no/help/css-styling-av-undersokelse

Language: no

Bruk CSS-variabler når du trenger tekniske tilpasninger og styling utover det du gjør med Design-innstilling i Skyra.

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.

> [!TIP]
> **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](<https://www.skyra.no/no/help/design-tilpass-utseendet-pa-undersokelser>)

<a id="h_a1b6bd25ae"></a>

## 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.

> [!WARNING]
> **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.

<a id="h_3a7ca89585"></a>

## 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.

> [!TIP]
> **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](<https://drive.google.com/file/d/1yuLQqCFxC7D5ojoOhVnoOVpjPojBa21J/view?usp=sharing>)
> 
> PS: Filen oppdateres ikke kontinuerlig og kan avvike fra dagens design.

<a id="h_b6b603c8ca"></a>

## CSS-variabler

<a id="h_2cf46f21bc"></a>

### 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 |

<a id="h_fdf826cdec"></a>

### 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 |

<a id="h_2b01425aae"></a>

### Layout

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

<a id="h_1c4024a318"></a>

### 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.

<a id="h_18bdcfa620"></a>

## Avansert: CSS Parts

> [!WARNING]
> ⚠️ **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.

<a id="h_968c388f0f"></a>

### 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.

<a id="h_19ae7e6a37"></a>

## Eksempler

<a id="h_02b6fea7d0"></a>

### Endre hovedfarger

Tilpass fargene til din merkevare:

```html
<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>
```

<a id="h_664ed02e30"></a>

### Mørkt tema

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

```html
<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>

```

<a id="h_22cc61e151"></a>

### Endre skrifttyper

Bruk dine egne fonter:

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

<a id="h_afe972fc3a"></a>

### Style kun én undersøkelse

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

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

## I disse samlingene

- [Undersøkelser](<https://www.skyra.no/no/help/undersokelser.md>) — Publiser undersøkelse på nettsiden