sunnuntai 28. joulukuuta 2014

Harmaa tausta pois blogin vastaajan kommenteista

Tarkoitan siis tätä:



Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

.comments .comment-thread.inline-thread {
background-color: transparent;
}


Ja voilá, harmaa tausta katosi!

Ärsyttävä viiva pois kommenteista

Ärsyttävällä viivalla tarkoitan tätä:


Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.comments .continue {
border: transparent;
}


lauantai 27. joulukuuta 2014

Gadgetien (ja blogiarkiston) keskittäminen

Olin varma, että mulla on tästä jo postaus - mutta kun sellaista etsin linkattavaksi, en sellaista löytänyt. No, jos se joskus tulee vastaan, poistan sen, mutta jos sellaista ei kerran oikeasti ole, tämä olkoon pysyvä postaus siitä eli sivupalkin gadgetien keskittämisestä.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.sidebar {
text-align: center;
}


Kaikki gadgetit eivät kuitenkaan keskity tuolla koodilla. Jos haluat keskittää blogiarkiston sisällön (joka ei tuolla aiemmalla koodilla siirry keskelle), lisää alla oleva koodi CSS:ään:

#ArchiveList{
text-align: center;
}


Postausten kuvien pyöristäminen

Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

.post-body img {
border-radius: 30px;
}

Border-radiuksen jälkeinen arvo 30 vaikuttaa postauksen kuvien kulmien pyöreyteen. Sitä lukua voi siis muuttaa pienemmäksi tai suuremmaksi. Mitä suurempi arvo, sitä pyöreämmät kulmat postausten kuville.  

Tuolla luvulla 30px kuvan kulmat näyttävät jotakuinkin tältä:



tiistai 23. joulukuuta 2014

Blogitekstin rivivälin muuttaminen

Bloggerin tekstityökalussa ei pysty muuttamaan riviväliä, mutta onneksi niiden muuttaminen onnistuu ystävämme CSS:n avulla. Jos et ole tyytyväinen blogitekstisi riviväliin, mene Malli -> Mukauta -> Lisäasetukset -> Lisää alla oleva koodi CSS:ään:

.post-body {
line-height: 1.6;
}


Line-heightin jälkeistä arvoa 1.6 voi muuttaa - mitä suurempi arvo, sitä suuremmat välit.

maanantai 22. joulukuuta 2014

Gadgetien otsikon koon muuttaminen ja hieman niiden kustomointia

Otsikko puhuu puolestaan! Postauksen koodilla voi siis muuttaa  sivupalkin gadgetien otsikon kokoa ja aakkoslajia (selitän alempana). Jos haluat tämän ominaisuuden blogiisi, toimi siis näin:
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

.sidebar h2 {
font-size: 20px;
text-transform: uppercase;

color: grey;
background: blue;
}


Font-size-ominaisuuden jälkeistä arvoa 20 voi muuttaa - se kertoo otsikon kirjainten koon. Arvo voisi olla esim. 15 tai 46.
Colorin (= tarkoittaa tässä itse gadgetin otsikon tekstin väriä) jälkeistä arvoa grey voi muuttaa mieleisekseen väriksi. Värit voivat olla heksakoodimuodossa (eli esim. #cccccc) tai englanninkielisiä värejä, kuten koodissa olen käyttänyt. Tässä postauksessa lisää väreistä.
Background on tässä gadgetin otsikon tausta, ja ominaisuuden jälkeistä väriarvoa blue (=eli sininen) voi muuttaa. Jos gadgetille ei halua taustaa, voi kohdan poistaa koodista tai bluen tilalle laittaa esim. transparent (=läpinäkyvä). 
Text-transformeistä ei olekaan tässä blogissa aiemmin ollut puhetta, joten kerron niistä nyt vähän.
Text-transform tarkoittaa ainakin wikipedian mukaan aakkoslajia. Aakkoslaji taas tarkoittaa suuria ja pieniä kirjaimia. Text-transform on ominaisuus, ja sen jälkeinen osa arvo, kuten koodissa uppercase eli TÄLLAINEN KIRJOITUS.
Esimerkkejä text-transformin arvoista:
lowercase: tällainen kirjoitus, eli ei isoja kirjaimia
uppercase: SE TULIKIN JO ÄSKEN ELI VAIN ISOJA KIRJAIMIA
none: Ei mitään, eli samanlainen, kuin tekstin aakkoslaji oli ennen text-transformin valitsemista.
capitalize: Tällainen Kirjoitus, Eli Joka Sanan Ensimmäinen Kirjain On Iso Kirjain
Koodissa arvon uppercase tilalle voi siis valita jonkin ylläolevista arvoista.

Olen nyt joululomalla, joten kerkeän luultavasti auttaa teitä enemmän ja tekemään myös toivomianne postauksia mm. kehystämisestä :)!

lauantai 6. joulukuuta 2014

Miten pienennetään marginaaleja?

Tämän postauksen aiempi versio hävisi tuhkatuuleen huonon tietokoneeni takia kommentteineen - pahoittelut vielä siitä hässäkästä! Jouduin siis tekemään tämän uudestaan. Jospa tästä saisi selvää yhtä hyvin kuin edellisestäkin!

Marginaalit ovat teille varmasti jostain yhteydestä tuttuja - jo ala-asteen ekoilla luokilla opettajat neuvoivat piirtämään marginaaleja matikan vihkon reunoihin. Toiset piirsivät marginaaleistaan leveämpiä, toiset taas kapeampia. Yksinkertaisesti sanottuna marginaalit ovat reunoja, joita voi pienentää tai suurentaa. Alla oleva kuva havainnollistaa teille, mitä marginaalien pienentäminen blogimaailmassa tarkoittaa.




Marginaalien pienentämiseen on olemassa erilaisia tekniikoita. Olen kuitenkin mieltänyt seuraavan koodin kätevimmäksi tähän hommaan. Toimi siis näin:
Malli -> mukauta -> lisää css:ään alla oleva koodi:

.content-inner {
padding: 0px;
}


Punaista lukua 0 voi muuttaa. Jos käytät siis arvoa 0, marginaalit ovat olemattomat. Nolla on tässä koodissa pienin mahdollinen arvo. Jos muutat lukua 0 suuremmaksi, marginaalit levenevät eli valkoiset reunat kasvavat. Kannattaa kokeilla erilaisia vaihtoehtoja, jotta löytää sen arvon, joka miellyttää eniten omaa silmää. Muistakaa muuten pienentää blogin leveyksiä samalla, kun käytätte tätä koodia!


Jos sivupalkki ei mene tarpeeksi reunaan, voitte muuttaa sivupalkin siirtymistä enemmän reunaa kohti lisäämällä tämän koodin suunnittelutyökalun CSS:ään:

.sidebar {
margin-left: 10px;
}


Punaista lukua 10 voi muuttaa.

Toivottavasti tämän postauksen koodit auttoivat! :)

torstai 4. joulukuuta 2014

BLOGI MENEE KIINNI VIIKONLOPUKSI

BLOGI ON KIINNI 5.12. - 7.12. KOSKA KONEENI HÄVITTI POSTAUKSEN JA TEKSTEJÄ BLOGISTANI. KÄYTÄN VIIKONLOPUN BLOGIN HUOLTAMISEEN ENNALLEEN.

Hei kaikki! (4.12.12 klo 20.55)

Ette tiedäkään, miten paljon mua tällä hetkellä ottaa päähän. Tänään (kerrankin, pitkästä aikaa!) mulla oli aikaa olla täällä apublogissani, vastata teidän kommentteihinne ja tutkiskella vanhoja postauksia kirjoitusvirheitä etsiskellen. Huomasin, että erääseen postaukseen olin unohtanut linkittää tunnisteita, joten menin muokkaamaan kyseistä postausta. No, ostin tuossa kuukausi sitten vanhan romun tilalle uuden tietokoneen, jota nettisivustot suorastaan kehuivat. Kone ei kuitenkaan täyttänyt lupauksiaan - se on laginut ja temppuillut tosi paljon. Tarkoitus olisi viedä se huomenna huoltoon. Ja miten tämä kone tähän soppaan liittyy? Kun menin muokkaamaan marginaali-postausta, tietokone lopetti toimintansa ja meni jumiin. Se ei enää ladannut postausta, jota olin menossa muokkaamaan. No, kun kone lopetti lagimisen, lisäsin tunnisteen ja tallensin. Tuloksena koko kone meni uudestaan jumiin ja hävitti koko postauksen. Mukavaa, eikö? Samalla katosi myös kaikki postaukseen laitetut kommentit - kaikkiin en edes ollut ehtinyt vielä vastata... Olen tästä hurjan pahoillani! Nyt kun menin katsomaan postausluetteloa, muutama postaus oli mennyt ihan sekaisin. Anteeksi vielä tästä episodista! Näin ei todellakaan saisi käydä.
Yritän viikonlopun aikana luoda uuden postauksen vanhan tilalle ja hoitaa muitakin blogin ongelmia, joten blogi on kiinni 5.12. - 7.12. Viimeistään maanantaina pääsette taas koodiblogini pariin - toivottavasti sitten blogi on taas menetetyistä teksteistä huolimatta kunnossa!