Nettbutikkens utseende kan tilpasses med CSS-kode i tilfeller hvor den ønskede forandringen ikke kan gjennomføres med utformingsverktøyet. Du kan endre på CSS-klassene ved å legg inn CSS-koden under Innstillinger > Generelle innstillinger > Avanserte innstillinger.CSS-endringer for mobilvisning gjøres i Innstillinger > Generelle innstillinger > Avanserte innstillinger for mobilvisning (i mobilvisningen bruker andre css-klasser).

Nettbutikkens elementer har alle egen CSS-klasse, som kan brukes for å gjøre endringer eller f.eks. skjule et element ved bruk av kode. For å finne navnet på css-klassen, kan du bruke nettleserens utviklingsverktøy, som følger med de viktigste nettlesrne (f.eks.Chrome).

Når du gjør endringer med CSS-kode, husk å teste sidenes design og funksjon i forskjellige nettlesere etter hver endring. I noen tilfeller brukes samme css-klasse for forskjellige steder på ulike sider.

Endringer i designen bør i første omgang gjøres med butikkens utformingsverktøy. Bruk css-kode kun i de tilfellene utformingsverktøyet ikke har mulighet til å gjennomføre de ønskede endringene. Det gjør det enklere å håndtere designen også ved framtidige uppdateringer.

Med CSS-kode kan man bl.a. gjøre følgende

• Endre elementenes farge, bakgrunnsfarge og bakgrunnsbilde

• Legge til rammer og skygger på visse elementer

• Endre elementenes høyde, bredde, marg, og utfylling

• Skjule element

Last opp en forenklet mal

En del av ePages nyeste designmaler har flere begrensninger når det kommer til css-endringer da de allerede er gjort mere stilrene designmessig. Hvis du vil bruke kode for å lage en utforming som har mye spesialtilpasninger, kan du laste opp en forenklet mal som gjør det lettere å bruke egenutviklet kode.

1. Last ned filenPlain.style til datamaskinen din.

2. Last opp designmalen til nettbutikken ved å klikke på knappen "Importer motiv" på siden Design > Mine motiver.

3. Plain-malen opprettes da som et nytt motiv i nettbutikken. De gamle designmalene vil fortsatt finnes i listen, uten endringer.

Eksempel på CSS-endringer

CSS-koden (i dette eksempelet "h1 { text-transform: uppercase; }") legges til innenfor style-tagger på denne måten:

<style type="text/css">

/* Endrer alle h1 overskrifter til STORE BOKSTAVER: */

h1 { text-transform: uppercase; }

</style>

Kommentaren for koden begynner med /* og avsluttes med */ Teksten mellom disse tegnene  påvirker ikke koden, det er kun en forklaring av koden, for redigering på et senere tidspunkt.

Vanlige endringer

I en del designmaler er noen sideelementer, som f.eks. flaggene for å velge språk eller lenken til handlekurven, ikke helt på linje med de andre elementene. Dette kan rettes opp ved å legge til denne css-koden:

div { vertical-align: top; }

Søkeelementets "søk"-knapp kan i en del designmaler forskyve seg ned. Dette kan rettes opp med denne koden:

.SearchForm.vertical-search > input { max-width: 120px; }

For å legge produktsidens sosiale medier knapper på samme linje kan du bruke denne koden:

.SocialWeb { vertical-align: top; }

Sentrert bakgrunnsbilde:

body, html { background-position: center top;}

Statisk bakgrunnsbilde:

body, html { background-attachment: fixed; }

Bevegelig bakgrunnsbilde(bildet følger ikke med når man går nedover på siden):

body, html { background-attachment: scroll; }

Replikasjon av bakgrunnsbilde kun i horisontal retning:

html, body { background-repeat: repeat-x; }

Bakgrunnsbilde som helskjerm:

html, body { background-size: 100%; }

Sidehodets bakgrunn i helskjermsbredde:

.GeneralLayout { width: 100%; max-width: 100%; height: 100%; margin: 0px auto 0 auto;  }
div.Header .PropertyContainer, div.NavBarTop .PropertyContainer, div.Middle, div.NavBarBottom .PropertyContainer, div.Footer .PropertyContainer { width: 990px; margin: auto;  } /* Fyll i webbplatsens bredd här */

Gjør søkeveien (breadcrumb) mindre synlig:

a.BreadcrumbItem, span.BreadcrumbLastItem  { font-size: 12px !important; font-weight: normal !important; color: #999 !important; }

Skjul rammene på produktenes informasjonstabell:

table.UserAttributes, table.UserAttributes td { border: 0 !important; }

Større marg for produktene i produktlistene: (når produktenes layout er "Stora ruter")

.HotDeal { margin: 6px 15px 5px 0; }

Skygge rundt hele nettstedet:

div.GeneralLayout { box-shadow: 0 0 5px #888888; }

Navigasjonslenkene i STORE BOKSTAVER:

.NavBarTop a { text-transform: uppercase; }

Skjul venstre sidefelt på førstesiden:

.start-page .ContentArea { margin-left: 0px !important; }

.start-page .NavBarLeft { display: none !important; }

Skjul "Vis per side" og "Sorter etter" menyene øverst i produktlistene:

.CategoryProducts .InputLabelling,

.CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }

eller alternativt skjuler du menyene bare for førstesidens produktliste ved å legge til ".start-page" i starten:

.start-page .CategoryProducts .InputLabelling,

.start-page .CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }