Olemme juuri lisänneet uuden muokattavan ulkoasun Retro valittavaksi käyttöön. Tässä esimerkissä näytämme, kuinka luot haluamasilaisen ulkoasun käyttäen pohjana Retro-teemaa.
Aloitetaan ulkoasun luonti valitsemalla käyttöön Retro-teema kohdasta Ulkoasu -> Teemat. Jos käytössäsi oli perusteema, tulee muokattava teema valittaessa käyttöön valikkoon uusi kohta ”Ulkoasumuokkain”. Mikäli käytössä oli jo ennestään muokattava teema, ei hallintapaneelissa tapahdu muutoksia.
Seuraavaksi pitää valita, kuinka leveä ulkoasusta halutaan, tuleeko sivupalkkeja, mihin kohtaan navigaatio halutaan ja tarvitaanko ulkoasussa muita vimpainalueita. Tässä esimerkissä ulkoasusta tehdään 800px leveä, sivupalkki laitetaan vasempaan reunaan, navigaatio tulee aivan sivun yläreunaan sekä 1 leveä vimpainalue sivun alaosaan. Käytännössä siis seuraavanlainen rakenne.
Seuraavaksi tehdään ulkoasu. Suuntaa kohtaan Ulkoasumuokkain -> Muokkain.
Aloitetaan aivan puhtaalta pöydältä eikä muokata mitään mahdollisesti olemassa olevaa ulkoasua. Klikataan siis hiirellä ”Luo Ulkoasu”-nappia, joka luo täysin uuden ulkoasun. Annetaan avautuvalla sivulla teeman nimeksi esimerkiksi Retro800, jotta muistamme mille teemalle ulkoasu on tehty (Retro-teema, 800px leveä). Valitaan kohdasta leveys ”Muokattu” ja syötetään kenttään 800 kuten teeman leveydeksi alussa päätettiin. Luonnollisesti voit itse päättää leveyden haluamaksesi, mutta tässä esimerkissä käytetään leveytenä 800px. Piilota vimpainalueet valitaan ”Ei” jotta voimme lisätä vimpaineditorissa siihen vimpaimia. Jos valitaan kyllä, vimpaimet eivät tule näkyviin vimpaineditoriin lainkaan. Tyyli kohtaan ei valita toistaiseksi mitään, koska yhtään tyyliä ei ole vielä tehtynä.
Nyt kun nimi ja leveys on kunnossa, päästään rakentamaan itse ulkoasu. Ylimmäiseksi ulkoasussa päätimme laittaa navigaation. Aloitetaan rakennus lisäämällä navigaatio ulkoasuun klikkaamalla hiirellä kohdasta ”Lisää Moduuli”. Valitaan avautuvasta ikkunasta ”Navigointi” ja klikataan ”Lisää Moduuli”. Avautuvassa ikkunassa annetaan moduulille nimi, esimerkiksi ”Navigaatio” sekä valitaan mitä halutaan navigaatiossa näyttää. Valitaan käyttöön ”Asetuksissa lisätyt sivut”. Tämän voi myöhemmin vaihtaa toiseksi jos on tarvetta. Lisätietoa valinnoista saat ohjeista kohdasta valikot. Tallennetaan ja valikko on nyt lisätty ulkoasuun.
Seuraavaksi lisäämme navigaation alle kuvan. Klikataan navigaation alla jälleen ”Lisää Moduuli”. Tällä kertaa käyttöön valitaan ”Kuva” ja klikataan ”Lisää Moduuli”. Annetaan modulille nimi ”ylakuva”. HUOM! Tässä vaiheessa sinulla pitäisi olla tehtynä 800px leveä kuva jotta se sopii ulkoasuun. (leveys siis tietysti sen levyinen kuin ulkoasun leveydeksi valitset). Ladataan kuva ulkoasuun klikkaamalla ”Selaa” ja valitaan kuva tietokoneelta. Valitaan kohdasta ”Korkeus” automatic, koska kuva oli sopivan korkuiseksi muokattu. Linkin URL-kohtaan voi laittaa kotisivun osoitteen, jos halutaan että kuvasta klikkaamalla pääsee esimerkiksi etusivulle. Sivupalkit kohdassa voi valita, halutaanko kuvan kohdalle svupalkkeja, tässä esimerkikssä ei haluta ja siihen jätetäänkinkin ”Ei Sivupalkkeja”. Tallennetaan ja kuva on nyt lisätty ulkoasuun.
Seuraavaksi lisätään sisältöosa sekä sivupalkki. Klikataan kuvamoduulin alla ”Lisää Moduuli”, valitaan ”Sisältö” ja klikataan ”Lisää Moduuli”. Annetaan moduulille nimi ”sisältö”, valitaan käyttöön 1 sivupalkki vasemmalla valitsemalla kohdasta ”Sivupalkit” -> ”1 Vasemmalla” Leveydeksi valitaan 180px ja tallennetaan. Sisältöosa ja sivupalkki on nyt lisätty ulkoasuun.
Seuraavaksi lisätään 1 leveä vimpainalue johon halutaan sijoittaa banneri. Klikaataan sisältömoduulin alla ”Lisää Moduuli”, valitaan käyttöön ”Vimpainpalkki” ja klikataan ”Lisää Moduuli”. Annetaan moduulille nimi ”vimpainpalkki” ja valitaan kohdasta sarakkeet ”1”, jolloin käyttöön tulee vain 1kpl vimpaimia. Jos valitset esimerkiksi 3, käyttöön tulee 3kpl vimpaimia vierekkäin. Tässä esimerkissä siis valitaan 1, koska halutaan koko sivun levyinen vimpain. Sarakelevyes on automaattisesti 100% kun käytössä on 1 vimpain joten siihen ei tarvitse tällä kertaa koskea. Tallennetaan ja vimpainpalkki on lisätty ulkoasuun.
Vielä lisätään sivun Footer eli alaosa. Taas tuttuun tapaan klikataan ”Lisää Moduuli” -> valitaan käyttöön ”Footer” -> annetaan nimi ”alaosa”. Alaosaan emme halua käyttöön sivupalkkeja, joten jätämme kohdan ”Sivupalkit” -> ”Ei Sivupalkkeja”. Tallennetaan ja ulkoasu on nyt valmis.
Tässä vaiheessa ulkoasumuokkaimessa pitäisi näkyä seuraavanlainen näkymä.
Lopuksi vielä tallennetaan kaikki tehdyt muutokset aivan sivun alareunasta klikkaamalla ”Tallenna Ulkoasu”. Nyt käytössäsi on Retro-teema omatekemälläsi ulkoasulla. Koska käyttöön valittiin sivupalkki sekä vimpainosio, lisätään vielä ulkoasun sivupalkkiin ja vimpainosioon vimpaimia.
Suuntaa kohtaan Ulkoasu -> Vimpaimet. Oikeassa reunassa näkyy luomasi vimpainalue -> ”Retro800 – Sisältö – Vasen” sekä ”Retro800 – Vimpainpalkki – 1”. Retro800 on siis antamamme ulkoasun nimi ja sisältö – vasen on ulkoasun sisältöosa + sivupalkki vasemmassa reunassa. Vimpainpalkki – 1 on vimpainalue jonka loimme ulkoasuun.
Nyt lisäämme vimpaimia kyseisiin alueisiin. Sivupalkkiin lisäämme valikon, linkit, sekä Etsi-vimpaimen. Vimpaimet lisätään rahaamalla hiirellä kyseiset vimpaimet vimpainalueseen.
Vimpainpalkkiin lisäämme tekstivimpaimen jotta saamme siihen laitettua bannerin. Ohjeet bannerin lisäämiseksi tekstivimpaimeen löytyy vimpaimien ohjeista.
Nyt sivun ulkoasu on valmis. Jos haluat, sivuston ulkoasua voi vielä hienosäätää tyylimuokkaimella värien, fonttien, reunuksien jne. osalta. Tyylimuokkaimen käyttöä käsitellään tyylimuokkaimen ohjeissa.
Pääset tutustumaan tämän ohjeen avulla luotuun ulkoasuun Retro-teeman esittelysivulla.