Farger
I innstillingene for nettbutikken din finner du et sted der du kan velge farger. Dette er som å lage en fargepalett som butikken din skal bruke. Velg farger: * Du kan bestemme hvilke farger knappene, tekstene og bakgrunnene i butikken skal ha. * For eksempel kan du bestemme at alle knappene skal være blå. Se endringene: * Når du endrer en farge, kan du se hvordan det ser ut med en gang i en forhåndsvisning. * Dette gjør at du kan prøve deg frem og finne de fargene du liker best. Kort sagt, fargeinnstillingene lar deg tilpasse utseendet på nettbutikken din ved å velge og lagre farger.
Variabler
Fargene i temainnstillingene lagres som CSS-variabler, slik at de kan gjenbrukes overalt i designbyggeren men også gjennom tilpasset kode.
Hva er en variabel?
En CSS-variabel, også kjent som en "CSS custom property", er en måte å lagre verdier som kan gjenbrukes i CSS-koden din. Tenk på det som en beholder for en verdi, som en farge, en størrelse eller et skrift.
Her er noen viktige punkter om CSS-variabler
Gjenbruk:
De lar deg definere en verdi én gang og deretter bruke den flere steder i CSS-koden din. Dette gjør det enklere å vedlikeholde og oppdatere stiler, spesielt i store prosjekter.
Dynamisk oppdatering:
Hvis du endrer verdien til en CSS-variabel, oppdateres alle elementene som bruker den variabelen automatisk.
Fleksibilitet:
De gir deg mer fleksibilitet og kontroll over stilen på nettsiden din.
Relatert artikkel:
Bruk av farger og variabler
Nå man legger til en blokk som inneholder fargeinnstillinger vil den som standard benytte den fargen som er satt opp i temainnstillinger.
For eksempel; tekstfarge i en blokk vil automatisk linkes til tekstfarge i globale innstillinger.
Dette indikeres på fargevelgeren i blokken med teksten Linked to global color
og et ikon som indikerer at linken er aktiv. Om du ønsker å endre til en farge som ikke er satt opp i temainnstillingene kan du selv skrive inn fargekode i feltet. Ikonet til høyre vil da endre seg og indikerer at linken til den globale fargen er brutt, slik:
Gjenopprett link
Om du har endret farge manuelt slik at linken ble brutt, men ønsker å gjenopprette linken kan du klikke på ikonet. Feltet vil da linkes til den globale farger og feltet oppdateres til Linked to global color
i tillegg til at ikonet oppdateres.
Bruke andre variabler
I tillegg til å bruke den globale fargen for feltet kan du koble feltet til andre fargevariabler fra temainnstillingene. Du kan for eksempel koble tekstfarge til fargevariablen for primærfarge.
- Finn feltet du vil endre farge for
- Klikk på knappen for å endre farge
- Velg blant variablene som vises i bunnen (hold musepekeren over for å se hvilket felt fargen tilhører)
Når man velger en annen variabel enn den som er global vil feltet fortsatt vise link-ikonet , men nå vil navnet på variabelen vises i feltet. Eksempel:
var(—primary-color)
Linken til global farge kan gjenopprettes på samme måte som over.