tiistai 27. tammikuuta 2015

Linkkien kursivoituminen hiiren vietäessä päälle

Eli on olemassa linkki, ja kun hiiren vie linkin päälle, teksti muuttuu kursivoiduksi. Blogiin kyseisen hover-efektin saa menemällä Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:

a:hover{
font-style: italic;
}

Postauksen otsikon taakse taustakuva

Tässä postauksessa on ohjeet siihen, miten blogikirjoituksen otsikon taustalle saa taustakuvan. Esimerkki tästä alla:



1. Sulla pitää olla kuva, jonka haluat laittaa postauksen otsikon taustalle. Kivoja kuvia löytyy esimerkiksi Googlen kuvahausta, jota mäkin käytän, vaikka periaatteessa sieltä kuvien kopioiminenhan on laitonta.

2. Kopioi kuvan osoite. Muistakaa, että Photobucketissa osoite kopioidaan kuvan oikealla puolella olevasta boksista klikkaamalla kohtaa Direct.

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

.post-title{
background: url(TÄHÄN TULEE TAUSTAKUVAN OSOITE);
}


4. Valmista tuli! :)

sunnuntai 25. tammikuuta 2015

Tekstin ja kuvien alkaminen samasta kohdasta

Alla oleva kuva hahmottaa, mitä ajan tällä kertaa takaa:


Tästä tulee usein avunpyyntöjä - miten saisi blogikirjoituksen tekstin ja kuvat alkamaan samasta kohdasta? Minulla on teille tässä muutama ratkaisu kyseiseen ongelmaan.

1. TAPA: Tarkista, onko blogitekstisi kuvilla kehykset. Voit tarkistaa sen maalaamalla vasemmalla hiirellä blogitekstejäsi kuvineen päivineen ja katsoa, onko kuvien ympärillä jotain ns. ylimääräistä. Nuo kuvien kehykset saattavat olla läpinäkyvät, jolloin niitä ei voi ilman kuvan maalaamista havaita. 

Jos kuvissasi on kehykset, voit poistaa ne tällä koodilla, jolloin kuvien ja tekstin pitäisi alkaa samasta kohdasta (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
}


2. TAPA: Voit siirtää kuvaa lähemmäs tekstiä tällä koodilla (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img{
margin-left: -10px;
}


Lukua -10 voi muuttaa pienemmäksi tai suuremmaksi. Kyseistä lukua muuttamalla blogitekstin kuvat siirtyvät vasemmalle tai oikealle riippuen siitä, suurentaako vai pienentääkö lukua.

lauantai 24. tammikuuta 2015

Banneri näkyviin mobiiliversiossa

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

.mobile .header-outer{
display:block;
}


Ja muuta ilmoitusasiaa:
Oon saanut nyt tänään 24.1.2015 vastattua useaan kommenttiin, mutta silti aika moni kommentti odottaa vielä vastausta. Vastaan niihin vastaamattomiin tässä muutaman viikon sisällä sen mukaan, miten mulla on aikaa :)! Muistakaa, että kysyä saa aina, mutta vastaamiseen vaan saattaa mennä aika kauan :/

lauantai 3. tammikuuta 2015

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! :)