perjantai 18. lokakuuta 2013

Kommenttiavatarin pyöristäminen

Eli kommenttiavatarien/kommenttikuvakkeiden pyöristäminen
olisi käsittelyssä tässä postauksessa. Näytän, miltä se sitten
luonnossa näyttäisi:


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

.avatar-image-container, .avatar-image-container img {
width: 40px !important;
max-width: 40px !important;
height: 40px !important;
max-height: 40px !important;
padding: 0 !important;
margin: 0px 0px 0px 0px;
border: 0px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
-khtml-border-radius: 999px;
border-radius: 999px;
}

 40-pikseleitä muuttamalla voit muuttaa avatarin kokoa.
999-pikselit määräävät avatarin pyöreyden. 

xoxo, iltsu

17 kommenttia:

  1. mulla jää tohon omiin vastauksiin sinne taustalle sellanen harmaa laatikko?

    unpleasantdream.blogspot.fi

    VastaaPoista
    Vastaukset
    1. ahaa, onpas ikävä ongelma! vertasin blogisi lähdekoodia oman blogini lähdekoodiin, sillä en ole aiemmin ongelmasi kaltaista probleemaa tavannut. löysin ainakin yhden mahdollisen tekijän, mutten ole täysin varma, toimiiko koodi tähän ongelmaan. luultavasti & toivottavasti toimii!

      eli lisääppä tämä koodi blogisi CSS:ään:

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

      blogissasi näytti olevan aiemmin koodinpätkä, joka aiheutti harmaan taustan vastaukseen. tuon koodin pitäisi tehdä taustasta valkoinen. toivon mukaan ongelma ratkeaa tällä koodilla! :)

      Poista
    2. ihanaa, että ongelmasi saatiin ratkaistua :-)!

      Poista
  2. Minä en tuossa millään jostakin syystä onnistu. Menin tuonne lisää CSS juttuun. Onko sillä merkitystä että onko se tyhjä ennestään? Kopioin tuon koko koodin ja liitin siihen ja painoin että käytä blogissa. Mitään ei kuitenkaan tapahtunut. Mistä ongelma voisi johtua?

    palettewithoutcolor.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Apua, tämä sun kommenttisi on suorastaan hukkunut tänne :o Mutta nyt saat vastausta - vihdoin ja viimein, takuulla liian myöhään, mutta jospa tämä nyt vaikka jotakuta toista auttaisi.
      Toimiiko sulla muut koodit, jotka CSS:ään laitat? Jos ei, olet luultavasti käynyt blogisi HTML-koodia sorkkimassa, jolloin muokattavuusmahdollisuus CSS:n kautta on saattanut mennä :/ Ainoa toimiva vaihtoehto siihen on aloittaa blogin suunnittelu ihan alusta valitsemalla uusi (voi olla myös vanha sama, mutta sitä mitää klikata, jotta kaikki aiemmat koodit yms. muokkaukset malliin katoaa!) malli mallin suunnittelutyökalussa.
      Joskus blogger saattaa olla tuittupäisellä tuulella. Mulla on nimittäin välillä käynyt sillä tavalla, että eräänä päivänä tismalleen sama koodi ei toiminut mutta parin päivän päästä toimi. Tälle en tiedä syytä, mutta kannattaa siis kokeilla jonain toisena päivänä koodin lisäämistä uudestaan CSS:ään.
      Blogissasi saattaa myös jokin koodi olla ristiriidassa tämän koodin kanssa. Ristiriidan selvittäminen on aika hankalaa, ja helpoin ratkaisu siihenkin on poistaa kaikki blogiinsa lisäämät koodit.
      Unohdin vastata tuohon "Onko sillä merkitystä että onko se tyhjä ennestään?" -kohtaan. Ei, sillä ei pitäisi mielestäni olla mitään vaikutusta asiaan.
      Kannattaa siis vaikka kokeilla ratkaista ongelmaa sillä tavalla, että valitsee uuden / saman mallin uudestaan bloggerin mallin suunnittelutyökalusta ja menee sittän CSS-osioon ja kokeilee lisätä koodin nyt. Silloin näet, toimiiko koodi blogissasi. Mallia ei nimittäin tarvitse tallentaa - kokeilla uusia juttuja aina voi ilman tallenusta :)
      Tosiaan, suuret pahoittelut, että sait vastauksen harmittavan myöhään! :(

      Poista
  3. jep.. ei onnistunut mullakaan :/ mikäköhän on ongelmana?

    VastaaPoista
  4. Hei,

    Mulla on ongelma blogin kanssa. Aloitin vasta nyt blogin ja opettelen vasta näitten asetuksiek kikkailua. Ongelmani on että kun joku kommentoi mun postaukseen kommentti ei näy eikä kommaajan kuvaa samalla lailla kun tääl näkyy. Mulla vaan näkyy postauksen alla että 1 kommentti ja kun siitä painaa se menee erilliselle ikkunalla jossa kommentti sitten näkyy. Miten korjaan asian?

    Blogini on: redlipsblogg.blogspot.fi

    Toivottavasti pystytte auttamaan minua !

    Kiitos :)

    VastaaPoista
    Vastaukset
    1. Moi Stephannie!

      Tuon ongelman saa ratkaistua menemällä blogin asetuksiin -> tekstit ja kommentit -> kommentit -> kommenttien sijainti (sieltä sitten valitset vaikka upotettu niin kuin esim. tässä koodiblogissa on) :)

      Poista
  5. Hei Ilona,

    Blogin ulkoasun rakentaminen on alkanut hyvin, mutta yhtä ongelmaa en saa poistettua. Ylhäällä olevalla koodinpätkällä sain kommenttiavatarit pyöristymään, mutta aikani muokattua blogin ulkoasua huomasin, että avatarin oikea alakulma on jäänyt taas pyöristymättä ja kuva jää osittain piiloon, kuten linkistä pääset katsomaan http://retromint.blogspot.fi/2015/06/blogin-alkutaival.html#comment-form .

    Olen päätellyt, että jollain toisella koodilla olen varmaan sekoittanut avataria. Pelastamiseksi olen yrittänyt muokata mm. kuvan sekä kommenttiboksin marginaaleja, mutta pyöreää lopputulosta en saa takaisin. Osaisitko näiden perusteella kertoa missä vika?

    Kiitos jo etukäteen! :)

    VastaaPoista
    Vastaukset
    1. Moi Katja! :) Hyvä, että linkkasit blogisi, sillä ilman sitä ongelmaasi olisi ollut mahdoton ratkaista!
      Kokeilujeni perusteella koodin edessä oleva teksti KOMMENTTILAATIKKO on avainsana, ja sen takia kommenttiavatarit eivät pyöristy täydellisesti. Kokeilin pitää ja poistaa tekstin testiblogissani, ja mulla itselläni toimi. Suosittelen siis koittamaan :)

      Poista
    2. Heippa, olipa yksinkertainen korjaus. Enpä tajunnut katsoa tarkemmin. Kiitos paljon avusta!

      Poista
  6. Minulla täysin sama ongelma kuin edellisellä!

    VastaaPoista
  7. KIIRE D: !!!

    Heips, eli siis pyöristin juuri blogissani kommenttiavataret, kuvat ja "luetuimmat tekstit" -gadgetin kuvat. Nyt vielä jäi mietintämyssyn alle että saisikos noista "Suosittelen näitä blogeja"-kuvista pyöreitä?

    Tässä itse hienosti keksimä koodini joka ei toiminut :

    .#BlogList1 img {
    border-radius: 0px;
    }

    Ja tuota nollaa sitten kokeilin vaihdella mutta ei ne kuvat pyöristyneet. Ja katsoin siis että tuo gadgetin nimikin pitäisi olla oikein, koska katsoin sen siitä välilehdestä, mistä se laitetaan blogiin (sekavasti selitetty).
    Ja kiire mulla olisi siis sen takia, että kun kaikki muut kuvat on pyöreitä, näyttää hassulta että nuo eivät :DDD

    VastaaPoista

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