keskiviikko 30. lokakuuta 2013

Blogin kulmien pyöristäminen

Blogin kulmien pyöristäminen antaa blogille kivan ilmeen, 
ainakin omasta mielestäni. Alla havainnollistava kuva, mitä
blogin kulmien pyöristämisellä pyrin tarkoittamaan:


Normaalistihan blogi näyttäisi ilman pyöristämistä tältä:


Jos haluat blogiisi pyöristetyt kulmat, toimi näin:
 
Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

Lisää CSS:ään alla oleva koodi: 

.content-inner {
border-radius: 100px;
}

 
Kuten aiemmissakin postauksissa, punaista lihavoitua pikselilukua voi
jälleen muuttaa oman mielensä mukaan. Mitä isommaksi muutat
lukua, sitä pyöristetymmät blogin ylä- ja alakulmista tulee.

HUOM! Tämä koodi ei valitettavasti pyöristä automaattisesti
blogin banneria. Bannerin voi pyöristää kuvanmuokkausohjelmalla
sopivaksi, esimerkiksi Photoscapella (netistä ladattava ilmainen
kuvanmuokkausohjelma, omistan itsekin).

xoxo iltsu

17 kommenttia:

  1. Heips. Mä teen täs mun harjotusblogiin muokkailuja, ja mul on pikku ongelma. Tää pyöristys onnistuu kyllä, mutta kulmat jotka juuri pyöristin, jää näkyviin ikävästi haaleana. Näyttäisi siltä, että niissä kohdissa toi mun tausta nousee ylöspäin/on vain näkymättömämpi. Onko tähän mitään keinoa selvittää tää?

    VastaaPoista
    Vastaukset
    1. Joo, keinoja löytyy kyllä :-) Hyvä vaan, että otit yhteyttä (ja pahoittelut, että vastaukseni on näin paljon myöhässä..!)

      Ihan aluksi toivoisin, että linkkaisit blogisi, jotta saan paremmin selville, onko kyse itse koodista vai bannerista, jonka takia kulmat jäävät haaleiksi :-)

      Poista
  2. hellous, mun blogissa on pyöristetyt kulmat ja halusin ne takaisin joten poistin kyseisen koodin mutta blogin yläosaan jää tollainen tyhjä tila jossa näkyy blogini taustaa, mitenköhän sen saisi pois? mulla oli siis tämä koodi jolla olin pyöristänyt kulmat:

    .content-inner {
    border-radius: 55px;
    -webkit-border-radius: 55px;
    -moz-border-radius: 55px;
    -khtml-border-radius: 55px;
    }


    poistin tuon, mutta näytti ikävälle sen tyhjän tilan takia D: miten saisin sen pois? unpleasantdream.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Moikka Tamarya!
      Ikävää, mutten ole varma, ymmärsinkö ongelmaasi oikein :-D Sun blogissa oli pyöreet kulmat ja halusit ne vai takaisin, mutta blogin yläosaan jäi tyhjä tila, jossa näkyi blogisi valkoista taustaa, eli pyöristetyistä reunoista puski kulmat? Näyttikö tilanne siis tältä: http://aijaa.com/3t55qE (huomioi kohta, mitä nuoli osoittaa)? Jos näyttää, ongelmassa on kyseessä bannerisi. Blogissasi oleva banneri näyttää olevan suorakulmio, ja kun käytät pyöristämiseen tarkoitettua koodia, bannerin kulmat eivät pyöristy, vaan ne jäävät törröttämään ilkeästi. Ratkaisuna on siis esimerkiksi luoda bannerisiisi pyöreät kulmat kuvankäsittelyohjelmalla. Jos et itse jaksa ruveta tähän työhön, voit tallentaa sinua varten muokkaamani bannerin ja ladata sen banneriksesi, jolloin ongelman pitäisi ratketa :)
      Tästä linkistä löytyy banneri, josta poistin kulmat ja ylimääräiset härpäkkeet :):
      http://kuvaton.com/k/y8HV.png

      JA JOS ONGELMIA ILMENEE YHÄ (jos käytät muokkaamaani bannua):

      1) siirrä banneria tällä koodilla alaspäin:
      .header-outer {
      margin-top: 20px;
      }

      (luku 20 voi muuttaa)

      2) siirrä banneria tällä koodilla oikealle:
      .header-outer {
      margin-left: 30px;
      }

      (lukua 30 voi muuttaa)

      Toivottavasti tästä oli apua, ja autoin nimenomaan kuvailemassasi ongelmassa! Ilmoittele toki, jos ymmärsin ongelman väärin :-D Yritän silti auttaa parhaani mukaan!

      Poista
  3. Suur kiitos ajastasi ja vaivasta !:3 nyt blogi on sellainen ku halusinkin ^^ kiitos myös blogisi muista ohjeista yms, ne on auttanut suuresti! Täältä oon löytänyt tosi monia toimivia ja selkeitä ohjeita blogimuokkaukseen :3 ja kaikenkukkuraksi vastaat kommentteihin hyvillä ohjeilla :) jatka samaan malliin, kiitos vielä! ♡

    VastaaPoista
    Vastaukset
    1. Kiitos paljon! Tällaiset kommentit saavat mut leveän hymyn partaille ja piristävät päivää niiin paljon ♡:)

      Poista
  4. Miten saan pyöristyksen pis kun mulla ei enään näy tuota koodia ? Koitintehdä silleen että laitoin koodin uudelleen ja tallensin mutta sitten kun poistin sen niin se ei auttannut. Miten saisin pyöristyksen pois?

    VastaaPoista
    Vastaukset
    1. Moi Jenni!
      Olet luultavasti käynyt HTML-koodissasi ja muuttanut siellä jotain asiaa. Mallin suunnittelutyökalun CSS-osuus ei tykkää tästä, joten hävittää laatikosta kaikki sinne laittamasi koodit. Se ei myöskään enään hyväksy mitään sinne lisäämiäsi koodia. Oikeaa syytä CSS:n vihastumiseen en vielä tiedä, mutta jonkin sortin negatiivinen suhde HTML:llä ja CSS:llä on :/
      Jos siis olet käyttänyt HTML-koodia, suosittelen sinun menemään sinne ja etsimään pätkän koodista vaikkapa hakusanalla .content-inner (jos et tiedä, miten haet jotain asiaa HTML-koodista; kun olet siellä, klikkaa hiirelläsi jotain kohtaa, jonka jälkeen pidä ctrl ja F -painikkeet samaan aikaan pohjassa - pitäisi ilmestyä hakuloota, johon syötät hakusanasi). Kun löydät oikean kohdan (pidäkin huoli, että kohta on varmasti oikea!!), voit deletoida sen. Ole varovainen etenkin tässä kohdassa, ettet poista mitään ylimääräistä. JA TÄRKEIN; muista esikatsella ennen tallentamista - jos siis jotain traagista on tapahtunut, voit vielä huokaista helpotuksesta ja mennä korjaamaan asian, koska et ole vielä mitään tallentanut :-)

      Poista
  5. Teen harjoitusblogiini muokkailuja, mutta minulla on yksi ongelma. Minulla on mallina Travel. Pyöristin kulmat ja se onnistui, MUTTA siihen jäi näkyviin tuollaiset; http://aijaa.com/XQQmFK Tuonne yläkulmaan. Tiedätkö, miten ne saisi pois?

    VastaaPoista
    Vastaukset
    1. Moi! Travel-mallista mulla ei kokemusta ollut, mutta loppujen lopuksi testiblogini avulla sain kuin sainkin (vaikka olin varma, että tää olisi vaikeempi keissi!) homman ratkastua ja löydettyä tuon jutun aiheuttavan koodin. Ton härpäkkeen saa pois tällä koodilla:
      .content-outer .content-cap-top {
      height: 5px;
      background: none;
      }

      Poista
  6. Moikka! Mulla olisi tälläinen pieni ongelma ollut jo jonkin aikaa. Blogin yläosaan niin sanotusti itse blogin yläpuolelle jää pieni kaistale taustana toimivaa kuvaa/väriä, mikä se sitten sattuu olemaankaan. Olen kuullut, että sen saa jollain koodilla pois ja en millään ole kyseistä koodia löytänyt. Mietin vain, että olisko sulla tietoa kyseisestä koodista tai sitten toisesta keinosta, jolla sen reunan saisi pois? Oon tosi pahoillani jos et ymmärtänyt mitä tarkoitin, mutta toivotaan parasta!

    VastaaPoista
    Vastaukset
    1. Moi Ano! Luulen ymmärtäneeni ongelmasi, mutta jos en ymmärtänyt, toivon sun jatkossa linkittävän esim. aijaa.comiin esimerkkikuvan ellet omaa blogiasi halua syystä tai toisesta linkata.

      Tässä siis koodi, jonka lukua (-20) muuttamalla saat luultavasti toivomasi lopputuloksen:
      .content-inner{
      margin-top: -20px;
      }

      Poista
  7. Vastaukset
    1. Minulla toimii. Kun et linkannut blogiasi, en pääse katsomaan lähdekoodista mahdollista ongelmanaiheuttajaa.

      Poista
  8. yritän tehdä blogiini nuo pyereät reunat mutten tiedä miten saan ton koodin köyttöön :/ latasin ton kuvan muokkaus ohjelman enkä ymmärrä mitään sen käytöstä ja miten sillä saisi säädettyä niitä kulmia. voisko joku kertoa nopeasti miten tää valopää sais sen blogin kuosiin :D

    VastaaPoista
  9. En ole löytänyt mistään koodia, jolla Bloggerin valmiin mallin automaattisesti pyöristetyt nurkat saisi kaikki teräviksi. En myöskään sellaista, jolla myös bannerin ja gadgettien kuvat saisi pyöristettyä. Haluaisin joko kaikki nurkat pyöreiksi tai kaikki teräviksi, enkä molempia sekaisin, mutta en vain löydä oikeita koodeja. :D

    VastaaPoista
  10. Kokeilin koodia eikä se toimi blogissani. oonaastewen.blogspot.fi

    VastaaPoista

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