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ä.