{"id":559,"date":"2011-01-30T23:14:59","date_gmt":"2011-01-30T21:14:59","guid":{"rendered":"http:\/\/v.kauko.org\/?p=559"},"modified":"2011-04-02T16:44:10","modified_gmt":"2011-04-02T14:44:10","slug":"oma-otsikkokuva-blogiin","status":"publish","type":"post","link":"https:\/\/v.kauko.org\/?p=559","title":{"rendered":"Oma otsikkokuva blogiin"},"content":{"rendered":"

Avoimen l\u00e4hdekoodin ohjelmistoissa on se hyv\u00e4 puoli, ett\u00e4 niit\u00e4 voi itse sorkkia mieleisekseen. Halusin vaihtaa blogisivustoni otsikon taustaksi itse ottamani valokuvan alkuper\u00e4isen yksi- tai kaksiv\u00e4risen palkin tilalle. Tulipahan opeteltua hiukan php- ja css-koodausta. <\/p>\n

WordPress-blogiohjelman yll\u00e4pitosivuston vasemmasta palkista l\u00f6ytyy linkki Ulkoasu > Muokkain, jolla p\u00e4\u00e4see editoimaan tiedostoja. Olin jo aiemmin osannut laittaa oman naamakuvani p\u00e4\u00e4sivun sivupalkkiin lis\u00e4\u00e4m\u00e4ll\u00e4 sidebar.php<\/em> -tiedostoon html-rivin<\/p>\n

\r\n<img src=\"https:\/\/v.kauko.org\/wp-content\/uploads\/2008\/10\/t89e9erg-7-p.jpg\" alt=\"virpi_p\" \/>\r\n<\/pre>\n
Yl\u00e4palkkiin kuvaa ei saa ihan n\u00e4in yksinkertaisesti, koska se on osa isompaa pakettia, johon kuuluu my\u00f6s taustakuvan p\u00e4\u00e4ll\u00e4 oleva otsikkoteksti. Latasin maisemakuvani omalta koneeltani WordPress-j\u00e4rjestelm\u00e4\u00e4n samalla tavalla kuin muutkin sivustolla olevat kuvat eli Media-nappia klikkaamalla. Kuvan osoitteeksi tuli <\/p>\n
\r\nhttps:\/\/v.kauko.org\/wp-content\/uploads\/2011\/01\/v091217_006pan-800.jpg\r\n<\/pre>\n
Nyt piti siis keksi\u00e4, mihin kohtaan mit\u00e4 tiedostoa t\u00e4m\u00e4 osoite piti lis\u00e4t\u00e4 ja mit\u00e4 ottaa sen tielt\u00e4 pois. <\/p>\n
WordPressin monipuoliselta ohjesivustolta l\u00f6ytyv\u00e4, otsikkoa koskeva
\nohjeistus<\/a> on kiusallisen vaikeaselkoinen ja tarpeettoman monisanainen. Lis\u00e4ksi sin\u00e4 puhutaan yht’aikaa kahdesta eri teemasta (minun k\u00e4ytt\u00e4m\u00e4ni Kubrick<\/i>in lis\u00e4ksi Classic<\/i>ista). Lopulta p\u00e4\u00e4st\u00e4\u00e4n asiaan:<\/p>\n
\nTo change only the header image reference, open the header.php<\/em> template file and look for the styles like this:<\/p>\n
\r\n#header {\r\n         background: url(\"<?php bloginfo('stylesheet_directory'); \r\n         ?>\/images\/wc_header.jpg\") no-repeat bottom center; \r\n        }\r\n#headerimg {\r\n           margin: 7px 9px 0; \r\n           height: 192px; \r\n           width: 740px; \r\n           }\r\n<\/pre>\n
To change the image file, replace the ”kubrickheader.jpg” with the name of the new graphic image you have uploaded to your site<\/b> 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.\n<\/p><\/blockquote>\n
Tuo neuvo vei jo ulalle, koska kyseisess\u00e4 kohdassa eik\u00e4 muuallakaan koko tiedostossa ei lue ”kubrickheader.jpg” . Sen sijaan tiedostossa styles.css<\/em> se on. Mutta pit\u00e4\u00e4k\u00f6 siis vaihtaa se kuvatiedostonimi tyylitiedostossa vai tuo bloginfo()<\/em>-litania otsikkotiedostossa vai molemmat?<\/p>\n
Kokeilin t\u00f6k\u00e4t\u00e4 kuvatiedostoni vuoronper\u00e4\u00e4n eri kohtiin. Yhdell\u00e4 yrityksell\u00e4 koko yl\u00e4palkki vaihtui tyhj\u00e4ksi valkoiseksi alueeksi. Muilla kerroilla ei tapahtunut yht\u00e4\u00e4n mit\u00e4\u00e4n, vaan otsikkoni taustalla oli aina sama vihre\u00e4s\u00e4vyinen py\u00f6ristettykulmainen suorakulmio.<\/p>\n
Mit\u00e4 ilmeisimmin ohjeesta puuttui jokin ty\u00f6vaihe, jonka ohjeen kirjoittaja oli olettanut olevan lukijalle ilmeinen. Minulle se ei ollut. Selasin neuvontapalstoja ja l\u00f6ysinkin useita keskusteluja, joissa oli kysytty samaa asiaa. Vastaukset joko j\u00e4ttiv\u00e4t jotain olennaista sanomatta tai en muuten ymm\u00e4rt\u00e4nyt niit\u00e4. Lopulta tuli vastaan  kirjoitus, josta oli oikeasti apua.<\/a><\/p>\n
Siell\u00e4 kerrottiin tuosta samasta WP-ohjeesta, jota min\u00e4kin olin tavaillut, ett\u00e4 se on muuten hyv\u00e4 mutta se vain ei toimi! Ohjeessa nimitt\u00e4in oletetaan, ett\u00e4 k\u00e4ytt\u00e4j\u00e4ll\u00e4 on otsikkotaustanaan teeman alkuper\u00e4inen sininen<\/b> palkki. Blogissa on kuitenkin ty\u00f6kalu, jolla v\u00e4rej\u00e4 voi s\u00e4\u00e4t\u00e4\u00e4. Jos on valinnut palkkiin omat v\u00e4rit (kuten min\u00e4) niin ohjelma k\u00e4velee kaikkien otsikkokuva-asetusten yli. <\/p>\n
Pulma ratkeaa yksinkertaisesti poistamalla functions.php<\/em> -tiedostosta yhden rivin, tai  viel\u00e4 helpommin klikkaamalla v\u00e4ris\u00e4\u00e4timest\u00e4 nappia ”Kumoa”, joka palauttaa tehdasasetukset eli sinisen taustan. T\u00e4m\u00e4n j\u00e4lkeen WP-ohje toimii — kunhan ymm\u00e4rt\u00e4\u00e4, ett\u00e4 pit\u00e4\u00e4 vaihtaa kuvatiedoston nimi styles.css<\/em> -tiedostossa koko hakemistopolkuineen, ja ett\u00e4 ohjeessa ollut puhe bloginfo<\/em>-tagista ja header.php<\/em> -tiedostosta oli pelkk\u00e4\u00e4 h\u00e4m\u00e4yst\u00e4.<\/p>\n
Painoin siis ”Kumoa”-nappia ja muutin styles.css<\/em> -tiedostosta kohdan<\/p>\n
\r\n#header {\r\n       background: #73.... url('kubrickheader.jpg') no-repeat bottom center ;}\r\n<\/pre>\n
muotoon<\/p>\n
\r\n#header {\r\n       background: #73.... url('https:\/\/v.kauko.org\/wp-content\/uploads\r\n       \/2011\/01\/v091217_006pan-800.jpg') no-repeat bottom center ;}\r\n<\/pre>\n
ja heureka! sininen palkki katosi ja maisemakuvani ilmestyi otsikon taustakuvaksi.<\/b> N\u00e4in helposti se k\u00e4vi — miksi ei t\u00e4t\u00e4 voitu heti sanoa??<\/p>\n
Pari ongelmaa j\u00e4i viel\u00e4: <\/p>\n