Kehystäminen / borderit halutuille kohteille

Tämä on ollut viime aikoina yksi toivotuimpia postauksia, joten here you go! Tässä postauksessa käsitellään kehystämistä (eli reunustamista, boksaamista, bordaamista, rajaamista... rakkaalla lapsella on monta nimeä!), erilaisia kehysvariaatioita ja kohteita, joihin kehyksiä eli bordereita eli bokseja whatever voi laittaa. Kyseessä on superpitkä ja toivottavasti myös kattava postaus, jotta mahdollisimman monet teistä tajuaa idean ja osaa hyödyntää postauksen oppeja myös käytännössä! Puheet sikseen, tämä postaus on muutenkin tosi pitkä.

***

Esimerkkejä kehyksistä blogissa:

a) Koko blogin kehystäminen

b) Sivupalkin jokaisen gadgetin kehystäminen erilleen toisistaan 

c) Blogipostauksen päivämäärän kehystäminen 

Lähes mitä tahansa blogista voi siis kehystää.  
Koska kyseessä on laaja aihe, on hyvä käydä vielä tähän alkuun CSS-koodin periaate läpi. Jotkut harvat teistä ehkä muistavat tämän postauksen, jossa käsittelin koodaamisen alkeita ja CSS-koodin periaatetta. Siellä käytiin läpi, mikä osuus CSS-koodista on valitsin, mikä on ominaisuus ja mikä on arvo, ja vähän sitä, mitä kunkin määreen paikalle kuuluu laittaa. Tässä vielä siis CSS-koodin perusrakenne:
valitsin {    
ominaisuus:arvo;
}

Kun jotain asioita halutaan kehystää, pitää siis tietää valitsin (=se, mihin halutaan muutos - tässä postauksessa kehykset, esim. postauksen otsikko), ominaisuus (= mikä muutos) ja arvo (= millainen muutos). Tämä on oikeastaan sama kaikissa CSS-koodeissa. 

valitsin {
border: arvo;
}

Kehystämiskoodeissa ominaisuus on siis border, jos halutaan ns. boksata koko valitsin (esim. .post-title eli postauksen otsikko). Jos halutaan ikään kuin laittaa viiva postauksen otsikon alapuolelle, on ominaisuus muodossa border-bottom, eli halutun valitsimen alaosa. Valitsimia on runsaasti, joille voi asettaa ominaisuudeksi border. Jos taas haluttaisiin laittaa viiva halutun valitsimen (esim. se postauksen otsikko) yläpuolelle, olisi ominaisuus muodossa border-top. Tässä siis bordereiden ns. "muotoja":
border-top (valitsimen eli halutun määreen yläpuoli)
border-left (valitsimen vasen puoli)
border-right (valitsimen oikea puoli)
border-bottom (valitsimen alapuoli)
Nuo neljä muotoa yhdessä ovat sama asia kuin käyttäisi niistä pelkkää muotoa border. Nuo neljä "muotoa" ovat käteviä, jos valitsinta, esimerkiksi postauksen otsikkoa, ei halua kokonaan bordata, vaan haluaa laittaa esim. sen alle ohuen viivan. Pelkkää border-ominaisuutta on taas kätevä käyttää, jos haluaa sekä alapuolelle, yläpuolelle että vasemmalle ja oikealle puolelle samanlaisen kehyksen.
Jos siis haluaisi laittaa viivat esimerkiksi postauksen otsikon ala- ja yläpuolelle muttei sivuille (eli ei valitsimen vasemmalle ja oikealle puolelle), koodi olisi tällainen (huomatkaa, että arvon paikalla tulisi olla sen määreet, ei tuota sanaa arvo, eli tuo koodi ei toimi. arvot esitellään tässä postauksessa alempana):
.post-title {
border-top: arvo;
border-bottom: arvo;
}

Jos taas haluaisi boksata päivämäärän kokonaan, koodi voisi olla tällainen:

.post-title {
border-top: arvo;
border-left: arvo;
border-bottom: arvo;
border-right: arvo;
}

TAI tällainen:

.post-title {
border: arvo;
}

Nuo kaksi edellä mainittua koodia siis ajavat täysin saman asian, mutta kätevämpi on käyttää pelkkää ominaisuutta border noiden border-topien ja border-leftien sijasta tässä tapauksessa.

BORDERIN ARVOT

Nyt kun olemme tutustuneet jo lyhyesti valitsimeen ja border-koodin ominaisuuksiin, on kyseessä arvot, kolmas CSS-koodin rakenteen osa. Border-koodeissa borderilla on kolme eri arvoa: paksuus/koko (px-muodossa), ns. "tyyli" (en osaa selittää tarkemmin, selviää paremmin kuvaesimerkkien kautta) ja väri. Nuo kolme arvoa voivat esiintyä border-koodissa sekalaisessa järjestyksessä, mutta seuraavalla tavalla:

[alla siis postauksen otsikon kehystämisen koodi]

.post-title {
border: 3px solid #000000;
}

Arvojen järjestyksellä ei ole väliä - ne voi ilmoittaa tuossa järjestyksessä (koko-tyyli-väri) tai esimerkiksi tyyli-väri-koko tai esim. väri-koko-tyyli.

Tuossa koodissa siis borderin arvoja ovat 3px (paksuus) solid (tyyli, tarkoittaa tässä viivaa) ja #000000 (heksakoodimuotoinen väri, tässä postauksessa kerron CSS-koodien väreistä).
Borderin paksuutta, tyyliä sekä väriä voi muuttaa. Tuolla koodilla tulisi postauksen otsikkoon seuraavanlaiset kehykset:

Jos kehyksestä haluaisi pinkin/lilahtavan,  vähän ohuemman ja katkoviivamaisen, voisi kyseessä olla tämä koodi:

.post-title {
border: 2px dashed #F621E4;
}

Ja tuolla koodilla postauksen otsikon kehys näyttäisi tältä:

Borderin tyylit

Osaatte nyt käyttää px-lukuja eli muuttaa borderin kokoa sekä käyttää värejä heksakoodimuodossa (täällä heksakoodeja), mutta veikkaan, ettei moni tiedä vielä, mitä kaikkia tyylejä (kuten aiemmin tuli jo ilmi solid eli viiva ja dashed eli katkoviiva) voi bordereille laittaa. Siksi ohessa on kuva borderin tyyleistä nimineen blogitekstin päivämäärässä:

ESIMERKKEJÄ KEHYKSISTÄ BLOGISSA KOODEINEEN

Koko blogin kehystäminen:

.content-inner{
border: 2px solid grey;
}

Gadgetien (sivupalkin) kehystäminen:

.sidebar{
border: 3px dotted #0B0973;
}

Jokaisen gadgetin kehystäminen erilleen toisistaan (postauksen alussa, kuva b):

.sidebar .widget{
border: grey 4px double;
}

Katkoviiva postauksen otsikon alapuolelle:

.post-title{
border-bottom: 2px dashed grey;
}

Päivämäärän alapuolelle viiva:

.date-header{
border-bottom: solid 1px black;
}

Postauksen alapuolelle viiva:

.post{
border-bottom: 2px solid #FACE32;
}

Viiva gadgetien otsikoiden alapuolelle:

.sidebar h2{
border-bottom: 1px black solid;
}

Itse suosittelen laittamaan tässä postauksessa esittelemäni koodit mallin suunnittelutyökalun lisäasetuksien CSS-osioon.

***

Huhhuh, olipa pitkä postaus! Toivottavasti saitte tästä jotain irti! :)

Toivepostaus: Blogikoodailun alkeet

Yritän kertoa käsiteltävät asiat mahdollisimman helposti ja lyhyesti, joten päätin jättää johdannon (jonka vain murto-osa tuppaa lukemaan) kokonaan väliin. Mennään siis suoraan asiaan.

Bloggerin blogeissa ulkoasua voi muokata kolmessa paikassa:

- Ulkoasussa

- Mallin suunnittelutyökalussa

- HTML-koodissa

Näistä suosittelen käyttämään Ulkoasua ja Mallin suunnittelutyökalua. Ulkoasussa kannattaa muokata gadgetien paikka, blogin nimi, faviconin liittäminen yms. perusjutut, mutta lähes kaikki koodit suosittelen lisäämään Mallin suunnittelutyökaluun.  

Tietysti on olemassa runsas joukko koodeja, joita Mallin suunnittelutyökaluunkaan ei voi lisätä, mutta peruskoodit se lukee sujuvasti. Niihin tapauksiin on tarkoitettu käyttää HTML-koodia. Alla onkin lista, miksen suosittele käyttämään sitä.

Miksi koodeja ei kannata lisätä blogin HTML-koodiin?

- Mallin suunnittelutyökalua käyttämällä pystytään minimoimaan mahdolliset riskit, joita HTML-koodiin sekaantuminen voi aiheuttaa. Pienikin väärä kirjain/numero väärässä kohdassa voi aiheuttaa suuren katastrofin, pahimmassa tapauksessa blogiisi ei enää pääse, vaan sivu näyttää kaikille varmasti tuttua tekstiä Error.

Kokemuksella voin sanoa, ettei HTML-koodiin kannata kajota ellei ole 101% varma, mitä on tekemässä. Kokeneena koodajaana HTML-koodausta voi tietysti kokeilla. Lisäksi Mallin suunnittelutyökalussa muokkaukset näkee hetkessä, toisin kuin HTML-koodissa. Ja vielä vika juttu: HTML-koodia käyttämällä koodit eivät todennäköisesti toimi enää, jos lisäät ne Mallin suunnittelutyökalun CSS-osioon. Kuten aiemmin mainitsinkin, on olemassa paljon koodeja, jotka eivät kuitenkaan käy CSS-osioon Mallin suunnittelutyökalussa. Ne käyvät vain HTML-koodiin. Jos olet vasta aloittelija, suosittelen jättämään HTML-koodauksen tulevaisuuteen.

KOODIEN LIITTÄMINEN BLOGIIN

Suurin osa tämän apublogin koodeista laitetaan Mallin suunnittelutyökaluun. Alla on kuvasarjaohje, mihin ja miten koodit liitetään sekä varmuuden vuoksi vielä sanallinen selitys.

Hallintapaneeli -> Blogin nimi -> Malli -> Mukauta -> Lisäasetukset -> CSS

Koodit liitetään kenttään, joka on ympyröity punaisella.   

Koodin jälkeen on hyvä painaa entteriä. Itse painan sitä aina kahdesti koodin jälkeen, jotta erilliset koodit erottuvat hyvin.

KOODIEN RAKENTEESTA

Koodeja on erilaisia, ja osaa niistä käytetään CSS:ään. Käydäänpä yleisten CSS-koodien rakenne läpi ja se, millaiset rakenteet kuuluvat HTML-koodin ja millaiset CSS:ään.

Yllä oleva kaappaus on HTML-koodista.  HTML-koodissa suurin osa koodeista on < > -merkkien väliin laitettuja tekstikoodeja. Nämä koodit eivät toimi CSS:ään laitettuna. Jotkut < > -merkkien väliin laitetut koodit toimivat, jos ne laitetaan JavaScriptinä Ulkoasun kautta. Muistakaa siis, että < > -rakenteiset koodit kuuluvat lähinnä vain HTML:ään. Itse en ole perehtynyt HTML-koodeihin, joten niiden rakenteesta en osaakaan muuta kertoa kuin vain sen, että ne alkavat <-merkillä ja päättyvät >-merkkiin.

CSS-koodien rakenne on yksinkertaisempi. Ainoa hankaluus on, että halutuille määreille tarvitaan koodikielelliset määreet. Se saattaa olla välillä pidempikin projekti. Itse tuskailin monta kuukautta yhden määreen kanssa, koska en tiennyt, mikä määre vastaa kyseistä määrettä koodikielellä. Koodailu onkin kuin uuden kielen opettelua.

Alla oleva koodi on navigaatiopalkin värin muuttamiseen kehitelty.

#navbar-iframe {  
background:#ffffff;
}

CSS-koodeissa on kolme tärkeää kohtaa:
1. Valitsin
2. Ominaisuus
3. Arvo

Näiden lisäksi tärkeässä osassa ovat myös aaltosulkeet { ja }.

Valitsin kertoo asian blogista, jota halutaan muuttaa / johon halutaan lisätä jotain. Valitsimen jälkeen tulee {-sulku. Navigaatiopalkin koodissa valitsin on navigaatiopalkki.
Valitsin voi olla myös muodossa .date-header eli valitsimessa on kiinni piste. Yhdyssanat erotetaan usein viivalla.
Ominaisuus kertoo kyseisestä blogin osasta asian, joka halutaan lisätä / jota halutaan muuttaa. Navigaatiopalkin koodissa Ominaisuus on background eli navigaatiopalkin väri. CSS-koodien koodikielellisiä vastineita juurikin Ominaisuus-osassa voi päätellä englanninkielisistä sanoista. Ominaisuuksia voi olla koodissa paljon! Ominaisuuden jälkeen tulee kaksoispiste :
Arvo voi kertoa värin, Ominaisuuden koon jne. Se siis kertoo jotain Ominaisuudesta. Arvon jälkeen tulee puolipiste ;
Kun koodi on valmis, painetaan kerran enteriä ja loppuun lisätään }-sulku.


JOS KOODI EI TOIMI... [ENSIAPUA]

1. Tarkista, että olet kopioinut koodin alusta loppuun. 
2. Kokeile muuttaa koodissa olleita arvoja. Jos arvo on esimerkiksi 10px, kokeile muuttaa arvo esimerkiksi -50px:iin ja katso, huomaatko muutosta.
3. Ethän ole poistanut esim. arvoa muuttaessasi kaksoispistettä jne.?
4. Kokeile, toimiiko blogissasi mikään koodi. Bloggerin bugit voivat aiheuttaa häiriöitä Mallin suunnittelutyökalussa. Lisäksi jos olet kajoontunut blogisi HTML-koodiin, Mallin suunnittelutyökaluun lisätyt koodit eivät enää välttämättä toimi.
5. Tarkista, sopiiko koodi blogisi mallille. Tämän blogin koodit ovat Simplelle, joten en takaa niiden toimivuutta muissa malleissa. Yleensä tämä ei kuitenkaan ole syypää, miksei koodi toimi. 
6. Lisäämäsi koodi voi olla myös ristiriidassa toisen koodin kanssa = toinen koodi kumoaa toisen toimivuuden. 

Ikävä kyllä kaikki koodit eivät toimi kaikissa blogeissa. Blogitkin ovat yksilöitä.

MUUTA MAHDOLLISESTI TÄRKEÄÄ

Jos haluttua määrettä ei osaa muuttaa koodikieleksi, kannattaa hyödyntää muita koodeja. Esimerkiksi tässä blogissa on iso liuta koodeja, joissa on paljon erilaisia Valitsimia ja Ominaisuuksia. Koodikieltä oppii vain harjoittelemalla, kuten vaikkapa englantia tai mandariinikiinaa. Kukaan ei ole seppä syntyessään, ja Harjoittelu tekee mestarin -sanontaan on oikeasti uskominen. Googlettaminen on suotavaa, jos apua kaipaa. Nykyään googlessa on lähes kaikki. Google Kääntäjäkin voi olla avain hakusessa olleeseen määreeseen, nimimerkillä kokemusta on :-D

Toivottavasti tämä postaus avasi edes vähän koodikielestä!

Jos jokin jäi askarruttamaan, kysykää ihmeessä.

xoxo, iltsu