Verkkokaupan 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. Mobiilinäkymän css-muutokset tehdään Asetukset > Yleiset asetukset > Mobiilinäkymän lisäasetukset -sivulla (mobiilinäkymässä on eri css-luokat). Huomio Jos käytössä on responsiivinen teema, mobiilinäkymä ei ole käytössä vaan kaikki koodit lisätään normaalinäkymän kenttään.
Verkkokaupan elementeille on annettu CSS-luokka joiden ulkoasuun voidaan tehdä muokkauksia tai elementtejä voidaan piilottaa näkyvistä css-koodin avulla. Luokkien nimien tunnistamisessa on hyvä työ kalu selaimen kehitystyökalu, joka löytyy valmiina laajennoksena tärkeimmistä selaimista (esim Chrome).
Kun teet muutoksia CSS-koodiin muista testata sivujen ulkoasu ja toimivuus muokkauksen jälkeen eri selaimilla. Joissain tapauksissa sama css-luokka on käytössä eri sivuilla eri kohteilla.
Ulkoasun muokkaus kannattaa aina ensisijaisesti tehdä kaupan ulkoasutyökalulla. Käytä css-koodia vain silloin, kun ulkoasutyökalussa ei ole mahdollisuutta haluamaasi muokkaukseen. Tämä helpottaa ulkoasun ylläpitoa ja päivittämistä jatkossa.
CSS-koodilla voit tehdä mm. seuraavia toimenpiteitä
- Elementtien värien, taustavärien ja taustakuvien muokkaus
- Kehysten ja varjostusten lisääminen tietyille elementeille
- Elementtien korkeuden, leveyden, marginaalin ja täytteen muokkaaminen
- Elementtien piilottaminen
Jos tarvitset esimerkiksi tekstin korvausta tai muita muutoksia, mitä ei CSS-koodilla pysty tekemään, niin lue täältä lisää jQuery-koodin käyttämisestä: https://www.vilkas.fi/tuki/suite/tuki/jquery-koodin-kayttaminen-verkkokaupassa
Esimerkkejä ccs-muokkauksista
CSS-koodi lisätään style-tagien sisään:
<style>
/* Muutetaan kaikki h1-otsikot näkymään ISOILLA KIRJAIMILLA: */
h1 { text-transform: uppercase; }
</style>
Koodin kommentointi alkaa merkinnällä /*"ja päättyy */. Näiden merkintöjen välissä oleva teksti ei siis vaikuta koodin toimintaan, vaan kommenteilla helpotetaan koodin muokkaamista jälkeenpäin.
Sivun 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 { background-size: 100%; }
Sivupolku vähemmän näkyväksi:
a.BreadcrumbItem, span.BreadcrumbLastItem { font-size: 12px !important; font-weight: normal !important; color: #999 !important; }
Piilotetaan kehykset tuotteen lisätietotaulukosta:
table.UserAttributes, table.UserAttributes td { border: 0 !important; }
Tuotelistan tuotteisiin lisäää marginaalia: (kun tuotteiden asetteluna on "Isot laatikot")
.HotDeal { margin: 6px 15px 5px 0; }
Varjostus sisältöalueen ympärille:
div.Middle { box-shadow: 0 0 5px #888888; }
Navigaatiolinkit CAPSEILLA:
<style>
.NavBarTop a { text-transform: uppercase; }
</style>
Valikkojen "näytä sivulla" ja "Järjestä" piilottaminen tuoteryhmäsivuilta
<style>
.CategoryProducts .InputLabelling,
.CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }
</style>
Jos tarvitset apua CSS-koodin muokkaamisessa, kysy apua asiakaspalvelustamme! Opastamme oikean css-luokan löytämisessä tai voimme kirjoittaa tarvittavan koodin ja muokkauksen puolestasi erikseen laskutettavana työnä 120€/h+ALV.