Ladataan ...
Pimp My Blog -tapahtuma järjestetään torstaina Arkadian kellarin atk-luokassa kello 17 alkaen. Ilmoittautuminen on jo mennyt ohi, mutta tilaa on vielä innokkaille blogin tuunaajille. Mikäli et kuitenkaan pääse paikalle, tässä on joitakin ohjeita ja johdattelua blogin tuunaamisen saloihin. Käytännössä saat blogistasi hyvin näköisesi suhteellisen pienellä vaivalla, joten kannattaa tarttua toimeen!
Sivuvalikot
Sivuvalikot ovat blogin laidassa olevia palstoja, joiden avulla voit tuoda lukijoidesi nähtäville mm. tietoja blogistasi, tuoreimmat kirjoituksesi, kommentit, linkkejä ja Flickr-kuvia. Pääset muokkaamaan blogisi sivuvalikoita blogin hallinnassa Ulkoasu-välilehden kohdassa Sivuvalikot. Esillä on kaksi palstaa ja niiden alla laatikko, jossa on raahattavia laatikoita, vimpaimia. Voit raahata niitä yläpuolella oleviin palstoihin ja muokata niiden järjestystä. Voit muokata joidenkin vimpaimien asetuksia painamalla laatikon oikeassa reunassa olevaa nappia. Kun olet valmis, paina Tallenna.
Blogin ulkoasu
Voit muokata myös sivusi ulkoasua ja tyyliä vapaasti CSS-määrittelyjen avulla. CSS on merkintäkieli, jolla voit muokata esimerkiksi taustakuvia, värejä, fonteja ja asettelua. Tyylimäärittelyjä muokataan blogin hallinnassa Ulkoasu-valikon kohdassa Oma CSS. Omat CSS-asetukset korvaavat oletusmuotoilut. Esittelen alla muutamia kikkoja, joiden avulla voit kätevästi muuttaa sivun ilmettä.
Lisää tietoa CSS-tyyleistä
Värejä määrittelyjä varten
Tausta
Aloitetaan määrittelemällä body-elementti eli koko sivun tausta.
body {
background-color: #ffffff;
background-image: url(http://www.osoite.com/kuva.jpg);
background-repeat: repeat;
}
Ohessa on määritelty sivun taustaväriksi #ffffff, joka on valkoisen värin koodi. Lisäksi on määritelty taustakuva, joka sijaitsee osoitteessa http://www.osoite.com/kuva.jpg. Erilaisia taustoja löydät esimerkiksi Googlen avulla. Esimerkissä on määritelty myös taustan toistuvuus siten, että kuvaa toistetaan pysty- ja vaakasuunnassa. Vaihtoehdot ovat no-repeat, jolloin kuva esitetään ainoastaan kerran, repeat-x, jolloin kuvaa esitetään ainoastaan vaakasuunnassa ja repeat-y, jolloin kuvaa esitetään ainostaan pystysuunnassa.
Yläpalkki
Yläpalkki on se osa blogia, jossa on oletuksena tummanvihreä liukuväri taustana, blogin otsikko sekä kuvaus. Voit helposti muokata sen taustaväriä ja -kuvaa sekä tekstin väriä. Voit myös piilottaa tekstin kokonaan halutessasi.
#kylteri_header {
background-color: #000000;
background-image: none;
}#kylteri_header_topic a {
color: #dddddd;
}
Oheisessa esimerkissä taustaväriksi määritellään musta ja taustakuva piilotetaan. Lisäksi Määritellään otsikon tekstin väriksi vaaleanharmaa.
#kylteri_header_topic {
display: none;
}#kylteri_header_description {
display: none;
}
Yllä on merkintä, jolla voidaan piilottaa blogin otsikko ja kuvaus kokonaan.
Päävalikko
Päävalikko on sisältöalueen yläpuolella sijaitseva valikko, jossa on linkit Blogi ja RSS, sekä linkit luomiisi sivuihin blogissa (näitä sivuja voit lisätä blogin hallinnassa Kirjoita-välilehden kohdassa Kirjoita sivu). Voit muokata päävalikkoa esimerkiksi muokkaamalla sen taustaväriä.
#kylteri_menu {
background-color: white;
}#kylteri_menu_items li a {
color: black;
}
Oheisella merkinnällä voit vaihtaa valikon taustavärin valkoiseksi ja linkkien värin mustaksi. Voit käyttää myös muissa kohdissa käytettyjä määrittelyjä muotoilemaan mitä tahansa elementtiä sivulla.
Fontit ja linkit
Fontteja ja linkkejä voit muokata myös suhteellisen vapaasti, vaikkakin sivuston yhtenäisyyden kannalta on toivottavaa pysyä maltillisemmissa ratkaisuissa. Alla
body {
font-family: Times New Roman, Georgia, serif;
font-size: 110%;
}a:link {
color: red;
font-weight: bold;
}
Tällä esimerkillä saisit blogisi käyttämään ensisijaisesti fonttia Times New Roman. Jos sitä ei käyttäjällä ole, käytetään Georgiaa tai jotakin päätyviivallista fonttia. Lisäksi kirjasinten kooksi on määritelty normaalia 10% suurempi koko. Merkintä a:link määrittelee klikkaamattomien linkkien muotoilua. Ohessa on määritelty niin, että linkkien väri on aina punainen ja ne ovat lihavoituja. Voit tarkentaa linkkien määrittelyjä myös klikattuihin linkkeihin (a:visited) tai linkkeihin, joiden päällä hiiri on (a:hover).
Tässä lyhyt oppimäärä CSS-muotoiluihin. Parhaiten tyylimäärittelyjä oppii kokeilemalla, joten kädet likaisiksi vain! Kysymyksiä ja ratkaisuehdotuksia saa toki myös pyytää kommenteissa. 