Q: Pikainen kysymys, millä komennolla blogin yläpalkkiin saa laitettua itsetehdyn kuvan? Yritin katsella ohjeista, mutta en päässyt pitkälle.
A: Heippahei,
Eipä tuolla wikissä aiheesta oikein ole mitään selkeää selvitystä tällä hetkellä. Kaikki ohjeistukset on kyllä työn alla, kun vaan ehtisi vähän enemmän.
Tässä on nyt aiheesta kaksi erilaista esimerkkiä. Blogin yläpalkin leveyshän vaihtelee selainikkunan leveyden mukaan, eli esim. eri kokoisilla näytöillä yläpalkki näkyy eri levyisenä. Jotta yläpalkki näyttäisi hyvältä kaikenlaisilla leveyksillä, pitää tehdä joko yksi superleveä kuva tai sitten kaksi kuvaa, joista toinen on otsikkokuva ja toinen taustakuva, joka sitten toistuu niin monta kertaa, kuin kullakin yläpalkin leveydellä on tarpeen.
Huh miten vaikeaa selittää… No, esimerkit valaissevat asiaa. Toka esimerkki on ehkä hitusen helpompi toteuttaa, mutta tämä on vähän makuasiakin.
ESIMERKKI 1: Maanantaiposti, http://maanantaiposti.kyweb.fi Maanantaiposti-blogin omasta css:stä löytyy tällaiset merkinnät (myös muuta, mutta otin vain olennaiset):
#kylteri_header {
height: 120px;
background-image: url(http://maanantaiposti.kyweb.fi/files/2007/10/header_bg2.jpg);
background-position: top
}
#kylteri_header_img {
background-image: url(http://maanantaiposti.kyweb.fi/files/2007/10/header_header2.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#kylteri_header_topic a {
display:none
}
#kylteri_header_description {
display:none
}
Yläpalkissa on siis päällekkäin kaksi kuvaa: taustakuva, joka toistuu loputtomasti (http://maanantaiposti.kyweb.fi/files/2007/10/header_bg2.jpg), ja otsikkokuva, joka näytetään vain kerran (http://maanantaiposti.kyweb.fi/files/2007/10/header_header2.jpg).
Ideana on se, että kun teet otsikkokuvaa, laitat siihen sellaisen taustan, josta voidaan leikata viipale ja sitä vaakatasossa toistamalla luoda yhtenäistä pintaa. Pystysuuntaiset liukuvärit toimivat, samoin yksivärisyys, vaakaraidat jne. Joka tapauksessa taustan pitää olla kohtuullisen yksinkertainen. Koska otsikkokuva liikkuu vapaasti taustan päällä, esim. ruutukuviot eivät onnistu – ruuduthan eivät välttämättä osu vaakasuunnassa kohdilleen.
Otsikkokuvaan voi toki laittaa myös jotain muuta kuvamatskua pelkän taustan ja tekstin lisäksi, kunhan kuvan molemmissa reunoissa on ihan vähän sitä taustapintaa, jota voidaan sitten jatkaa sillä pienellä taustakuvalla.
Taustakuva laitetaan esimerkki-css:n mukaisesti kylteri_header-kohtaan ja otsikkokuva kylteri_header_img-kohtaan. Otsikkokuvan voisi yhtä hyvin asemoida oikealle tai vasemmalle. Kuva näkyy sitten aina selaimen oikeassa tai vasemmassa reunassa, ja loppualue täyttyy taustakuvalla.
Periaatteessa voit tehdä myös niin, että rakennat otsikkokuvan tietyn väriselle taustalle, ja määrittelet sitten css:llä yläpalkin taustaväriksi sen tietyn värin. Käytännössä jpg-tallennus kuitenkin vääristää yleensä värejä sen verran, että raja otsikkokuvan ja taustavärin välillä jää näkyviin. Kannattaa toki kokeilla. Jos haluat tehdä yksivärisen taustan, kannattaa siis kuitenkin pääsääntöisesti tehdä taustakuvaksi sillä värillä täytetty ruutu.
ESIMERKKI 2: KY-Shakki, blogikoulutuksen demoblogi (http://pimpchess.kyweb.fi/)
Tämän blogin oma css näyttää tältä:
#kylteri_header {
background: url(http://pimpchess.kyweb.fi/files/2007/10/header.jpg) no-repeat left top;
height: 150px;
}
#kylteri_header_img {
display: none;
}
#kylteri_header_topic {
display: none;
}
#kylteri_header_description {
display: none;
}
Tässä yläpalkissa on siis vain yksi otsikkokuva, joka on tosi leveä (http://pimpchess.kyweb.fi/files/2007/10/header.jpg). Turvallinen leveys on joku 2000 pikseliä, harvalla niin isoa näyttöä on, ettei tuo leveys riittäisi.
Nyt taustana voi olla ihan mitä vaan, koska minkään ei tarvitse sopia saumattomasti yhteen. Jos siis taustana haluaa käyttää jotain ei-niin-geometrista juttua (vaikka tällaista http://kyweb.fi/static/images/introt/intro_yhteiso_tausta.jpg), tämä on hyvä ratkaisu.
Varsinainen otsikkografiikka sijoitetaan sitten vasemmalle, oikealle tai keskelle, ja kuva asemoidaan sen mukaan (ks. css). Tässä shakkiesimerkissä kuva on asemoitu vasemmalle, sen sijaan esim. Sinivihreät-vaaliliiton blogissa kuva on asemoitu keskelle (kuva http://sinivihreat.kyweb.fi/files/2007/10/header1.jpg, blogi http://sinivihreat.kyweb.fi).
Kannattaa huomata, että näitä molempia tekniikoita voi käyttää pelkän taustakuvan laittamiseen, ja antaa blogin nimen näkyä siinä päällä ihan kirjoituksena, niin kuin se oletuksena on. Tekstin väriä ja fonttia voi tietysti muuttaa.
Toivottavasti tästä oli edes jotain apua,
Riikka