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).

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 type="text/css">
/* 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.

 

Yleisiä korjauksia

Joissain ulkoasupohjissa jotkut navigaatioelementit, kuten maavalinnan liput tai ostoskori-linkki eivät ole linjassa muiden elementtien kanssa. Tämän saa korjattua lisäämällä rivin css-koodiin:

div { vertical-align: top; }

Sivupalkissa olevan hakuelementin "hae" nappi voi tipahtaa alaspäin joissain ulkoasupohjissa. Tämän voi korjata seuraavalla rivillä:

.SearchForm.vertical-search > input { max-width: 120px; }

Tuotesivulla olevien some-nappien asetteaminen samaan linjaan:

.SocialWeb { vertical-align: top; }

 

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%; }

 

Ylätunnisteen tausta koko ruudun levyiseksi:

.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;  } /* Määritä sivuston leveys tähän */ 

 

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 koko sivuston ympärille:

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

 

Navigaatiolinkit CAPSEILLA:

.NavBarTop a { text-transform: uppercase; }

 

Vasemman sivupalkin piilottaminen etusivulta

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

 

Valikkojen "näytä sivulla" ja "Järjestä" piilottaminen tuoteryhmäsivuilta

.CategoryProducts .InputLabelling,
.CategoryProducts select.ep-uiInput.ep-uiInput-select { display: none; }

 

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ö