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.