Sunnuntailiite: CSS Galleriat

Suomessa on totuttu ehkä hiukan liikaa siihen että blogin ulkoasu on yhtä kuin Vuodatuksen ankean harmaat laatikot. Ei sillä että ankean harmaa laatikko olisi huono idea, mutta kun sen näkee kerta toisensa jälkeen alkaa kyllästyttää. Sen vuoksi minulla on tapana selailla aikani kuluksi CSS gallerioissa erilaisia blogien ulkoasuja. Taas ainakin hetken muistaa, että ne voivat aivan oikeasti olla myös henkeäsalpaavan hienoja. (Samalla tosin saa muistutuksen kuinka itse on vasta pikkuruisissa vauvantöppösissä ulkoasujen suunnittelussa.)

CSS gallerioiden sisällöstä enemmistö on tyypillisiä nettisivuja, mutta tähän sunnuntailiitteeseen olen koonnut sellaisia, joista voi erikseen selailla blogien ulkoasuja. Aina silloin tällöin näistä gallerioista saattaa löytää myös helmiä - sellaisia blogeja joita oikeasti alkaa seuraamaan.

Suosikkini:
CSS Elite
BestWebGallery
CSS Based
CSS Beauty

Muita:
CSS Impress
CSS Mania
Style Boost
Unmatched Style

Kannattaa katsastaa myös nämä:

The Horizontal Way - sivusuunnassa selattavia nettisivuja
404 Error Pages - Smashing Magazinen mahtava lista hienoista neljänollanelosista
Screenalicious.us - helposti selailtavaa silmäniloa johon jää helposti koukkuun
Blogilista kuvitettuna - nimensä veroinen

Read More... Collapse...

Vastaus Yllätystytölle: Banneri linkkinä

Yllätystyttö kysyi:

Osaisitko sanoa, kuinka saisin oman bannerini toimiimaan vuodatuksessa linkkinä?
Tällä hetkellä minulla on siinä bannerin päällä typerä teksti-linkki, jolla kommenteista ja arkistoista pääsee palaamaan viimeisimpään kirjoitukseen, mutta haluaisin, että itse banneri toimisi vastaavana linkkinä.

En osannut vastata tähän suoraan, mutta otin selvää. Sinnikkäästä googletuksesta ei ollut mitään apua, mutta keksin sitten etsiä blogia, jossa banneri toimisi tällä tavalla. Ja sen jälkeen ei tarvinnut muuta kuin poimia vastaus lähdekoodista. Ja vastaus on jopa hyvin yksinkertainen.

Bloggerissa näin:

<div class="banner" onclick="location.href='url';">
(class voi olla myös esimerkiksi id tai banner header)

Ja mieluusti kääntäisin tämän myös Vuodatuskielelle, mutta kun se sattuu olemaan juuri se blogialusta johon en halua koskea pitkällä tikullakaan. Vuodatuksen laatikot aiheuttavat minulle suorastaan päänsärkyä, joten kiitos newsreadereille ettei minun tarvitse niitä katsella. Ja miksi Vuodatuksen pitää olla niin harmaa? Valkoinenkin olisi parempi. Ja jotta minun ei tarvitsisi tehdä tästä pitkää virttä: en vielä tähän päivään mennessä ole löytänyt Vuodatuksesta mitään positiivista. Edes suomalaisuus ei sitä pelasta.

Joten, Yllätystyttö, lopun saat selvittää itse. Etsintä kannattaa aloittaa </style> -tagin alapuolelta.

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

Bannerit

Olen aikaisemminkin ajatellut kirjoittaa tästä aiheesta, mutta kuitenkin tullut siihen tulokseen, että se liittyy enemmän kuvankäsittelyyn kuin bloggaamiseen. Mutta koska tänään Kerma-kakku-mekko-blogissa aiheesta kommentoin...

Virallinen selitys bannerista taitaa olla jotakin tämänsuuntaista "long strip of cloth or paper used for decoration or advertising". Se kuvaa web banneria mielestäni hyvin. Suomi-Amoena-suomi sivistyssanakirjassani web banneri selitetään vielä näin: "se on se blogin yläreunassa sijaisteva pitkänomainen kuva, joka (saattaa) sisältää blogin nimen ja mahdollisesti vielä blogin kuvauksen".

En kuitenkaan aio kertoa kovin kattavasti bannereista, enkä varsinkaan niiden tekemisestä. Mutta annan kaksi mielestäni mainitsemisen arvoista vinkkiä:

1. Tallenna banneri GIF tai PNG formaattiin, sillä ne käyttävät häviämätöntä pakkaustekniikkaa. Tämä ei välttämättä tunnu isolta asialta, mutta tarkkasilmäinen näkee (ihan oikeasti!) eron heti:




JPG-formaatti käyttää häviöllistä pakkaustekniikkaa. Se tarkoittaa sitä, että tallentaessa kuvasta poistuu informaatiota. Tuo .jpg -esimerkkikuva on tallennettu melko vähäisellä pakkauksella, mutta teksti on silti selvästi suttaantunut reunoilta. JPG sopii soveltuu kuitenkin vallan mainiosti valokuville, varsinkin jos säätää pakkaussuhteen sopivaksi.

2. Banneriin voi taitella mitä tahansa kuvien avulla, mutta myöskään tekstin ei tarvitse olla tylsää. Netistä löytyy rajattomasti ilmaisia fontteja, joista melkein kaikkia voi vapaasti käyttää omiin ei-kaupallisiin tarkoituksiin. Esimerkiksi näistä osoitteista löytyy hyviä fontteja:

FontFace
TypeNow
MyFont.de

Yleensä fontti on pakattu .zip-tiedostoksi, jonka purkamiseen tarvitaan siihen tarkoitettu ohjelma. Mikäli sinulla on sellainen, se yleensä aukeaa automaattisesti kuvaketta klikatessa (tai mahdollisesti löytyy valikosta klikatessa hiiren oikealla). Puretusta .zip-tiedostosta (toivottavasti) löytyy .ttf-tiedosto, joka yksinkertaisesti tarvitsee vain copypasteta ohjauspaneelin Fontit-kansioon. Siellä se asentuu automaattisesti ja on valmis käyttöön.

Mikäli tällainen pakkaaminen ja purkaminen menee aivan yli hilseen, niin ainakin FontFacesta löytyy tallennettavaksi .exe-tiedosto. Tallennettua .exeä klikkaamalla pääsee asentamaan fontin suoraan ilman pakkauksen purkua. FontFacessa tämä toiminto on siis "Win" niin kuin Windows. (Luultavasti "Mac" olisi vastaavanlainen Macintoshille.) Ttf lataa pakatun version.

Fontin mukana yleensä tulee jokin viesti fontin tekijältä, ja siitä kannattaa tarkistaa millaiseen käyttöön fontti on sallittu.

PS: Harvoista ei-suomalaisista fonteista löytyy meille niin tuttuja ja rakkaita ääkkösiä.

EDIT: Amoena taitaa olla lukihäiriöinen. Olen aina lukenut ttf:n tif:iksi. Kiitos nw:lle korjauksesta!

Read More... Collapse...

Vastaus Iinalle: Favicon Bloggeriin

Iina kysyi:

Minulla olisi tällainen pikku kysymys... Olen muuttamassa blogiani bloggeriin, mutta yhtä asiaa en ole kerta kaikkiaan käsittänyt. Kun blogi avautuu, osoiterivin eteen tulee Bloggerin logo B. Tiedän että B:n voi muuttaa haluamakseen kuvaksi, mutta en kerta kaikkiaan keksi miten... Voisitkohan auttaa?

Tuo pikkukuva osoiterivin päässä on nimeltään favicon. Käytän tässä postauksessa pohjana Freshblogin ohjeistusta. Sen voi lukea myös suoraan täältä. Faviconin lisääminen on hyvin yksinkertaista, ainoa ongelma on vain sen hostaaminen.

1. Luo itsellesi favicon. Wikipediasta voi lukea millainen oikeaoppinen favicon pitäisi olla, mutta yksinkertaisinta on tehdä ensin kuvankäsittelyohjelmalla sopiva kuva ja käyttää sen jälkeen Favicon Generaattoria. Näet helposti esikatselusta onko faviconisi hyvännäköinen ja sopivankokoinen, eikä resoluutiosta tarvitse välittää pätkääkään, sillä generaattori pitää siitäkin huolen.

Ohjeet Favicon Generaattoriin: Valitse kuva koneeltasi, valitse sopiva resoluutio ja paina "Generate Favicon". Jos favicon on sopiva, lataa (Download favicon.ico) se itsellesi (tallenna levylle).

2. Tallenna faviconisi nettiin. Monet netissä olevat tallennuspalvelut eivät suostu tallentamaan .icoja. Tallentaminen onnistuu (hankalasti) esimerkiksi Freewebsin avulla. Lisää paikkoja löydät täältä. Favicon ei normaalisti näy netissä muualla kuin siellä, missä sen kuulukin näkyä, siis osoiterivissä/kirjanmerkeissä/välilehdissä tms. Älä siis huolestu vaikka et saakaan favicon.ico tiedostoa avautumaan selaimessa.

3. Mene tilaan, jossa voit käsitellä blogisi lähdekoodia (Edit HTML). Lisää allaoleva koodi heti head-tagin alapuolelle.

<link rel="shortcut icon" href="URL of your icon file">
Lisää "URL of your icon file" tilalle oman faviconisi osoite. Esikatsele, mutta huomioithan, että kaikki selaimet eivät faviconeja tue. Mikäli favicon toimii, tallenna muutokset.

Read More... Collapse...

Yhteensopivien värien vaikeus

Olen aikaisemmin kirjoittanut heksakoodeista ja niiden käyttämisen helppoudesta. Mutta mikä minusta ei ole ikinä ollut helppoa on yhteensopivien värien löytäminen. Onneksi siihenkin on keksitty päteviä apuvälineitä.

Osoitteessa www.colormatch.dk on mielestäni kätevin Internetistä löytyvä työkalu. Maalaamaani boksiin copypastetaan sen värin heksakoodi, johon halutaan löytää yhteensopivia värejä. Scheme-valikosta löytyy erilaisia määritelmiä, joiden perusteella työkalu valitsee värit. Ja sen jälkeen onkin helppo copypastettaa haluamiansa värejä sinne minne niitä nyt sattuukin ikinä tarvitsemaan. Päävärin voi myös valita liikuttelemalla työkalussa olevia nappuloita.



Myös tämä tehnee tehtävänsä.

Read More... Collapse...

Ongelman ratkaisua

Edellisestä postauksesta onkin päässyt kulumaan aikaa aivan huomaamatta. Rankka kouluviikko otti kyllä veronsa korkojen kera. Koko viime viikon teimme muovihampaistoon erilaisia paikkoja ja tulevaisuudessa pitäisi vielä viimeistellä ne. Opiskelen siis suuhygienistiksi, en hammaslääkäriksi, jos jollekin tuli mieleen. (Ajattelin että lyhyt pätkä omasta elämästäni tekisi tästä blogista astetta mielenkiintoisemman. Voi olla tosin että menin arvauksissani aivan metsään.)

Ja sitten viime viikkoisen kyselyn tulokseen. Tähän mennessä koodaaminen on kiinnostanut kuutta ja mahdollisesti joskus kiinnostaa kahdeksaa. Olen yllättynyt että ketään "ei kiinnostanut". Vastauksia tuli yhteensä neljätoista.

Olen ajatellut, että koodaaminen on oikeastaan vähän niin kuin sudokun täyttämistä. Jos henkilö, joka ei ole ikinä nähnyt sudokuruudukkoa, pistetään täyttämään sellaista, ei hän ymmärrä sen sääntöjä. Hän voi tietenkin olettaa että numeroista on kyse, mutta häneltä menisi jonkin aikaa ymmärtää pelin logiikka. Sen jälkeen kun säännöt ovat selvillä, hän voi etsiä helppoja kohtia ja täyttää niitä. Ja luonnollisesti harjoitus tekee mestarin sudokussakin. Ja lopulta kun on mestari, voi luoda oman ruudukkonsa ja täyttää numerot siihen juuri niin helposti tai vaikeasti kuin haluaa.

Ja samahan se on vähän koodaamisenkin kanssa. Ensin ei ymmärrä yhtään mitään ja sen jälkeen alkaa näkemään jonkinlaista logiikkaa kun on kuullut pelin säännöistä. Ensin sitä ehkä vähän muuttaa fontin kokoa tai väriä, ja pikku hiljaa sitä oppii tekemään enemmän ja paremmin. Ja harjoittelemalla oppii. Ja kun on mestari, ei tarvitse muuta kuin tyhjän sivun eteensä.

Minä olen todella huono sudokussa, mutta koodaamisessa olen päässyt ainakin sille tasolle, että osaan täyttää niitä itsestään selviä kohtia.

Read More... Collapse...

Goodbye NavBar!

Ärsyttääkö ketään Bloggerissa blogin yläreunassa oleva NavBar? Omasta blogistaan sen saa onneksi helposti pois. Avaa templatesi editiontitila ja lisää alla oleva koodi body-tagin alle. Paikalla ei (omien kokeilujeni mukaan) ole hirveästi merkitystä, kunhan se on body-tagin alla eikä riko mitään muuta koodia. Jos et onnistu ensimmäisellä kerralla, yritä sovittaa koodia johonkin toiseen kohtaan. Muista AINA esikatsella ennen tallentamista!

#b-navbar{ margin-top: -500px;} /* ---- Remove line if you want the Blogger Search bar back at top of page ----*/


/* ---- Remove this section the Blogger Search bar back at top of page ----*/

#navbar #Navbar1 iframe
{
display:none;
visibility:none;
}

iframe{
display:none !important;
}

/* ---- Remove this section the Blogger Search bar back at top of page ----*/

HUOM: En anna edelleenkään takuita muille kuin classic templateille. Bloggerin WYSIWYG-template-editorilla tehdyistä templateista en tiedä mitään.

VINKKI: Kommenttirivit ovat hyödyllisiä, jotta myöhemmin tiedät heti miten NavBarin saa takaisin (poistamalla koko koodin).

PS: Jos joku haluaa (ihan oikeasti) NavBarinsa pois, mutta ei saa sitä itse onnistumaan, autan mielläni. (Siis miten niin olen kyyninen omia vinkkejäni kohtaan?)

PSS: Laitan vielä esimerkin koodin sijoittamisesta:

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

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

#b-navbar{ margin-top: -500px;} /* ---- Remove line if you want the Blogger Search bar back at top of page ----*/



/* ---- Remove this section the Blogger Search bar back at top of page in Blogger Beta ----*/

#navbar #Navbar1 iframe
{
display:none;
visibility:none;
}

iframe{
display:none !important;
}
/* ---- Remove this section the Blogger Search bar back at top of page in Blogger Beta ----*/

#container {
background-color: #ffffff;
line-height: 150%;
margin: 0px auto;
text-align: left;
width: 800px;
border-left: #8760af 10px solid;
border-right: #33cccc 10px solid;
}

Read More... Collapse...

Tuunaa taustakuvasi

Viimeksi esittelin miten templaten värejä saa vaihdettua heksakoodien avulla. Tänään valitsin aiheekseni taustakuvien sijoittamisen koodailun avulla. Ja kukaan palikka ei nyt pelästy, tämä on oikeasti yksinkertaista!

Seuraavaa listaa olen itse lyhentänyt ja muokannut, mutta se on silti pöllitty täältä. Fontin väri on punainen ihan vain siitä iloisesta syystä, että se jota tämä lista ei kiinnosta pätkääkään, voi entistä helpommin hypätä sen yli. Listan jälkeen kerron, miten allaolevia tageja voi helposti hyödyntää.

• background-image:url('taustakuvasi.jpg') Taustakuva, jonka osoite tulee sulkeisiin

• background-repeat:repeat-y Taustakuvaa toistetaan vain y-akselin suuntaisesti eli pystysuoraan

• background-repeat:repeat-x Taustakuvaa toistetaan vain x-akselin suuntaisesti eli vaakasuoraan

• background-repeat:no-repeat Taustakuvaa ei toisteta lainkaan, taustakuva näkyy sivulla vain yhtenä kokonaisena kuvana.

• background-attachment:fixed Tausta pysyy paikoillaan kun sivua vieritetään

• background-attachment:scroll Normaali taustan olotila

• background-position:100px 10px Taustakuva sijoittuu vaakasuuntaisesti 100px:n päähän ja pystysuuntaisesti 10px:n päähän

• background-position:top left Taustakuva sijoittuu 'ylös vasemmalle'

• background-position:top right Taustakuva sijoittuu 'ylös oikealle'

• background-position:right Taustakuva sijoittuu 'oikealle keskelle'

• background-position:bottom right Taustakuva sijoittuu 'alas oikealle'

• background-position:bottom Taustakuva sijoittuu 'alas keskelle'

• background-position:bottom left Taustakuva sijoittuu 'alas vasemmalle'

• background-position:left Taustakuva sijoittuu 'vasemmalle keskelle'

• background-position:center Taustakuva sijoittuu keskelle, sekä pysty että vaakasuuntaisesti

Ja sitten käytännössä: Ensimmäiseksi pitää etsiä omasta templatesta se kohta, jossa tausta määritellään. Se löytyy yleensä melko alusta body:n alta. Jos sinulla ei jo ole taustakuvaa, sen sijalla on luultavasti pelkkä taustavärikoodi, esimerkiksi background: #ffffff; jos tausta on valkoinen. Korvaa se tällä: background-image:url('taustakuvasi.jpg'), huomaa että heittomerkit kuuluvat mukaan. Laita muut määreet sen alle (esimerkiksi background-repeat:repeat-y) omalle rivilleen jä päätä merkillä ;.

HUOM: Ainakaan kun minä yritin, en saanut mahdolliseksi että olisi sekä taustakuva että taustaväri. Jos joku tietää jonkun kikan, kertokoon sen nyt tai vaietkoon iäksi!

Esimerkki: Tällainen litania saa aikaan taustakuvan, joka toistuu oikeassa reunassa pystysuoraan ja pysyy paikallaan kun sivua vierittää:

background-image:url('taustakuvasi.jpg');
background-repeat:repeat-y;
background-position:right;
background-attachment:fixed;

Mutta entä jos minulla ei ole mitään taustakuvaksi?

Taustakuvaksi käy oikeasti mikä tahansa sopivan kokoinen kuva. Netistäkin löytyy kivoja taustakuvia, joita yleensä saa käyttää ilmaiseksi, kunhan muistaa ettei suoralinkitä. Täältä löytyy esimerkiksi ihan kattava kokoelma...

PS: Jostakin syystä tuo ylempänä oleva lista (kuten koko muukin blogi) näyttää aivan hirveältä IE:ssä (ainakin uusimmassa). Tässä on taas yksi hyvä syy vaihtaa nyt heti Mozilla Firefoxiin, eikö?

Read More... Collapse...

Ilmaisia templateja

Netti on tulvillaan sivuja, joista voi hankkia itselleen uuden templaten tuosta vain. Käy kalastelemassa esimerkiksi näissä osoitteissa:

http://www.isnaini.com/blogger-template
http://blogger-templates.blogspot.com
http://www.zootsdesigns.com
http://thrbrtemplates.blogspot.com
http://www.templatepanic.com
http://www.pannasmontata-templates.net/templates
http://blogtemplates.noipo.org
http://www.createblog.com/layouts
http://findtemplates.blogspot.com
http://www.openwebdesign.org
http://www.geckoandfly.com/blogspot-templates/
http://blog-templates.ravasthi.name
http://www.oswd.org/

HUOM: Suurimmassa osassa uusi template ladataan .zip-tiedostona, mikä pitää purkaa esimerkiksi WinRar-ohjelmalla tai vastaavalla. Ennen uuden templaten kokeilemista kannattaa tallentaa nykyinen template esimerkiksi muistioon. Mikäli uuden templaten mukana tulee kuvia, muista hostata ne itse.

Read More... Collapse...

Piristystä blogillesi

Oman huoneensa ilmettä voi uudistaa ja piristää vaihtamalla tekstiilejä. Esimerkiksi kun hankkii uuden pirteän päiväpeiton, niin sänkykin alkaa jollakin mystisellä tavalla tuntumaan uudelta. Uusia huonekaluja ei tarvita. Samaa kikkaa voi kokeilla omaan blogiinsa.

Heksakoodit ovat kuusinumeroisia värikoodeja, joiden edessä on risuaita (#). Kaksi ensimmäistä merkkiä kertovat punaisen määrän kyseisessä sävyssä, kaksi keskimmäistä vihreän ja kaksi viimeistä sinisen. Merkkeinä käytetään numeroita 0-9 ja kirjaimia a-f. 0 on tummin ja f vaalein mahdollinen sävy. Esimerkiksi #ffffff on valkoinen ja #000000 musta.

Tämä kuulostaa monimutkaiselta, mutta on käytännössä yllättävän helppo toteuttaa. Netistä löytyy monia värikarttoja, jotka poimivat heksakoodit automaattisesti. Voit googlettaa värikarttoja esimerkiksi hakusanoilla "hex", "väri" ja "koodi".

Kuvassa on esimerkki osoitteesta http://koti.mbnet.fi/winuus/varikartat.php.

Ja kuinka näillä värikoodeilla sitten voi muuttaa blogin ilmettä?

Bloggerissa tämä tapahtuu muokkaamalla blogin templatea. Tämä ohje on tarkoitettu ensisijaisesti niille, joilla on käytössä classic template (uudessa template versiossa on vain muutama näkyvä heksakoodi, voit muuttaa halutessasi templatesi classiciksi). Selaillessasi koodia ylös ja alas, huomaat varmasti nopeasti sen sisältävän paljon erilaisia heksakoodeja.

Jos haluat tietää minkä värisiä koodit templatessasi ovat, voit syöttää koodin esimerkiksi yllämainittujen kaltaisiin värikarttoihin, tai melkein mihin tahansa kuvankäsittelyohjelmaan. Kuvankäsittelyohjelmat ovat myös helppo keino saada jonkun tietyn värin koodi. Tuo kuva ohjelmaan ja sen jälkeen valitse haluamasi väri pipettityökalulla (dropper tool). Joissakin ohjelmissa heksakoodi ei näy suoraan, mutta esimerkiksi värin päältä klikattaessa se tulee näkyviin.



Ylläoleva kuva on napattu Paint Shop Pro 9 -ohjelmasta. Klikkaamalla kuvaa saat sen suuremmaksi. Kuvassa pipettityökalulla on otettu violetti väri. Pipetti ei näy kuvassa, mutta se aiheuttaa keltaisen boksin, jossa on RGB-arvoja. Alhaalla kuvassa on valkoinen laatikko, jossa heksakoodi on kerrottu.

Aloittelijan on hiukan hankala tietää, mikä koodi muuttaa mitäkin ulkoasussa, mutta kokeilemalla oppii nopeasti. Olen ottanut muutamia esimerkkejä sekä bloggerin omista templateista, että muutamista muista.

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: #000000; Tämä esimerkiksi muuttaa blogin pääfontin väriä
font: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
}/

a:link, a:visited {
font-weight : bold;
text-decoration : none;
color: #c28; Tämä muuttaa linkkien värejä
background: transparent;
}

#container {
line-height: 150%;
position: absolute;
left: 10px;
width: 800px;
background-image: url("xxx");
background-repeat: no-repeat;
background-color: #ffffff; Tämä vaihtaa taustavärin


.title {
font-size: xx-large;
font-family: 'Georgia', Verdana, Times, sans-serif;
color: #000000; Tämä vaihtaa blogin otsikon väriä
margin: 20px 250px 0px 110px;
padding: 5px;
text-align: left;

HUOM: Heksakoodi voi olla lyhennetty kolmeen merkkiin, tai se saattaa olla vain värin nimi, esimerkiksi #white. Jotkin värit toimivat myös noin. Eri ihmisten kirjoittamat koodit näyttävät vähän erilaisilta, joten siksi ei voi antaa yhtä pätevää ohjetta. Kokeileminen ei maksa mitään, eikä satuta ketään.

Kuinka helpoiten leikin templateni kanssa?

Aivan ensimmäiseksi sinun kannattaa kopioida koko templatekoodi ja tallentaa se esimerkiksi muistiolla tai wordilla. Tämä varmuuden vuoksi. Sen jälkeen muuta haluamaasi heksakoodia ja tarkista tulos esikatselemalla se (preview). Voit tehdä useampiakin muutoksia ja esikatsella ne. Jos haluat tallentaa kokeilusi, sitä kannattaa tehdä usein. On melkein suositeltavaa, että alussa tallentaa aina jokaisen onnistuneen koodailun jälkeen. Jos tulos ei tyydytäkään et menetä kaikkia onnistuneita samalla. Kumoaminenhan tapahtuu tietenkin painamalla "Clear Edits". Se poistaa kaikki muutokset edellisen tallennuksen jälkeen.

VINKKI: Voit valita jonkun erittäin huomiota herättävän värin ja kokeilla sitä vuorotellen jokaisen heksakoodin paikalle. Näin näet nopeasti esikatselusta mihin se vaikuttaa. Joskus muutos ei näy suoraan esikatselussa, esimerkiksi se voi vaikuttaa kommentteihin tai kuviin.

Read More... Collapse...