Project Template - Design by ja templaten tietojen kirjaaminen

Project Templaten alussa on tällainen taulukko:

/*
-----------------------------------------------
Blogger Template Style
Name:
Designer:
URL:
Date:
----------------------------------------------- */

Voit täyttää siihen oman templatesi tiedot. Mikäli teet tulevaisuudessa enemmän erilaisia ulkoasuja ja esimerkiksi eri blogeille, tuo kertoo sinulle nopeasti mistä ulkoasusta on kyse. Voit lisätä taulukkoon myös omia kohtiasi. Mikäli pidät tuota osiota aivan turhana, voit poistaa sen.

Sen lisäksi sivupalkin Credit-osiossa on tällainen rivi:

Designed by: <a href="url">Me</a><br>

Me:n paikalle voit laittaa oman nimesi ja urlin paikalle oman blogisi osoitteen. Voit myös muokata "Designed by" tekstistä sellaisen kuin haluat. Mikäli et halua nimesi toimivan linkkinä, voit laittaa tuon rivin paikelle yksinkertaisesti näin:

Designed by Me

Mikäli teksti on sinusta liian ylhäällä tai liikaa kiinni seuraavassa tekstissä tai kuvassa (mikäli sellainen on), voit lisätä "tyhjiä rivejä" sen eteen tai perään alla olevien esimerkkien mukaan:

<br>Designed by Me (yksi tyhjä rivi ennen tekstiä)
Designed by Me<br> (yksi tyhjä rivi tekstin jälkeen)
Designed by: <a href="url">Me</a><br> (yksi tyhjä rivi tekstin jälkeen)

Voit lisätä niin monta <br>:tä peräkkäin kuin haluat.

Read More... Collapse...

Project Template - Sivupalkin tuunaamista

A.P. on viime aikoina kysellyt minulta sähköpostitse neuvoja Project Templateen liittyen. Olen vastannut hänelle henkilökohtaisesti, mutta ajattelin, että joku muukin voisi kaivata samoja ohjeita. Joten tässä tulee hiukan Project Template - extraa.

Sivupalkin fontin muuttaminen

1. kopioi tämä rivi:
font-family: 'Geneva', Verdana, Times, sans-serif;
(voit kopioida sen myös templaten body-osiosta)
2. Liitä se #left osioon esimerkiksi näin:

#left {
float: left;
width: 250px;
line-height: 150%;
background-color: #FFFFFF;
margin: 280px 10px 0px 10px;
font-size: x-small;
font-family: 'Geneva', Verdana, Times, sans-serif;
padding-left: 0px;
overflow: hidden;
padding-bottom: 0px;
}

3. Muokkaa riviin haluamasi fontti/fonttiryhmä, mutta huomioi, että vain yleisimmät fontit toimivat kaikilla.

Sivupalkin otsikkojen fontin muuttaminen:

Sama juttu kuin ylempänä, mutta lisää rivi tähän:

.sideheader
{ padding: 3px;
margin-top: 4px;
margin-bottom: 4px;
font-weight: bold;
font-size: medium;
font-family: 'Geneva', Verdana, Times, sans-serif;
color: #000000;
text-align: center; line-height: 140%; }

Erikoisempi fontti sivupalkin otsikoihin

Olet ehkä käyttänyt bannerissasi jotakin erikoista fonttia ja haluat luultavasti käyttää samaa fonttia myös sivupalkissa. Se onnistuu kyllä.

1. Tee otsikot pieniksi kuviksi kuvankäsittelyohjelmallasi ja tallenna ne esimerkiksi Photobucketiin. Jätä mahdollisimman vähän tyhjää tilaa tekstisi ala- ja yläpuolelle. (Kokeilin että ainakin noin 46 pikselin korkuinen kuva mahtuu hyvin sivupalkkiin ilman, että sivupalkkia pitää muuten säätää.)

Seuraavat muutokset tapahtuvat koodin loppupäässä <!-- Begin #left (sidebar information) --> merkinnän alapuolella.

Käytän esimerkiksi Archiven. Oletuksena se on tällainen:

<!-- Begin Monthly Archives Section -->
<div class="sidebox">
<div class="sideheader">
Archive
</div>
<div class="side">
<MainOrArchivePage>
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</MainOrArchivePage>
</div>

</div> <!-- End Monthly Archives Section -->

Tee nämä muutokset:

<div class="sideheader"/>
Archive
</div>

Poista tuosta välistä Archive-otsikko.

Ja sitten lisää tähän väliin:

<div class="sidebox">

<div class="sideheader">

Tämä rivi:

<img src="otsikkokuvanurl"/>

Eli siis näin:

<div class="sidebox">
<img src="otsikkokuvanurl"/>
<div class="sideheader">

Käsittele kaikki sivupalkin osiot samalla tavalla.

Esikatsele ja tallenna jos tulos on OK.

Mikäli otsikkosi on liikaa kiinni vasemmassa reunassa: muokkaa kuvaa niin, että vasemmalle jää tyhjää tilaa.

Read More... Collapse...

Project Template - Sivupalkin sisältö

Tämä jäänee viimeiseksi Project Template jaksoksi, ellei joku henkilökohtaisesti toivo minulta jotain tiettyä ohjetta. Myöhemmin saatan kuitenkin vielä postailla pohjan keskitetylle ulkoasulle.

Pohjana käytetyssä templatessa on sivupalkissa oletuksena seuraavat osiot: "About Me", "Recent Entries", "Archive" ja otsikoimatta jätetty "Credits". Tässä oppaassa kerrotaan, kuinka sivupalkin sisältöä voi muokata ja lisätä.

Otsikoiden muuttaminen

1. Ensimmäiseksi etsi koodista alla oleva ilmoitus sivupalkin määrittelyn alkamisesta:
<!-- Begin #left (sidebar information) -->
2. Jokainen sivupalkin osio on merkitty esimerkiksi näin:
<!-- Begin About Me Section -->
Otsikko löytyy aina jostakin sen alapuolelta:

<div class="sideheader">
About Me
</div>

Vaihda tuohon haluamasi otsikko, esimerkiksi näin:

<div class="sideheader">
Tietoa minusta!
</div>

3. Esikatsele ja tallenna.

Kategoriat ja linkkilistat

Kategoriat eivät perinteisessä templatessa ilmesty sivupalkkiin itsestään, joten ne täytyy lisätä sinne itse käsin koodaamalla. Kategoriat sivupalkissa ovat tavallinen linkkilista, joten samalla mallilla voit tehdä sivupalkkiin esimerkiksi osion, jossa on linkkejä suosikkiblogeihisi.

Kategorian osoitteen saat näin:

Avaa blogisi ja paina postauksen alta haluamaasi kategorian nimeä.
Kategoria avautuu omalle sivulleen.
Osoitteen pitäisi olla tämänsuuntainen:
http://blogiterapiaa.blogspot.com/search/label/Vastaus

Kategoriaosion luominen:

Kopioi alla oleva koodi haluamaasi kohtaan sivupalkkia. Liitä se jonkin "End...Section" ilmoituksen alapuolelle, niin et voi mennä vikaan.

<!-- Begin Labels Section -->
<div class="sidebox">

<div class="sideheader">
Kategoriat
</div>

<div class="side">
<ul>

<li><a href='linkin osoite'>linkin nimi</a></li>

</ul>

</div>

</div>
<!-- End Labels Section -->

Täytä paksunnettuun koodinpätkään haluamasi linkin tiedot, eli osoite, jonka haluat linkittää, sekä sana tai lause joka toimii linkkinä sivupalkissa. Alla esimerkki:

<li><a href='http://tinyurl.com/2fblkl'>terapiaa</a></li>

Lisää uusi linkki tai kategoria näin:

1. Kopioi jokin rivi linkkilistasta ja liitä se haluamaasi kohtaan.
2. Täytä tähän uuteen riviin uuden kategorian tiedot, eli sen osoite ja nimi.
3. Esikatsele ja tallenna.

Muuta

Mikäli haluat sivupalkkiisi jotain muutakin, kopioi vain jokin osio haluamaasi kohtaan ja muokkaa se haluamasi laiseksi. Voit lisätä sivupalkkiin videoita, musiikkia tai mitä tahansa ikinä haluatkin.

Read More... Collapse...

Project Template - Linkit

Löydät koodin alusta tämännäköisen rivin, joka määrittelee miten linkit käyttäytyvät:

a:link, a:visited, a:active {color: #000000; text-decoration: none;}
a:hover {color: #000000; text-decoration: underline;}

Ylempi rivi kertoo, että linkki on vierailtuna ja aktiivisena musta. Alempi rivi taas kertoo, että kun hiiren pistää linkin päälle se alleviivautuu ja on edelleen musta. Voit muokata linkkejä näin: Vaihda sinisien kohtien paikalle haluamasi värikoodit. Vihreiden kohtien päälle voit laittaa haluamasi "erikoistehosteen". Valitse näistä:

none (ei mitään tehostetta)
underline (alleviivaa linkin)
overline (tekee viivan linkin yläpuolelle)
line-through (yliviivaa linkin)

Kun selaat koodia alaspäin, löydät myös nämä:

.title a:link, .title a:visited, .title a:active {color: #000000; text-decoration: none;}
.title a:hover {color: #000000; text-decoration: underline;}

Tämä on kuollutta painoa, sillä mikäli olet noudattanut ohjeita, blogilta on poistettu otsikko. Mikä tarkoittaa sitä, että otsikon käyttäytymistä ei tarvitse määritellä. Halutessasi voit poistaa koko osion.

.side a:link, .side a:visited, .side a:active {color: #000000; text-decoration: none;}
.side a:hover {color: #000000; text-decoration: underline;}

Tämä määrittelee sivupalkin linkit samalla tavalla kuin aikaisemmin. (Mikäli olet laista ja haluat samanlaiset linkit kaikkialle, voit poistaa koko osion.)

Advanced

Mikäli haluat määritellä linkkejä astetta tarkemmin, voit laittaa ensimmäisen linkkiosion tilalle alla olevan koodin (ilman suluissa olevaa mustaa tekstiä!) ja poistaa "title" ja "side" linkkiosiot pois häiritsemästä.

a:link { (linkki ennen kuin siihen on koskettu)
font-weight : bold;
text-decoration: none;
color: #000000;
background: transparent;
}

a:visited { (vierailtu linkki)
font-weight : bold;
text-decoration: none;
color: #000000;
background: transparent;
}

a:hover { (linkki kun sen päällä pidetään hiirtä)
font-weight: bold;
text-decoration: underline;
color: #000000;
background: transparent;
}

Vihreällä merkitty: kuten ylempänä
Sinisellä merkitty: kuten ylempänä
Lilalla merkitty: Tämä on linkin taustaväri. Alkuasetuksena on siis "läpinäkyvä", mutta voit laittaa sen paikalle haluamasi värikoodin tähän tapaan. background: #3BC390;
Violetilla merkitty: Voit laittaa siihen jonkin näistä:

normal
bold
bolder
lighter
100-900 (valitse luku tältä väliltä)

Mikäli et halua käyttää jotakin ominaisuutta, kuten esimerkiksi viimeksi mainittu "font-weight", voit yksinkertaisesti poistaa kyseisen rivin koodista tähän tapaan:

a:active {
text-decoration : none;
color: #000000;
background: transparent;
}

PS: Mikäli haluat käyttää ensimmäistä tapaa, mutta haluat kuitenkin linkillesi taustavärin:

a:link, a:visited, a:active {color: #000000; text-decoration: none;}
a:hover {color: #000000; background-color: #000000;}

tai

a:link, a:visited, a:active {color: #000000; text-decoration: none;}
a:hover {color: #000000; background-color: #000000; text-decoration: underline;}

Read More... Collapse...

Project Template - Margins + Borders + Padding

Project Template pääsee taas jatkumaan kun Amoena on kotiutunut maaseudulta. (Kyllä, minusta on varsin viihdyttävää puhua itsestäni kolmannessa persoonassa.) Tänään on vuorossa näkymättömien ja näkyvien rajojen asettamista.

Löysin netistä tämän ala puolelta löytyvän oivan esimerkin. Mielestäni siinä näkyy selvästi mikä margineiden, bordereiden ja paddingin merkitys ja niiden suhde toisiinsa. "Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element."



Aiheesta kiinnostuneet voivat klikata linkkiä postauksen alapuolella.

Margins

Templatessa marginaalit toimivat samaan tapaan kuin kouluvihkoissa tai konsepteissa. Ne jättävät tyhjää tilaa elementtien ympärille. Templatekoodissa ne voivat olla merkittynä monella eri tavalla. Alla muutamia yleisimpiä esimerkkejä:

1. margin: 0px;
Marginaalit ovat yhtä leveät ylhäällä ja alhaalla sekä molemmilla sivuilla.

2. margin: 0px 0px;
Sinisellä merkitty on ylä- ja alamarginaalien leveys ja vihreällä merkitty oikean ja vasemman.

3. margin: 0px 0px 0px 0px;
Sinisellä merkitty on yläreunan marginaali, vaaleampi sininen oikean, vihreä alareunan ja vaaleampi vihreä vasemman reunan.

4. margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
Marginaalit voi myös määritellä näin.

Kaikki tavat ovat yhtä toimivia, joten niistä voi valita itselleen sopivimman tai käyttää kaikkia sekaisin, kuten minulla on (pahana?) tapana.

Borders

Borderit ovat viivoja. Esimerkiksi tämän blogin sivuilla olevat violetti ja sininen viiva on tehty niillä. Nekin voi määritellä useammalla eri tavalla samaan tapaan kuin marginaaleja (katso siis ylempi). Project Template -templatessa yleisin kaava on kuitenkin tämä:

border-left: solid 1px #000000;
Sinisellä merkitty kertoo viivan sijainnin, vihreä viivan tyylin, violetti viivan paksuuden ja lila viivan värin.

Eri viivatyylejä ovat:
solid
dotted
dashed
double
sekä
groove
ridge
inset
outset
mutta näiden viimeksi mainittujen käyttäminen ei ole niin suositeltavaa, sillä ne renderöityvät eri selaimissa eri lailla.

Padding

Padding määrittää siis elementin sisään jäävän tilan. Joissakin tapauksissa sitä ei tarvitse välttämättä käyttää ollenkaan, vaan sen voi korvata marginaaleilla.

Käyttäminen

Tämä saattaa tuntua tyhjän päälle jättämiseltä, mutta näiden kolmen käyttämisessä avainsanana on ehdottomasti kokeileminen. Voit lisätä näitä kolmea oikeastaan minne tahansa, kunhan pysyttelet </style>-tagin yläpuolella. Kopioi ja liitä jokin valmis rivi tai kirjoita se itse haluamaasi kohtaan ja kokeile mitä tapahtuu. Alla muutama esimerkki:


#left {
float: left;
width: 250px;
line-height: 150%;
background-color: #FFFFFF;
margin: 280px 10px 0px 10px;
font-size: x-small;
padding-left: 0px;
overflow: hidden;
padding-bottom: 0px;
border: solid 1px #000000;
}

Tässä esimerkissä sivupalkin ympärille on lisätty ohut musta reunus.

#main {
width: 490px;
margin-top: 57px;
padding: 10px;
text-align: left;
margin-left: 10px;
margin-right: 10px;
border: solid 1px #000000;
float: right;
overflow: hidden;
background-color: #FFFFFF;
}

Tässä esimerkissä tekstiosion ympärille on asetettu musta reunus. Sen lisäksi tekstin ja reunuksen väliä on kasvatettu (padding).

Luettavaa: CSS Beginner Tutorial

Read More... Collapse...

Project Template - Vastauksia

En ymmärrä, mielestäni teen oikein, mutta tallentaessani koodia se näyttää punaisella: Malliasi ei voitu jäsentää, koska se ei ole oikein muotoiltu. Varmista, että kaikki XML-elementit on suljettu oikein.Mitä teen väärin? Voitko auttaa? :)

Tämä oli postattu taustavärien ja taustakuvan yhteyteen, mutta en ole varma liittyykö tämä siihen. Olen tarkastanut kaikki esimerkkini, joten mikäli niitä käytetään tarkasti ohjeiden mukaan liittyen tähän tiettyyn koodin, niiden pitäisi toimia moitteettomasti. Tarvitsisin siis tarkempaa tietoa, että mistä koodista on kyse.

Mutta ottaen huomioon mainintasi XML-herjauksesta, voisin vannoa, että kyseessä on se, että yrität käyttää classic templatelle tarkoitettuja ohjeitani widget-templateen. Se ei ole tarkoitus eikä suurin osa koodeista edes toimi siinä.

Koska ilmeisesti monilla on epäselvää, että mikä on classic template ja mikä on widget-template, teen tämän helpoksi.

Sinulla on käytössäsi widget-template, mikäli muokkaat ulkoasua tämännäköisen härpäkkeen kautta:





Sinulla on classic template, mikäli sinun ulkoasu-osiosi näyttää tältä:



Klikkaamalla suuremmaksi.

Read More... Collapse...

Project Template - Vastauksia

Diamond:

Mulla on ongelmia tuon html-koodin kanssa, sieltä ei löydy tuota #left{ , tai .side{ , eikä #main :ta , vaikka tuo on bloggerin koodi :O

Olin ehkä hiukan huolimaton sanoessani, että tässä projektissa tehdään Blogger-template. Tuolla minun koodillani kun ei ole mitään tekemistä Bloggerin valmiiden ulkoasujen kanssa. Tarkoitukseni oli sanoa, että tässä projektissa tehdään template joka toimii ainoastaan Bloggerissa.

Tuo minun käyttämäni koodi on saatavilla täältä ja sen käyttämisestä mainittiin jo ensimmäisessä Project Template -postauksessa. Tarkoitus oli, että jokainen osallistuja käyttäisi samaa pohjaa, jolloin minä voin kirjoittaa yksityiskohtaisia ohjeita. Html ja css kun onnistuu näyttämään hyvin erilaiselta aina tapauksesta riippuen, joten ilman yhteistä pohjaa tämä projekti olisi aivan mahdottomuus.

***

Tässä projektissa muuten ei pääsääntöisesti ollut tarkoituksena tuottaa täydellistä templatea, vaan päästä alkuun, niin että koodin muokkaaminen ei tuntuisi enää mahdottomalta ajatukselta. Ja kun sitä sitten aikansa harjoittelee (ja vääntää pari kolme aivan järkyttävän huonoa ulkoasua!) se lopulta aukeaa ja tadaa, niillä eväin pärjääkin sitten jo vaikka minkälaisien ulkoasujen kanssa.

***

Miten saa tehtyä niin, että taustakuva tulee vain sivuille, eikä siihen mihin kirjoitetaan?

No nyt se mitä halusin onnistu sellaisella 'sidebar' kohdalla, mutta lopputulos ei ole sellainen kuin haluaisin: haluaisin blogini ulkoasun näyttävän tältä, kuin kerma-kakku-mekko-blogissa http://kermakakkumekko.blogspot.com/ ,enkä tältä kun se nyt näyttää minun blogissani. Osaisitko neuvoa miten taustakuvan saisi tuollalailla?

Ensimmäiseen: Jos pohjana on käytetty minun antamaani koodia ja olet noudattanut kirjaimellisesti minun antamiani ohjeita, taustakuvan pitäisi juuri tulla "sivuille". Jos olet käyttänyt minun antamaani koodia, mutta se ei mene sinne minne pitäisi, tarkista että olet lisännyt taustakuvan varmasti body-osioon ohjeiden mukaan. Mikäli olet käyttänyt jotain muuta koodia kuin minun antamaani, en voi auttaa mitenkään. Minun pitäisi nähdä koodi ja tietää mihin olet taustakuvaa yrittänyt laittaa.

Ja toiseen: Sinulla on widget-template, ja niistä en tiedä mitään. Parempi kun kysyt maapähkinähillo-voileipältä itseltään, joka selkeästi pärjää niiden kanssa :)

Read More... Collapse...

Project Template - Taustavärit + Taustakuva

Taustavärit

Lue aikaisempi postaukseni heksakoodeista, mikäli ne eivät ole sinulle entuudestaan tuttuja. Kannattaa heti alkuun opetella, että #000000 on musta ja #FFFFFF valkoinen. Niitä värejä kun yleensä tarvitsee eniten.

Blogin taustaväri:

1. Selaa koodia hiukan alaspäin niin, että tämä kohta tulee esille:

body {
       margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.


Sisällön taustaväri:

1. Selaa koodista tämä kohta esille:

#container {
     line-height: 150%;
     position: absolute;
     left: 0px;
     width: 800px;
     background-image: url("http://www.sinun.bannerisi.osoite.png");
     background-repeat: no-repeat;
     background-color: #FFFFFF;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.


Tekstiosion taustaväri:

1. Selaa koodista tämä kohta esille:

#main {
     width: 490px;
     margin-top: 225px;
     padding-left: 0px;
     padding-right: 0px;
     text-align: left;
     margin-left: 10px;
     margin-right: 10px;
     float: right;
     overflow: hidden;
     background-color: #FFFFFF;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.

Sivupalkin taustavärit:

1. Selaa koodista tämä kohta esille:

#left {
     float: left;
     width: 200px;
     line-height: 150%;
     background-color: #FFFFFF;
     margin: 225px 10px 0px 10px;
     font-size: x-small;
     padding-left: 0px;
     overflow: hidden;
     padding-bottom: 0px;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.
4. Selaa koodia vielä enemmän alaspäin kunnes löydät tämän kohdan:

.side {
     padding: 5px;
     margin: 5px;
     font-size: x-small;
     background-color: #FFFFFF;
     color: #000000;
     text-align: left;
     line-height: 140%;
}

5. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
6. Esikatsele ja tallenna muutos mikäli se miellyttää.

Taustakuva:

Lue aikaisempi postaukseni taustakuvista.

1. Selaa koodia tähän kohtaan:

body {
     margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

2. Lisää siihen uusi rivi taustakuvaa varten näin ikään:

body {
     margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     background-image:url('taustakuvasi.jpg');
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

(Et voi pitää samaan aikaan taustaväriä ja taustakuvaa, joten voit poistaa vihreällä merkityn taustaväririvin. Voit kuitenkin halutessasi jättää rivin esimerkiksi tulevaisuutta varten ja huolehtia vain siitä, että taustakuvarivi on taustaväririvin alapuolella.)

3. Laita taustakuvasi osoite sinisellä merkittyyn kohtaan.
4. Esikatsele ja tallenna.

Mikäli haluat määritellä taustakuvasi sijaintia ja käyttätymistä tarkemmin:

1. Lisää haluamasi määreet violetin esimerkin mukaisesti taustakuvarivin alapuolelle. Voit siis käyttää useampaa tai vain yhtä.

body {
     margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     background-image:url('taustakuvasi.jpg');
     background-repeat:repeat-y;
     background-position:right;
     background-attachment:fixed;
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

Löydät listan erilaisista määreistä esimerkiksi täältä. Muista lisätä ; jokaisen uuden rivin perään!

Read More... Collapse...

Project Template - Banneri

Tämä projekti etenee siinä järjestyksessä, kuin minä normaalistikin etenen kun teen templatea. Ja minä aloitan aina bannerista. Kun se on valmis ja paikallaan, kaikki muu yleensä loksahtaa paikalleen melkein kuin itsestään.

So let's start.

Bannerin tekeminen

Lue ensimmäiseksi mitä olen aikaisemmin kirjoittanut bannereista.

Koska tämän projektin tarkoitus on kannustaa luovuuteen, en anna muita rajoituksia bannerille, kuin että sen täytyy olla 800 pikseliä leveä ja että siinä täytyy lukea blogin nimi (ja kuvaus mikäli haluaa). Korkeudella ei siis ole merkitystä.

Voit rakentaa banneriin tavalliseen tapaan, kuten minä olen tehnyt:



Tai voit asetella sen tämän esimerkin mukaan, jolloin tekstiosio menee osittain bannerin päälle:



Kun banneri on valmis, lataa se haluamallasi tavalla nettiin. Minä käytän tähän tarkoitukseen Photobucketia.

Bannerin asettaminen paikalleen

1. Avaa templatekoodi
2. Vieritä koodia kohtaan #container
3. Kopioi bannerin osoite sille merkitylle paikalle:
background-image: url("banner url");
Eli siis näin:
background-image: url("http://www.sinun.bannerisi.osoite.png");
4. Esikatsele ja tallenna mikäli banneri ilmestyi vasempaan yläreunaan.

Sisällön suhteuttaminen banneriin

Blogin sisältö saattaa mennä bannerin päälle, tai olla muuten vain huonosti. Näit saat tilanteen korjattua:

Blogin nimen ja kuvauksen poistaminen bannerin päältä:

1. Selaa koodia reilusti alaspäin, kunnes löydät tämän kohdan:


< !-- Banner -->
< div class="banner">
< div class="title">
< ItemPage><a href="<$BlogURL$>"></ItemPage>
< $BlogTitle$>
< ItemPage></a<>/ItemPage>
</div>

< div class="description">
< $BlogDescription$>
< /div>
< /div>

< !-- End Banner -->


2. Ja poista se KOKONAAN!
3. Esikatsele ja tallenna mikäli blogin nimi ja kuvaus katosivat bannerin päältä.


Keskiosio:

1. Vieritä koodi kohtaan #main
2. Lisää tai vähennä pikseleitä tästä kohdassa margin-top: 57px; kunnes keskiosio on mielestäsi sopivalla korkeudella. Käytä esikatselua.
3. Tallenna muutokset

Sivupalkki:

1. Vieritä koodi kohtaan #left (huom: ei kohtaan #left h2!)
2. Lisää tai poista pikseleitä sinisellä merkitystä kohdasta: margin: 280px 10px 0px 10px; kunnes sivupalkki on mielestäsi sopivalla korkeudella. Käytä esikatselua.
3. Tallenna muutokset.

Mikäli haluat bannerin aivan kiinni vasempaan reunaan (oletuksena siinä on 10 pikselin rako):

1. Vieritä koodia kohtaan #container
2. Laita tähän left: 10px; arvoksi 0px. Tai mikäli haluat kasvattaa väliä, lisää siihen suurempi summa.
3. Esikatsele ja tallenna.


HUOM: Ole huolellinen koodia käsitellessäsi. Yksikin ylimääräinen merkki väärässä paikassa saattaa hajottaa koko templaten. Virheitä on ikävä metsästää, joten on parempi välttää niitä.

PS: Minulla on tietenkin oma Project Template -blogi, johon teen samassa tahdissa muutoksia kuin tämä projekti etenee. Voit katsella edistymistä täällä.

Read More... Collapse...

Project Template - Alku

Tästä postauksesta alkaa luultavasti melko pitkään jatkuva Project Template. Jossain vaiheessa eksyin alkuperäisestä suunnitelmastani luoda blogi, jossa kerrottaisiin selvällä suomenkielellä miten templateja voi muokata mieleisekseen. Nyt aion korjata suunnan oikeaksi.

Ulkoasujen tekeminen Bloggerille on oikeasti lasten leikkiä. Alkuun pääseminen vain on hiukan hankalampaa. Sen vuoksi suunnittelin tämän projektin, jossa yksityiskohtaisesti ja yksi kohta kerrallaan opastan muokkaamaan templatea. Onnistuminen on takuuvarmaa vaikka ei olisi ikinä koodannut yhtään mitään.

Edellytykset projektiin osallistumiselle:

Projektissa tehdään Blogger-template. Osaa ohjeista voi varmasti soveltaa myös esimerkiksi Vuodatuksen sivupohjiin, mutta pääasiassa kaikki ohjeet ovat siis vain ja ainoastaan Bloggerille. Huolimatta siitä, että widget-templatet tuntuvat olevan hallitsevassa asemassa, tässä projektissa tehdään classic template. Käytönnössä se tarkoittaa näitä kahta muutosta:

1. Blogin alareunasta katoaa mahdollisuus selata postauksia eteen ja taaksepäin. Vanhojen postauksien lukeminen tapahtuu siis vanhaan tuttuun tapaan arkiston kautta, kuten esimerkiksi tässä blogissa.
2. Kategoriat eivät ilmesty automaattisesti sivupalkkiin, vaan jokainen kategoria pitää koodata sinne käsin. Siihen luonnollisesti tulee selkeät ohjeet projektin aikana.

Sen lisäksi sinulla pitäisi olla jokin kuvankäsittelyohjelma (ilmainen Gimpkin käy mainiosti) ja esimerkiksi Photobucket-tili, johon voit tallentaa kuviasi.

Mikäli haluat osallistua, toimi näin:

1. Luo itsellesi uusi blogi. Voit halutessa sallia sen katselemisen vain "authoreille".
2. Avaa tila, jossa voit käsitellä ulkoasun HTML-koodia. Sinun pitäisi nähdä valkoinen laatikko, jossa on koodia.
3. Valitse valkoisen boksin alta "Revert to classic template" tai "Palauta perinteinen malli" kielestä riippuen. Paina OK esiin poksahtavaan ikkunaan.
4. Poista koodi kokonaan valkoisesta boksista ja liitä huolellisesti täältä kopioimasi koodi sen tilalle.
5. Esikatsele ja tallenna. Templaten pitäisi näyttää suunnilleen tältä.

HUOM: Mikäli Blogger valittaa XML-erroria tms, varmista että olet varmasti muuttanut templaten classiciksi/perinteiseksi kuten kohdan 3 mukaan.

Millainen ulkoasu tästä suunnilleen syntyy: Valitsin muokattavaksi pohjaksi yksinkertaisen vasempaan reunaan ankkuroidun templaten. Siihen tulee isokokoinen banneri, joka jää osittain tekstiosion alle. Enempää templatesta ei voi sanoa, sillä siitä tulee tietenkin tekijänsä näköinen.

PS: Tämä on vain yksi projekti alkuun pääsemiseksi. Tämän projektin jälkeenk tulen edelleen postailemaan erilaisia muokkausohjeita classic templatelle.

Toiveita ja ehdotuksia saa vapaasti esittää.

Read More... Collapse...