Sivut

lauantai 2. maaliskuuta 2013

DIY: Kuvat ilman valkoista reunusta ja tekstin kanssa samanlevyisinä Bloggeriin


Minua on jo pitkään haitannut erilevyiset pysty- ja vaakakuvat täällä Bloggerissa. Ja ihmetellen myönnän myös sen, että valkoiset reunukset kuvissa pienellä varjolla varustettuna, on nähty. Koska tämä tutoriaali vaati hieman etsintää ja ohjeita löysin englanninkielisistä blogeista, niin yhdistin neuvot yhteen suomenkieliseen postaukseen.

Mene blogin hallintapaneeliin -> Malli -> Muokkaa HTML-koodia ja lisää koodin CSS-osuuteen seuraava pätkä:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Tuo koodi poistaa valkoiset reunukset. Jos taas haluat blogin kuvat jotakuinkin vastaamaan postauksen leveyttä, niin lisää perään myös tämä:
.post-body img, .post-body .tr-caption-container
{width: 800px;
height: auto;
text-align:center;
margin-left: 0em;
margin-right: 0em;
}

Muokkaa tuota width: 800px -kohtaa blogillesi sopivaksi. Muista tsekata esikatselusta, että toimiihan! Huomaa, että tämä koodinpätkä muuttaa kaikki kuvat blogiin 800 pikselin levyiseksi, joten tulee snadi ongelma pienempien kuvien kanssa. Jatkossa siis kaikki blogiin laitettavat kuvat pitäisi olla leveydeltään se 800 px tai muuten systeemi levittää pikkukuvatkin pikselimössöksi.

Sairaan ihanassa elämässä on pieni yhteensopivuusongelma ja löydätte juuri nyt käytännön esimerkkejä siitä ympäri blogia. Hmmh. Aina nää projektit levähtää :)

5 kommenttia:

  1. Jee, mä haluan kans valkoiset reunat pois, joten kiitti tästä!

    VastaaPoista
  2. Siihenpä tökkäskin kun eihän mulla oo mitään hajua mikä on CSS-osuus. Nimimerkki. ei mediapuolta käynyt... :) No ehkä mies osaa auttaa, kun tulee kotiin :)

    VastaaPoista
  3. Tiiäkkö, kun hokasin, että eihän tässä tarvi tosiaan mitään html-koodeja ottaa esiin, kun bloggerissa on helpompikin paikka näille ulkoasukoodeille! Täytyy tämä päivittää tuohon tutoriaaliin, mutta tässä se on näin nopeasti kirjoitettuna:
    Malli -> Lisäasetukset -> Lisää CSS ja sinne pasteat coodia. En ite ehdi nyt testata tuota, mutta testaa sinä :)

    VastaaPoista
    Vastaukset
    1. Toimii, thänks. Nyt pääsin eroon niistä inhoista kehyksistä. En ymmärrä, että miksi ne edes oletuksena on tuossa :|

      Poista
  4. Sulle on kohta haaste mun blogissa =)

    VastaaPoista