Ulkoasun muokkaus CSS-koodilla

Omaverkkokaupan ulkoasua voidaan muokata css-koodilla, jos jotain haluttuja ulkoasumuutoksia ei voida tehdä kaupan omalla ulkoasutyökalulla. Voit tehdä muutoksia css-luokkiin viemällä css-koodin Asetukset > Yleiset asetukset > Lisäasetukset -sivulle. CSS-muokkauksissa Firebug tai vastaava selainlaajennos on kätevä apu css-luokkien nimien selvityksessä ja koodin testaamisessa.

Esimerkkejä ccs-muokkauksista

CSS-koodi lisätään style-tagien sisään:

<style type="text/css">

/* Muutetaan kaikki h1-otsikot punaiseksi: */
h1 { color: red !important; }

</style>

Koodin kommentointi alkaa siis /* ja päätetään */ kommentointi helpottaa huomattavasti muutosten tekemistä jälkeenpäin.

Taustakuva keskitetyksi:

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

Taustakuva staattiseksi:

body, html { background-attachment: fixed; }

Taustakuva monistumaan vain vaakasuunnassa:

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

Taustakuva koko ruudun kokoiseksi:

html, body { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Piilotetaan hakemistopolku (breadcrubit) tuoteryhmistä ja tuotesivuilta:

.BreadcrumbItem, .BreadcrumbLastItem { display: none; }

Piilotetaan kehykset tuotteen lisätietotaulukosta:

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

Kirjautumislaatikko vaakatasoon yläpalkissa:

div.Header .ContextBox .BoxContainer { float: left; width: 550px; }
div.Header .InputLabelling { float:left; margin: 2px; width: auto; }
div.Header div.Entry { float: left; width: 210px; }
div.Header .CustomButton { float: right; margin-right: 15px !important; }

Marginaalia etusivun tuotteisiin:

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

Tuoteryhmien puunäkymässä päätuoteryhmää ei näytetä vaan avataan vain alatuoteryhmät:

.jstree ins { height: 103%; width: 100px; }
.jstree-leaf ins { width: 10px; }

Varjostus koko sivuston ympärille:

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

Tulostuslinkin piilotus:

.ContentArea a.LinkPrintView { display: none; }

Navigaatiolinkit CAPSEILLA:

.NavBarTop a { text-transform: uppercase; }

Vasemman sivupalkin piilottaminen: (voidaan käyttää esim vain etusivulla)

.ContentArea { margin-left: 0px !important; }
.NavBarLeft { display: none !important; }

Varastosaldon ikonien piilotus

.ProductOnStockIcon, .ProductOutStockIcon, .ProductWarnStockIcon { background: none repeat scroll 0 0 transparent !important; }

Käytännön esimerkkejä löytyy asiakasgalleriastamme →