Ulkoasun muokkaus CSS-koodilla

Starter Yes
Mini Yes
Active Yes
Pro Yes

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

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 teemme muokkauksen puolestasi 55€ toimenpidemaksulla.

 

Jaa sisältö