Tilpasset CSS

Tilpasset CSS gjør det mulig å tilpasse designet på butikken ned i minste detalj.
Gjennom verktøyet kan man gjøre spesialtilpasninger som ellers ikke er mulig i byggeren.

For å ta i bruk tilpasset CSS må man først åpne “Merkevare” i toppmenyen.
Herfra går man til “Tilpasset CSS”. Sørg for at avansert modus er aktiv.

Første gang man klikker på menypunktet “Tilpasset CSS” tekstbehandleren automatisk åpnes og man kan skrive inn ønsket kodet.

Når man er ferdig klikker man “Oppdater”. Forhåndsvisningen vil så oppdateres, men man må klikke “Lagre og oppdater” i sidemenyen for at endringene skal tre i kraft i nettbutikken.

Viktig ang. bruk av CSS

Tilpasset CSS brukes, og skjer, på butikkens egen ansvar og supporteres normalt sett ikke av vår kundeservice.

Man må som butikkeier selv ha kontroll på endringene som gjøres der med mindre annet er avtalt.

Tilpassede klasser

Tenk på en "klasse" som en etikett eller en merkelapp du fester på et element på nettsiden din. Denne etiketten gir deg en mulighet til å fortelle nettleseren: "Hei, alle elementer med denne etiketten skal se slik ut.”

Eksempel:

La oss si du har en knapp på nettsiden din. Uten en klasse ser den kanskje ganske standard ut. Du ønsker at denne knappen skal være rød, ha en større skrift og avrundede hjørner.

1. Legge til en klasse:

   Du legger til en "etikett" til knappen, for eksempel "spesiell-knapp". Nå vet knappen at den tilhører "spesiell-knapp"-gruppen.

2. Skrive CSS:
   I tilpasset CSS (temainnstillinger), forteller du nettleseren hvordan elementer med "spesiell-knapp"-etiketten skal se ut. Du skriver CSS-kode som sier: "Alle elementer med klassen 'spesiell-knapp' skal ha rød bakgrunn, stor skrift og avrundede hjørner."

CSS variabler

Kommende funksjonalitet

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

En CSS-variabel, også kalt en CSS-egenskap, er en verdi som er definert av en utvikler og kan brukes på nytt i et CSS-dokument.

I designbyggeren ville alle farger som settes opp i temainnstillinger defineres som variabler.

Eksempel
I temainnstillinger velger man å sette tekstfarge til fargekode #181818
Tekstfarge har variabel —text-color og kan da gjenbrukes flere plasser, og alt som bruker variabelen vil få fargen som er satt i temainnstillinger. Om man sendere endrer fargekoden i temainnstillinger vil alt som bruker denne variabelen også bli oppdatert.

Eksempel på bruk av variabler

I eksemplet under er det brukt en variabel for å sette bakgrunnsfarge på produktboks.

Variablen som er brukt er primærfarge som er satt i temainnstillinger. Produktboksen vil derfor ha primærfarge som bakgrunn. Om denne endres i senere tid vil også bakgrunnsfargen til produktboksen endres.

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

Opprette egne variabler

Man trenger ikke bare bruke de forhåndsdefinerte variablene fra temainnstillingene. Det er også mulig å lage egne variabler for så å gjenbruke disse i designbyggeren.

Lag variabel

Egne variabler må lages, og evt. endres, i tilpasset CSS.

1. Åpne temainnstillinger

2. Åpne tilpasset CSS

CSS-variabler er definert med to bindestreker (--) etterfulgt av et variabelnavn. For eksempel kan du definere en variabel for en farge slik:

:root {
  --my-new-variable: #007bff;
}

Sørg for at variablen er plassert i :root { * } for å gjøre den tilgjengelig for all css.

Du kan deretter bruke denne variabelen i CSS-koden din ved hjelp av var()-funksjonen:

button {
  background-color: var(--my-new-variable);
}

Bruk egen variabel i designbygger

Man trenger ikke kun bruke egne variabler i tilpasset CSS, man kan også benytte de direkte i designbyggeren.

1. Finn blokken/seksjonen hvor du vil bruke egendefinert variabel

2. Naviger til innstilling for bakgrunnsfarge/tekstfarge

3. Lim inn variabelnavn i feltet hvor man til vanlig har en HEX-kode

For eksemplet over ville man i feltet skrevet inn var(--my-new-variable)

Fargeinnstillingen vil nå bruke fargen som er definert i variablen som ble satt opp i tilpasset CSS.

Info

Kun farger har støtte for variabler på nåværende tidspunkt.

Ferdige CSS-regler

For å gjøre det litt enklere for deg har vi her samlet noen populære CSS-regler som det ofte blir spurt etter.

Fjerne lagerstatus - produktboks v7

Produktboks V7 kommer ferdig med et felt for lagerstatus. Om man ønsker å fjerne denne kan følgende CSS-regel benyttes:

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

Endre farge på knapp - produktboks v7

Produktboks V7 har fast farge på kjøpsknappen. Denne kan endres med følgende CSS-regel:

Farger støtter normale CSS-standarder som RGBA, HEX, HSL osv.

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