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

57 kommenttia:

  1. KIITTI IHAN SAIRAASTI ♥
    tästä oli ihan sairaasti apua :3

    VastaaPoista
    Vastaukset
    1. Jes, kiva kuulla! Vähän nimittäin hirvitti, että tuliko liian pitkä ja aivan liian epäselvä postaus tehtyä! Mutta kiva, että ainakin sulle on ollut tästä hyötyä:)<3!

      Poista
  2. Moi! Osaisitko neuvoa miten blogiin saa sellaisen "mustan yläpalkin" johon saa linkkejä? Tähän tyyliin mitä esim. Tässä blogissa on www.iidaoikarinen.com onko jotain koodia olemassa millä tollasen pystyis tekemään niin että se liikkuu sivun mukana? :-)

    VastaaPoista
    Vastaukset
    1. Moi! Kiitti postausvinkistä, toteuttelen tuosta teille postausta jossain vaiheessa, kun saan tarpeeksi hyvin aikaa toteutukseen - kyseessä on nimittäin ainakin mun tiedoilla aika monimutkainen homma :D

      Poista
  3. voitko tehdä postauksen siitä miten saadaan "vaihtuva banneri" kun hiiren laittaa päälle? esim. tuuliemiliaa.blogspot.com on tämmönen. oisin tositositosi kiitollinen jos auttaisit ♥

    VastaaPoista
    Vastaukset
    1. Joo, mutta sullekin vastaan, että jossain vaiheessa - ehkä hiihtolomalla, kun ei ole koeviikkoa mailla halmeilla ja aikaa on runsaasti. :/ Tää on kyllä tosi valitettavaa, mutta arkena mulla ei yksinkertaisesti ylimääräistä aikaa juuri jää lukion takia, ja viikonloput menee yleensä rentoutumisessa. Kiitti postausideasta :)!

      Poista
  4. Voi kiitos! Tätä etsiskelinkin eilen! :) Oli kyllä hyötyä, ja selkeet ohjeetkin! :-)

    VastaaPoista
  5. hei tää tuli tarpeeseen, kiitos!

    osaatko sanoa, miten välilehdille/sivuille saisi ne erottavat viivat ja kehyksen? sen jälkeen kun keskitin ne, ei ole voinut laittaa niitä enää mallin muokkaustyökalulla :(

    VastaaPoista
    Vastaukset
    1. Mmmm... se keskityskoodi jotenkin torpeedoi tota kehystämismahdollisuutta, en tiedä, miksi :/ Yritin itsekin, muttei mullakaan onnistunut. No, mä koitan kehitellä jossain vaiheessa (kun mulla aikaa on, ehkä hiihtolomalla?) toimivaa koodia tohon! :)

      Poista
  6. Tosi hyödyllinen blogi sulla! :)

    Osaisitko muuten neuvoa, miten saisin tasattua tekstin ja kuvat? Sain ne leveyksiä muuttamalla loppumaan samaan kohtaan, mutta teksti alkaa häiritsevästi pari pikseliä ennen kuvia. Blogini:
    http://kuviakinkiinnostaa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Kiitos :)!
      Kiva, että linkitit blogisi! Sulla tuon ongelman syy näyttäisi olevan kuvien kehykset. Ne saa poistettua tällä koodilla:
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 0px;
      background: #ffffff;
      border: 0px solid #eeeeee;
      -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);
      }

      Poista
    2. Täytyy myöntää, että pidin sinua hetken ihan idioottina. EI MUN KUVISSA OLE KEHYKSIÄ!
      Onneksi kuitenkin kokeilin ensin, sehän toimi! Varmaan tosiaan joku jäänne siitä kun ilmeisesti poistin vain ne "näkyvät" kehykset.
      Sisäinen perfektionistini huutaa ilosta! Kiitos paljon! <3 :D

      Poista
    3. Haha, ei se mitään :D Ihan ymmärrettävä tuo sinun luulosi - ne kehykset kun ei näkyneet millään tavalla, vaan maalaamalla.
      Kiva, että tuosta koodista kuitenkin oli apua :-D

      Poista
  7. Heih~
    Nää sun ohjeet on aina ollut tosi toimivia, joten ajattelin pyytää hieman apua:D Elikkä huomasin äsken, että oon ilmeisesti jollain koodilla vahingossa ottanut tuon päivämäärän pois, mutta koska itse tykkään siitä, haluaisin sen takaisin, joten osaatko neuvoa mitenkään miten sen saisi?
    Blogi löytyy täältä: http://ganhwa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Vastaaminen tosiaan venähti - syytän koulukiireitä :/ Nyt päivämäärä onkin sun blogissa, mutta jos joku muu vaikka hyötyis tästä vastauksesta:
      1. Mene blogisi Ulkoasuun
      2. Klikkaa Blogitekstin kohtaa "muokkaa"
      3. Ruksita päivämäärä

      Jos tämä ei auta, liitä blogisi CSS:ään (malli -> mukauta -> lisäasetukset -> lisää CSS) alla oleva koodi:
      .date-header{
      display: block;
      }

      Poista
  8. Moi !
    En ole kehystämässä mitään blogissani ainakaan vielä, mutta halusin tulla sanomaan, että tämä blogi on todella mahtava ja oon saanut täältä paljon apua :). Kiitos siis sulle! Yksi juttu kuitenkin mietityttää, ja et ole tainnut siitä vielä täällä kirjoittaa (selasin kyllä kaikki läpi :D). Oon nähnyt joissakin blogeissa paljon bloggerin omia jakopainikkeita hienompia jakopainikkeita. Itse olen poistanut jakopainikkeet juurikin niiden rumuuden vuoksi, mutta niistä voisi olla joskus hyötyä. Eli miten voin tehdä omat jakopainikkeet? Pystyisitkö jopa tekemään aiheesta postauksen?

    VastaaPoista
    Vastaukset
    1. Moi Sini! Uskon, että ehkä voisin - tarvisin ehkä vaan esimerkkiä, minkä tyylisiä :D

      Poista
  9. Moi! Miten blogiin saa esim. blogitekstien viereen jonkinlaisen kuvan, jota klikkaamalla pääsee jonnekin blogin sivulle? En tiedä osasinko selittää niin että tajuaisit mutta kuitenkin. Joillakin blogeilla on tuollaisia. Kiitos jos vastaat, ei tarvitse tehdä tästä postausta. Voi olla et tää on joku yksinkertainen juttu mutta mä en tajua

    :)

    VastaaPoista
    Vastaukset
    1. Heippa! Hmmm.. meinaatko kuvaa, joka on sivupalkissa muiden gadgetien (esim. lukijapalkki) kanssa? Jos meinaat, ohjeet löytyy täältä:
      http://blogikoodeja.blogspot.fi/2013/10/kuvagadget-josta-paasee-johonkin.html
      Jos taas et tarkoita tuota, en sitten ihan ymmärtänyt, mitä tarkoitit :-D Ja jos tarkoitit some-ikoneja, niin täällä on sitten linkki niistä kertovaan postaukseen:
      http://blogikoodeja.blogspot.fi/2014/08/some-ikonit-blogin-sivupalkkiin.html

      Poista
  10. Heippa! Osaisitko sanoa, kuinka saan siirrettyä postauksista päivämäärän otsikon alle? Kiitos jo etukäteen vastauksesta! :))

    VastaaPoista
    Vastaukset
    1. Moikka! Kätevimmin sen saa ilmeisesti hoidettua HTML-koodin kautta, mutta koska minä itse vielä kartan kyseistä paikkaa, neuvon toimivan tavan CSS:n kautta. Eli lisäät blogisi CSS:ään (Malli->mukauta->lisäasetukset->lisää css) alla olevat koodit:

      h2.date-header {
      margin-top: 20px;
      }

      h3.post-title{
      margin-top: -50px;
      }

      .post-body{
      margin-top: 50px;
      }

      Sitten vain muuttelet noita px-yksikön edessä olevia lukuja. Eka koodi (h2.date-header) tarkoittaa päivämäärää. Suurentamalla ko. lukua saat päivämäärää hinattua alaspäin. Toka koodi (h3.post-title) tarkoittaa postauksen päivämäärää. Menemällä enemmän miinuksen puolelle saat hinattua postauksen päivämäärää ylöspäin. Kolmas koodi (.post-body) tarkoittaa ns. postauksen vartaloa, eli varsinaista tekstiosuutta. Suurentamalla lukua saat hinattua postausta alaspäin.

      Toivottavasti tästä oli apua! :D

      Poista
  11. Kirjoittaja on poistanut tämän kommentin.

    VastaaPoista
  12. okei, no unoha toi äskönen, tajusin just etten tarvii sivuja koska mulla on somelinkit jo gadgeteissa :--D mut kysymys kuuluukin et mulla ei toimi toi viiva gadgetin otsikon alapuolelle, vaikka pistin sen css´ään?
    http://helgamatildaa.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moi Helga! Jos oot ladannut kuvan photobucketin kautta, oot luultavasti kopioinut kuvan URL-osoitteen väärästä paikasta. Se pitää kopsata oikealla olevasta boksista klikkaamalla kohtaa Direct. :)

      Poista
  13. Osaatko sanoa että millähän hemmetillä nykyään saisi valkoisen youtube palkin tehtyä? :D Kun mikään vanha ohje ei tunnu toimivan! Menee hermot pian tän asian kanssa. :(

    VastaaPoista
    Vastaukset
    1. sori, että vastaan puolestasi, mutta tästä on jo postaus täällä:
      http://blogikoodeja.blogspot.fi/2013/11/valkoisen-youtube-palkin-tekeminen.html

      Poista
    2. Edelleenkään toi ohje ei enään toimi. Kaipaan uutta ohjetta valkoisen youtube palkin tekoon!

      Poista
    3. Moi! Joo, tää ohje ei tosiaan enää toimi. Voin yrittää jossain vaiheessa tehdä uuden ohjeen, mutta siihen menee vielä aikaa. Ensiavuksi löysin sulle netistä tän;
      http://kehvelijehnakas.blogspot.fi/2014/12/valkoinen-youtube-palkki-bloggeriin.html

      Poista
  14. haha oon kamala riesa, mut osaisitko neuvoa et miten tollasen viivan sais suoraan tekstin otsikon yläpuolelle? (tai oikeestaan silleen että ku hiiren vie otsikon päälle nii suoraa sen yläpuolelle tulis sellanen ohut pitkä viiva ja ku hiiren vie pois nii se häviäis?)

    VastaaPoista
    Vastaukset
    1. Ei se mitään, kantsii aina kysyä, jos joku asia askarruttaa :)! Tässä ei nyt oo mitään transition-efektiä, mutta hover-efekti (=hiiren vie päälle, jotain tapahtuu) on, vähän töksö sellainen :D Malli -> Mukauta -> Lisäasetukset -> Lisää CSS:ään alla oleva koodi:
      h3.post-title a:hover{
      color: #000000;
      text-decoration: overline;
      width: auto;
      }

      Kun mulla on enemmän aikaa, kehittelen vähän hienomman version :)

      Poista
  15. Moi. Olisin sulta kysynyt miten voi tehdä :
    1. Tommoiset linkit tonne ylös mistä pääsee eri sivuille blogeissa? Haluaisin juuri samalla tavalla kun tässä blogissa >http://anotherdimension-emma.blogspot.fi/
    2. Miten saa semmoiset juuri ns. viivat gadgettien ja postauksen ja gadgettien väliin? Samaan tyyliin taas kuin tässä blogissa > http://anotherdimension-emma.blogspot.fi/

    Kiitos jos viitsit auttaa! Voisitko mahdollisesti vastata mulle sähköpostilla? iris.kakko@hotmail.com

    VastaaPoista
    Vastaukset
    1. Heipsun!

      1. Mulla on hiihtolomalla (tai jo koeviikon päätyttyä ensi vklp) ohjepostaus, jossa on ohjeet siihen, miten saadaan sivut bannerin yläpuolelle. En koskaan neuvo tismalleen samanlaisia kuin esimerkkiblogeissa, sillä se on mun mielestä jotenkin väärin. Samantyylistä voin kuitenkin tehdä :) Juttu on aika monimutkainen, siksi en lähde selittämään sitä nyt.

      2. Tällä koodilla saat viivat gadgetien väliin:
      .sidebar .widget{
      border-bottom: solid 1px #A8C7E7;
      }

      1px tarkoittaa viivan paksuutta, solid viivan tyyliä ja #-merkin jälkeinen värikoodi väriä, joita löytyy tästä linkistä: http://html-color-codes.info/ Noita voi jokaista muuttaa.

      Postausten väliin viivat saa tällä koodilla:

      .post-body{
      border-bottom: solid 1px #A8C7E7;
      }

      Tässäkin sama periaate kuin tuossa aiemmassa koodissa :)

      Laitan tän kommentin sulle sekä sähköpostiin että jätän tän tähän näkyviin, jos tästä olis myös muille apua.

      Poista
  16. ei liity nyt tähän postaukseen, mutta ajattelin kysäistä onko sinulla postausta siitä (tai voisitko kenties tehdä) , miten saa tuota blogitekstien (ja kuvien) väliä pienennettyä...
    http://suomenlapinkoirasela.blogspot.fi/ <--- tuossa blogini, jos auttaisi selventämään, eli siinä on tuo haalea viiva pystysuunnassa ja haluaisin sen vasemmalla puolella olevia asioita lähemmäs viivaa... Onko tähän siis jokin koodinpätkä? kiitos tuhannesti jos autat! :))

    VastaaPoista
    Vastaukset
    1. ongelmani korjaantuikin ihan vain blogin leveyttä säätämällä! :)

      Poista
  17. Miten saan bannerin alapuolella olevien välilehtien rajat pois. Siis kun siinä lukee esim about my blog niin sen ympärillä on ohuet tummat viivat, jotka jatkuvat blogin reunoille saakka. Osaatko auttaa?:-)

    VastaaPoista
    Vastaukset
    1. sainkin tämän löydettyä kun hetken etsiskelin :) kiitos kuitenkin tästä mahtavasta blogista!

      Poista
  18. Tietäisitkö koodia millä saisi postauksen ja sen otsikon väliä pienennettyä? tai miten saan bannerin näkymään mobiiliversiossa?

    VastaaPoista
    Vastaukset
    1. Moooi! Postauksen ja otsikon väliä saa pienennettyä tällä koodilla (malli->mukauta->lisäasetukset->lisää css:ään alla oleva koodi):
      .post-body{
      margin-top: -10px;
      }
      Muutat tuota lukua -10 haluamaksesi :)

      Bannerin saa näkymään mobiiliversiossa tällä koodilla (lisää CSS:ään niin kuin äskeinenkin koodi):
      .mobile .header-outer{
      display:block;
      }

      Tuosta bannerin näkymisestä kännykän mobiiliversiossa voisin toteutella postausta - olisi varmaan hyödyllinen monelle :D

      Poista
  19. Hyvä postaus ja koko blogi! Varsinkin tälläselle jota kädestä pitäen saa neuvoa näiden asetusten/html yms juttujen kanssa :D Sitä vielä kysyisin, että kun sulla on tossa toi blogin kuva kohdassa ( b) Sivupalkin jokaisen gadgetin kehystäminen erilleen toisistaan ) niin miten saa niin, että tuota blogin taustalla oleva kuva ( tossa kuvassa tuo sininen tausta) saadaan näkymään enemmän ja postausten alusta on ns ohuempi/ kapeampi? Sekavasti selitetty mutta toivottavasti ymmärsit! Kiitos jo etukäteen :)

    VastaaPoista
    Vastaukset
    1. Kiitti Linda :-)! Tarkoitat varmaan marginaaleja? Niistä löytyy postausta täältä:
      http://blogikoodeja.blogspot.fi/2014/12/kehystaminen-gadgetit-alatunniste-jne.html

      Poista
  20. Heippa! Osaisitk selittää koodin jolla saa tollaset reunukset ainoastaan gadgetien otsikoille? :--)

    VastaaPoista
    Vastaukset
    1. Moi :)! Joo, tässä:
      .sidebar h2{
      border: dashed #c9c9c9 2px;
      }
      Ja noita borderin arvoja sitten vain muokkailet mieleiseksesi tämän postauksen ohjeiden mukaan :)

      Poista
  21. heippa! miten saisi noiden gadgetien ts. sivupalkin otsikoiden ylä ja alapuolelle viivat? siis niin, ettei ne tule postauksen otsikkoon.. sain viivat alapuolelle ja yritin kikkailla itse koodia tuohon yläpuolen juttuunkin, mutta ei se onnistu..? :( Eli siis tässä mun blogi: http://allthelittleroyals.blogspot.fi/ ja tällaiset "kehykset" haluaisin sivupalkin gadgetien otsikoille: http://jonnamaista.com/

    VastaaPoista
    Vastaukset
    1. Moikka! Tämän koodin kehysten väriä ja kokoa muokkaamalla pääset varmasti pyytämääsi lopputulokseen:

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

      Poista
  22. Moikka! Vähän vanhaan postaukseen nyt kommentoin, mutta kun liitin tuon laittamasi goodin (gadgetin otsikon alle viiva) blogini CSS:sään. Niin viivaa ei silti tullut blogiini:-( Mikä mätää?

    VastaaPoista
    Vastaukset
    1. Moi! Ei se haittaa, vaikka vanhaan postaukseen kommentoitkin :) Hyvä, että liittyy postauksen aiheeseen!
      Mutta siis toimiiko sulla mikään CSS-boksiin laittamasi koodi? Kokeilin tuota gadget-koodia äsken, josko koodi olisi vanhentunut mutta eipä ole - mulla toimee moitteettomasti. Mikähän malli sun blogissasi on? Saattaisiko se sotkea?

      Poista
  23. Yritin yritin ja yritin :D Haluan kehykset sivupalkille. Onnistuin. Mutta ne tulee aivan kiinni tekstiin. Miten saisin niihin vähän väliä niinkuin esim tässä blogissa: http://nellinadjaelisa.blogspot.fi
    Ja toinen kysymys mihin en löytänyt vastausta, kuinka saan nuo Gadgettien otsikkojen taustat tuommoisiksi (juurikin kuin tuossa linkkaamassani blogissa esimerkiksi?
    Ja vielä viiminen kysymys, kuinka sitten saan tuon mustan viivan blogini sivupalkin ja itse tekstin väliltä pois jos tuohon muutokseen päädyn :D

    Tässä blogini linkki http://hennankengissa.blogspot.fi

    Kiitos paljon vastauksestasi ja ennenkaikkea huipusta blogistasi! <3

    VastaaPoista
    Vastaukset
    1. Moi1 :)

      1. Lisää haluamaasi kehyskoodiin tämä rivi:
      padding: 10px;
      kohtaa 10px voi muuttaa :)

      2. Gadgettien otsikoille taustaväri:
      .sidebar h2{
      background: lightgrey;
      padding: 8px;
      }

      3. Viivan saat pois menemällä vain mallin suunnittelutyökaluun -> lisäasetukset -> aksentit ja muuta väri transparentiksi :)

      Kiitos paljon, Henna!

      Poista
  24. Moi!
    Mäkin aattelin tulla tänne vanhaan postaukseen vielä kysymään että miten tuon kohdan (missä nyt sulla ainakin lukee tuo lähettänyt Ilona ja tunnisteet ) saisi kehystettyä?
    Kiitos ihan hirmuna jos vastaat (:

    VastaaPoista
    Vastaukset
    1. Moi Jenny! Tässä sulle koodi siihen:
      .post-footer {
      border: solid 1px black;
      padding: 13px;
      }

      Poista
  25. Hei! Pystyykö CSS koodilla rajaamaan laatikkoon yksittäisiä gadgetia? Esimerkiksi DIY Stories esittelyteksti heti kuvan alla blogissani www.thediystories.blogspot.com

    VastaaPoista
  26. Heipä hei! Lueskelin kaikki kommentit läpi, mutta en löytänyt vastausta tähän, että voiko blogiteksin kehystää? Eli omassa blogissani tekstillä on taustaväri, niin voisiko sen vielä kehystää? :D Jos nyt tajusit.

    serotoniinia.blogspot.fi

    VastaaPoista
  27. Heips, Pystyisiköhän postauksen kuvien kuvatekstiä jotenkin ns. kehystämään tai saamaan edes saman levyiseksi kuvan kanssa? Ärsyttää, kun teksti jatkuu kuvan yli ja on tavallaan irrallaan. Haluaisin sen selkeämmin kuvan yhteyteen. Blogi: http://suolastajamakeaa.blogspot.fi

    VastaaPoista
  28. Heippa! Olisiko sulla tietoa, miten mä saisin kehystettyä gadgetien otsikot? Tarkoitan; http://nerojakaisla.blogspot.fi/ löytyy tästä blogista. Tästä sun blogista kun on ollut niin paljon apua, että ajattelin kysyä ;D

    VastaaPoista
  29. Nää ei jostain syystä toimi mulla, onko mahollista että teen jotain väärin? :D

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)