---
title: "Avansert design med tilpasset CSS"
url: "https://support.acendy.com/no/article/tilpasset-css"
language: "no"
last_updated: "2026-03-11T09:51:52.829Z"
---

# Avansert design med tilpasset CSS

Tilpasset CSS gir deg muligheten til å justere designet på nettbutikken ned i minste detalj. Dette verktøyet åpner for spesialtilpasninger som går utover de standardvalgene som finnes i designbyggeren.

> Viktig info
> 
> Ved bruk av tilpasset CSS er man selv ansvarlig for oppdatering og vedlikehold av koden. Endringer og oppdateringer i plattformen og/eller designbyggeren tar **ikke** høyde for eventuell bruk av tilpasset CSS.

## Slik kommer du i gang

For å bruke tilpasset CSS må du navigere til riktig meny i systemet:

1.  Klikk på menyen "Temainnstillinger" i toppmenyen.
2.  Klikk deretter på "Temainnstillinger" og "Tilpasset CSS". Sørg for at Avansert modus er aktivert.
3.  Skriv inn koden din i tekstbehandleren og klikk Oppdater.
4.  Viktig: Forhåndsvisningen vil nå oppdatere seg, men du må klikke Lagre og oppdater i sidemenyen for at endringene skal bli synlige for kundene dine.

> Viktig informasjon
> 
> Bruk av CSS skjer på eget ansvar. Kundeservice supporterer normalt ikke egendefinert kode, så du må selv ha kontroll på endringene som gjøres.

* * *

## Bruk av Tilpassede Klasser

En "klasse" fungerer som en merkelapp du fester på et element. Ved å gi et element en klasse, kan du målrette designet ditt nøyaktig.

-   **Designfleksibilitet**: Lag unike knapper eller bokser som skiller seg ut.
-   **Detaljert kontroll**: Juster alt fra spesifikke avstander til unike fonter.
-   **Effektivt vedlikehold**: Endrer du stilen til en klasse i CSS-filen, oppdateres alle elementer med denne "merkelappen" samtidig.

* * *

## CSS-variabler

CSS-variabler (også kjent som "custom properties") fungerer som smarte beholdere for verdier du bruker ofte i designet ditt, slik som farger, avstander eller skrifttyper. I stedet for å skrive den samme fargekoden 50 ganger, lagrer du den i en variabel én gang.

> Kommende funksjonalitet
> 
> CSS variabler er ikke lansert og dermed ikke tilgjengelig for bruk, ennå.

## Hvorfor bruke variabler?

Den største fordelen med variabler er **sentralisert styring**. Tenk deg at du har brukt en spesifikk blåfarge på alle knapper, rammer og titler i nettbutikken din.

-   **Uten variabler:** Hvis du vil bytte til grønn, må du finne og endre fargekoden manuelt på hvert eneste sted i koden.
-   **Med variabler:** Du endrer fargekoden kun i variabelen, og hele nettbutikken oppdateres umiddelbart.

* * *

## Slik fungerer det i Designbyggeren

I vårt system blir alle farger du velger i Temainnstillinger automatisk gjort om til variabler. Dette skjer i bakgrunnen for å gjøre designet ditt mer fleksibelt.

### Eksempel: Tekstfarge

Hvis du setter tekstfargen din til mørkegrå (#181818) i innstillingene, får denne fargen navnet `--text-color`.

-   Alt innhold som er koblet til denne variabelen vil vise fargen #181818.
-   Hvis du senere endrer tekstfargen til sort (#000000) i temainnstillingene, vil variabelen `--text-color` automatisk sende den nye fargen ut til alle tekstfelt i butikken.

* * *

## Praktisk bruk i Tilpasset CSS

Du kan bruke disse variablene når du skriver din egen CSS-kode. Her er et eksempel på hvordan du kan tvinge en produktboks til å alltid bruke butikkens hovedfarge (primærfarge) som bakgrunn:

CSS

```
.product-thumb-info {
  background-color: var(--primary-color);
}
```

Ved å bruke `var(--primary-color)` i stedet for en fast fargekode som #FF0000, sikrer du at produktboksen alltid matcher resten av butikken, selv om du skulle bytte profilfarger senere.

## Opprett egne variabler

Du er ikke begrenset til de innebygde variablene. Du kan lage dine helt egne under Merkevare -> Tilpasset CSS:

1.  **Definer variabelen:** Legg den i `:root` for at den skal være tilgjengelig overalt.
2.  **Bruk variabelen:** Kall den opp med `var()`\-funksjonen.

CSS

```
:root {
  --min-spesial-farge: #ffcc00;
}

.min-knapp {
  background-color: var(--min-spesial-farge);
}
```

> **Merk:** Foreløpig er det kun farger som støtter bruk av variabler direkte inne i designbyggerens menyer, men i Tilpasset CSS kan du bruke variabler til alt fra bredder til marger.

## Ferdige CSS-oppskrifter for Produktboks V7

For å gjøre tilpasningen av nettbutikken din enklere, har vi samlet de mest etterspurte CSS-reglene for Produktboks V7. Disse kodene kan du lime direkte inn under Merkevare og Tilpasset CSS.

### Skjul lagerstatus

Produktboks V7 viser som standard lagerstatus for hvert produkt. Hvis du ønsker et renere design uten denne informasjonen, kan du bruke denne koden:

```
.product-thumb-info .__pb-info-7 .pb_stock_info {
  display: none;
}
```

* * *

### Tilpass farger på kjøpsknappen

I denne versjonen av produktboksen har kjøpsknappen en fast farge. Ved å bruke koden under kan du overstyre denne slik at den matcher din profil perfekt. Du kan bruke fargenavn (som red), HEX-koder (#FF0000) eller RGBA.

```
.product-thumb-info .__pb-info-7 .__pb-button .button-default{
  background-color: red; /* Background color */
  color: white; /* Text color */
  fill: white; /* Icon color */
} 
```

### Slik fungerer koden

-   `display: none;` : Denne kommandoen forteller nettleseren at elementet skal fjernes helt fra visningen.
-   `background-color:` Bestemmer fyllfargen inne i selve knappen.
-   `color`: Bestemmer fargen på teksten "Kjøp" eller "Legg i kurv".
-   `fill`: Brukes spesifikt for å endre farge på grafiske ikoner (SVG) som ligger inne i knappen.

* * *

## Tips for fargevalg

For å sikre at knappen er enkel å lese, bør du alltid ha en god kontrast mellom bakgrunnsfargen og tekstfargen. Hvis du har en lys bakgrunnsfarge, bør du bruke mørk tekst (f.eks. color: black;).

## Vilkår for egendefinert kode

[Les mer om fordeler, bakdeler samt vilkår for bruk av egendefinert kode i plattformen.](https://support.acendy.com/no/article/vilkar-for-egendefinert-kode)