Oma otsikkokuva blogiin

30.1.2011

Avoimen lähdekoodin ohjelmistoissa on se hyvä puoli, että niitä voi itse sorkkia mieleisekseen. Halusin vaihtaa blogisivustoni otsikon taustaksi itse ottamani valokuvan alkuperäisen yksi- tai kaksivärisen palkin tilalle. Tulipahan opeteltua hiukan php- ja css-koodausta.

WordPress-blogiohjelman ylläpitosivuston vasemmasta palkista löytyy linkki Ulkoasu > Muokkain, jolla pääsee editoimaan tiedostoja. Olin jo aiemmin osannut laittaa oman naamakuvani pääsivun sivupalkkiin lisäämällä sidebar.php -tiedostoon html-rivin

<img src="http://v.kauko.org/wp-content/uploads/2008/10/t89e9erg-7-p.jpg" alt="virpi_p" />

Yläpalkkiin kuvaa ei saa ihan näin yksinkertaisesti, koska se on osa isompaa pakettia, johon kuuluu myös taustakuvan päällä oleva otsikkoteksti. Latasin maisemakuvani omalta koneeltani WordPress-järjestelmään samalla tavalla kuin muutkin sivustolla olevat kuvat eli Media-nappia klikkaamalla. Kuvan osoitteeksi tuli

http://v.kauko.org/wp-content/uploads/2011/01/v091217_006pan-800.jpg

Nyt piti siis keksiä, mihin kohtaan mitä tiedostoa tämä osoite piti lisätä ja mitä ottaa sen tieltä pois.

WordPressin monipuoliselta ohjesivustolta löytyvä, otsikkoa koskeva
ohjeistus on kiusallisen vaikeaselkoinen ja tarpeettoman monisanainen. Lisäksi sinä puhutaan yht’aikaa kahdesta eri teemasta (minun käyttämäni Kubrickin lisäksi Classicista). Lopulta päästään asiaan:

To change only the header image reference, open the header.php template file and look for the styles like this:

#header {
         background: url("<?php bloginfo('stylesheet_directory'); 
         ?>/images/wc_header.jpg") no-repeat bottom center; 
        }
#headerimg {
           margin: 7px 9px 0; 
           height: 192px; 
           width: 740px; 
           }

To change the image file, replace the ”kubrickheader.jpg” with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic’s location.

Tuo neuvo vei jo ulalle, koska kyseisessä kohdassa eikä muuallakaan koko tiedostossa ei lue ”kubrickheader.jpg” . Sen sijaan tiedostossa styles.css se on. Mutta pitääkö siis vaihtaa se kuvatiedostonimi tyylitiedostossa vai tuo bloginfo()-litania otsikkotiedostossa vai molemmat?

Kokeilin tökätä kuvatiedostoni vuoronperään eri kohtiin. Yhdellä yrityksellä koko yläpalkki vaihtui tyhjäksi valkoiseksi alueeksi. Muilla kerroilla ei tapahtunut yhtään mitään, vaan otsikkoni taustalla oli aina sama vihreäsävyinen pyöristettykulmainen suorakulmio.

Mitä ilmeisimmin ohjeesta puuttui jokin työvaihe, jonka ohjeen kirjoittaja oli olettanut olevan lukijalle ilmeinen. Minulle se ei ollut. Selasin neuvontapalstoja ja löysinkin useita keskusteluja, joissa oli kysytty samaa asiaa. Vastaukset joko jättivät jotain olennaista sanomatta tai en muuten ymmärtänyt niitä. Lopulta tuli vastaan kirjoitus, josta oli oikeasti apua.

Siellä kerrottiin tuosta samasta WP-ohjeesta, jota minäkin olin tavaillut, että se on muuten hyvä mutta se vain ei toimi! Ohjeessa nimittäin oletetaan, että käyttäjällä on otsikkotaustanaan teeman alkuperäinen sininen palkki. Blogissa on kuitenkin työkalu, jolla värejä voi säätää. Jos on valinnut palkkiin omat värit (kuten minä) niin ohjelma kävelee kaikkien otsikkokuva-asetusten yli.

Pulma ratkeaa yksinkertaisesti poistamalla functions.php -tiedostosta yhden rivin, tai vielä helpommin klikkaamalla värisäätimestä nappia ”Kumoa”, joka palauttaa tehdasasetukset eli sinisen taustan. Tämän jälkeen WP-ohje toimii — kunhan ymmärtää, että pitää vaihtaa kuvatiedoston nimi styles.css -tiedostossa koko hakemistopolkuineen, ja että ohjeessa ollut puhe bloginfo-tagista ja header.php -tiedostosta oli pelkkää hämäystä.

Painoin siis ”Kumoa”-nappia ja muutin styles.css -tiedostosta kohdan

#header {
       background: #73.... url('kubrickheader.jpg') no-repeat bottom center ;}

muotoon

#header {
       background: #73.... url('http://v.kauko.org/wp-content/uploads
       /2011/01/v091217_006pan-800.jpg') no-repeat bottom center ;}

ja heureka! sininen palkki katosi ja maisemakuvani ilmestyi otsikon taustakuvaksi. Näin helposti se kävi — miksi ei tätä voitu heti sanoa??

Pari ongelmaa jäi vielä:

  • kuva oli hiukan leveämpi kuin muu blogisivu.
  • otsikkoteksti oli keskellä horisonttia, josta halusin siirtää sen ylemmäs.

Pienensin GIMPillä kuvan 740 pikselin levyiseksi ja vaihdoin sen tilalle. Uusi kuva oli juuri oikean levyinen, mutta nyt laitoihin jäi törröttämään siniset kaistaleet. Vaihdoin värikoodin #73…. harmaaksi #777, mutta tällä ei ollut mitään vaikutusta.

Sitten löysin tyylitiedostosta toisenkin #header-alkuisen kohdan:

#header {
	background-color: #73....;
	padding: 0;
	height: 200px;
	width: 758px;
	}

Vaihdoin tuohon leveydeksi saman kuvaleveyden 740px. Nyt siniset laidat katosivat, mutta koko kuva oli hiukan liikaa vasemmalla. Lisäsin vasenta marginaalia:

#header {
	background-color: #777;
	margin: 0 0 0 10px;
	padding: 0;
	height: 200px;
	width: 740px;
	}

ja heureka! kuva oli vihdoin oikeassa paikassa.

Vielä oli jäljellä otsikkotekstin siirto keskeltä ylävasemmalle. Tyylitiedostosta löytyi kohta

h1 {	font-size: 4em;
        text-align: center;
	}

josta oli helppo arvata, että vaihtamalla sanan center tilalle left teksti siirtyy vasemmalle, ja margin- ja padding -komennoilla voi säätää tarkemmin. Pystysuunnassa siirtoon löysin lisäapuja täältä. Vaihdoin koodin muotoon

h1 {font-size: 3.5em; 
    position: relative;
    top: -40px;
    left: 40px
    }

ja heureka! otsikkoteksti nousi sopivalle korkeudelle.

Myöhemmin löysin toisaalta samasta tiedostosta kohdan

h1 {
	padding-top: 70px;
	margin: 0;
	}

jolla olisi päässyt samaan lopputulokseen vaihtamalla 70:n tilalle jonkun pienemmän luvun, tai vaihtoehtoisesti poistamalla koko pätkän ja laittamalla aiempaan kohtaan -40:n sijasta jonkun pienen positiivisen luvun. Koko tyylitiedosto oli ennestäänkn paikoin lievästi ”tilkku tilkun päälle” -menetelmällä tehdyn oloinen; ehkäpä joskus innostun siistimäänkin sitä.

Kommentit on suljettu.