Nätbutikens utseende kan anpassas med CSS-kod i fall det inte skulle gå att genomföra någon önskad förändring med hjälp av designverktyget. Du kan göra ändringar i CSS-klasserna genom att placera CSS-koden på sidan Inställningar > Allmänna inställningar > Avancerade inställningar. CSS-ändringar för mobilvyn görs på sidan Inställningar > Allmänna inställningar > Avancerade inställningar för mobilvisning (i mobilvyn används andra css-klasser).
Webbutikens element har alla en CSS-klass som man kan använda för att göra ändringar eller t.ex. helt dölja ett element med hjälp av css-kod. Det finns bra verktyg för att hitta namnet på css-klassen i webbläsarnas utvecklingsverktyg som finns färdiga i de viktigaste webbläsarna (t.ex. Chrome).
När du gör ändringar med CSS-kod, kom ihåg att testa sidornas design och funktion i olika webbläsare efter varje ändring. I vissa fall används samma css-klass på olika ställen på olika sidor.
Ändringar i designen bör alltid i första hand göras med butikens designverktyg. Använd css-kod endast då designverktyget inte har möjligheten att göra din önskade ändring. Det gör det enklare att hantera designen samt vid framtida uppdateringar.
Med CSS-kod kan man bl.a. göra följande
- Ändra elementens färg, bakgrundsfärg och bakgrundsbild
- Lägga till ramar och skuggor på vissa element
- Ändra elementens höjd, bredd, marginal och padding
- Dölja element
Ladda upp en förenklad mall
En del av ePages nyaste designmallar är mer begränsade när det kommer till css-ändringar eftersom de redan designmässigt är gjorda mer stilrena. Om du vill använda kod för att göra en väldigt anpassad layout så kan du ladda upp en förenklad mall som gör det enklare att använda egen kod.
- Ladda ned filen Plain.style till din egen dator.
- Ladda upp designmallen till din butik genom att klicka på knappen "Importera stil" på sidan Design > Mina stilar.
- Plain-mallen skapas då som en ny stil i din butik. De gamla designmallarna finns också kvar oförändrade.
Exempel på CSS-ändringar
CSS-koden (i det här exemplet "h1 { text-transform: uppercase; }") läggs till innanför style-taggar så här:
<style type="text/css">
/* Ändrar alla h1-rubriker till STORA BOKSTÄVER: */
h1 { text-transform: uppercase; }
</style>
Kommentaren för koden börjar med märket /* och avslutas med */ Texten mellan dessa märken påverkar alltså inte koden utan underlättar bara vid senare redigering av koden.
Vanliga ändringar
I en del designmallar är några sidelement, som t.ex. flaggorna för att välja språk eller länken till varukorgen, inte helt i linje med de andra elementen. Det här kan fixas genom att lägga till den här css-koden:
div { vertical-align: top; }
Sökelementets "sök"-knapp kan i en del designmallar hoppa ner. Det kan fixas med den här koden:
.SearchForm.vertical-search > input { max-width: 120px; }
För att lägga produktsidans sociala medie-knappar i samma linje använder du den här koden:
.SocialWeb { vertical-align: top; }
Centrerad bakgrundsbild:
body, html { background-position: center top;}
Statisk bakgrundsbild:
body, html { background-attachment: fixed; }
Rörlig bakgrundsbild (bilden förljer inte med när man scrollar ner):
body, html { background-attachment: scroll; }
Replikation av bakgrundsbilden endast i horisontell riktning:
html, body { background-repeat: repeat-x; }
Bakgrundsbild som helskärm:
html, body { background-size: 100%; }
Sidhuvudets bakgrund i helskärmsbredd:
.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 */
Gör sökvägen (breadcrumb) mindre synlig:
a.BreadcrumbItem, span.BreadcrumbLastItem { font-size: 12px !important; font-weight: normal !important; color: #999 !important; }
Dölj ramarna på produkternas informationstabell:
table.UserAttributes, table.UserAttributes td { border: 0 !important; }
Större marginal för produkterna i produktlistorna: (när produkternas layout är "Stora rutor")
.HotDeal { margin: 6px 15px 5px 0; }
Skuggning runt hela webbplatsen:
div.GeneralLayout { box-shadow: 0 0 5px #888888; }
Navigationslänkarna i VERSALER:
.NavBarTop a { text-transform: uppercase; }
Dölj vänster sidofält på förstasidan:
.start-page .ContentArea { margin-left: 0px !important; }
.start-page .NavBarLeft { display: none !important; }
Dölj "Visa per sida" och "Sortera efter" menyerna högst upp i produktlistorna:
.CategoryProducts .InputLabelling,
.CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }
eller alternativt döljer du menyerna endast i förstasidans produktlista genom att lägga till ".start-page" i början:
.start-page .CategoryProducts .InputLabelling,
.start-page .CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }