| Starter |
 |
| Mini |
|
| Active |
|
| Pro |
|
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.
Last ned filenPlain.style til datamaskinen din.
Last opp designmalen til nettbutikken ved å klikke på knappen "Importer motiv" på siden Design > Mine motiver.
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; }