Blogitekstin ja tekstin otsikon välin pienentäminen

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

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

Jos haluat pienentää blogitekstin otsikon ja blogitekstin väliä, lihavoidun punaisen luvun tulee olla miinuksen puolella eli esim. -10 tai vaikka -55. Jos haluat suurentaa väliä, luvun pitää olla positiivinen eli esim. 10 tai 55.

Navigaatipalkin poistaminen & siitä aiheutuvan tyhjän tilan deletoiminen + infoa

MITEN POISTAT NAVIGOINTIPALKIN?
- Mene ulkoasuun, sieltä klikkaa navigointipalkin muokkaa-kohtaa, rullaa alas ja kliksuta "ei käytössä" -nappulaa. Sitten vain suoritat tallennukset. Alla oleva kuva havainnollistaa.

Kun navigointipalkin poistaa, palkki jättää blogiin tyhjän tilan. Suunnilleen samalta pitäisi näyttää blogissasi kuin alla olevassa kuvassa:

Jos ylimääräisen tilan haluaa pois, lisää tämä koodi blogisi CSS:ään:
.content-inner {
margin-top: -30px;
}

Ja tältä näyttää, kun koodin lisää:

Tästä aiheesta pyydettiin postausta, joten tein sen ilomielin. Ilmoitelkaa ihmeessä jatkossakin teidän mieltä askarruttavia blogiongelmia! Yritän toteuttaa niitä, kun multa löytyy sopivasti aikaa. Haha, onneksi eka jakso ei ole tiukka :)!

Ratkaisuja blogin pyöristämisestä koituviin ongelmiin

Blogin kulmien pyöristämisestä koituu monelle bloggaajalle ongelmia, joihin niksiä voi olla itse vaikea ratkoa. Viime aikoina mulle on tullut paljon kysyttävää juurikin pyöristämisen koodista johtuvista ongelmista. Ongelmia, joita kulmien pyöristämisestä saattaa koitua, on monia, joten olen koonnut tähän postaukseen ikään kuin ensiapupaketin, jolla voitte yrittää ratkoa ongelmaanne. Tässä vielä linkki kulmien pyöristämispostaukseen: http://blogikoodeja.blogspot.fi/2013/10/blogin-kulmien-pyoristaminen.html

ONGELMA 1 ~ BANNERISTA AIHEUTUNEET PUSKEVAT KULMAT

Kulmia pyöristäessä voi tulla ylläolevan kuvan osoittama tilanne vastaan: pyöristetyistä kulmista törröttää valkoiset (toki voi olla myös muunväriset) kulmat. Tässä tapauksessa törröttävät kulmat johtuvat bannerista, jonka kulmia ei ole pyöristetty. Pyöristyskoodi itsessään ei pyöristä banneria, joten suorakulmion muotoinen banneri voi helposti pompata esiin pyöristetyistä kulmista.

Miten korjata ongelma?

- Pyöristä bannerisi kulmat jollakin kuvankäsittelyohjelmalla, esimerkiksi netistä ladattavalla ilmaisella Photoscapella tai netissä käytettävällä Picmonkeyllä klikkaamalla kohtaa "Rounded Corners". IPiccyllä voit esimerkiksi poistaa kaikki ylimääräiset kohdat tekemällä ne läpinäkyviksi kohdasta "Erase Background". 

- Voit myös yrittää saada kulmat banneria siirtämällä / blogia leventämällä / molemmilla syrjään.

Kun lisäät tämän koodin CSS:ään, saat banneria siirtymään vasemmalle:

.header-outer {
margin-left: 20px;
}

Lukua 20 voit muuutaa mieleisesi mukaan.

Kun lisäät tämän koodin CSS:ään, saat banneria siirtymään alaspäin:

.header-outer {
margin-top: 20px;
}

Lukua 20 voit taas muuttaa mieleisesi mukaan. 

  

ONGELMA 2 ~ LÄPINÄKYVÄT KULMAT

Tähän ongelmaan olet saattanut törmätä, mikäli et käytä valkopohjaista Simplen mallia. En ole testannut, näkyykö ongelma muissakin kuin Simplen väripohjaisissa malleissa, mutta niissä tämä ongelma ainakin ilmenee, jos olet käyttänyt pyöristyskoodia. Vaikka valkea blogipohja onkin pyöristynyt, se on jättänyt jälkeensä haaleat, vähän läpinäkyvää muistuttavat kulmat. Ikävää, eikö?

Miten korjata ongelma?

- Malli -> mukauta -> lisäasetukset -> lisää alla oleva koodi CSS:ään:
 
.content-outer{
box-shadow: none;
}

ONGELMA 3 - VALKOISET, PIENEMMÄT KULMAT, JONKA SYYNÄ EI OLE BANNERI

On siis kyse ongelmasta, johon ei banneri vaikuta. Ainakin oikeaan kulmaan on jäänyt valkoinen, esiin puskeva kulma, jota ei saa banneria mihinkään suuntaan siirtämälläkään pois. Tämä ongelma ei tietojeni mukaan automaattisesti esiinny ainakaan Simplen valkopohjaisessa mallissa, mutta esimerkiksi sinipohjaisessa Simplessä kyllä.

Miten ratkaista ongelma?

- Hallintapaneeli -> Malli -> Mukauta (eli menet mallin suunnittelutyökaluun) -> Lisäasetukset -> Taustat -> Ylätunnisteen tausta -> Muokkaat sen läpinäkyväksi

Toivottavasti tästä oli apua! Lisäilen tänne ongelmia sitämukaa, jos niitä teille tulee. :-)

Kuvien välit pieneksi ilman Flickriä

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

img { 
margin-top: -5px; 
margin-bottom: -5px; 
}

Punaiseksi värjättyjä lukuja voit muuttaa mielesi mukaan.

xoxo iltsu

Harmaan katkoviivan poistaminen blogin alaosasta + välin pienentäminen

Alla oleva kuva toimii havainnollistavana:

Lisää tämä koodi blogisi CSS:ään:

.footer-outer {
  border-top: 0px;
}

 Jos sinua ärsyttää "tyhjä" väli, joka jää blogin alaosaan

"Etusivu"-kohdan alapuolelle, voit poistaa sen tällä koodilla,

joka siis sekä poistaa harmaan katkoviivan että välin:

 .footer-outer {
  border-top: none;
  margin-top: -100px;
}

xoxo, iltsu

Tekstin otsikon ja bannerin välin pienentäminen

Jos olet poistanut blogistasi päivämäärän (niin kuin minä tästä blogista), saatat

harmitella suurta väliä, mikä on tekstin otsikon ja bannerin välissä. Ei huolta, sen

saa poistettua tällä koodilla, jonka minä itse keksin muita koodeja hyödyntämällä.

Malli -> Mukauta -> Lisäasetukset -> Lisää CSS

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

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

Punaiseksi värjättyä lukua pystyt muuttamaan mieleisesi mukaan.

Mitä pienempi luku on, sitä pienempi väli on. 

Huom! Koodi pienentää myös tekstin otsikon ja alatunnisteen väliä etusivulla!

Ilmoitathan, jos koodi ei toimi! En nimittäin tiedä, toimiiko koodi kellään

toisella, mutta ainakin omassa blogissani se toimii. 

xoxo iltsu

Päivämäärän ja bannerin välin pienentäminen

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

.date-header {
margin-top: -15px;
}
 

Muokkaamalla punaiseksi värjättyä numeroa voit vaikuttaa siihen,

miten suuri päivämäärän ja bannerin väli on. Luku voi

olla sekä positiivinen että negatiivinen.

xoxo, iltsu

Päivämäärän ja otsikon välin pienentäminen

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

.date-header {
margin-bottom: -15px;
}

Muokkaamalla punaiseksi värjättyä numeroa voit itse päättää välin 

suuruuden. Luku voi olla sekä positiivinen että negatiivinen.

xoxo, iltsu

Gadgetien välien pienentäminen

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

.widget {
    margin: 5px 0 0 0;
}

 Lilaksi värjättyä lukua voit muuttaa mieleisesi mukaan. 
Mitä pienempi luku on, sitä pienemmät välit gadgeteille tulee. 
Myös miinuslukuja voi käyttää.

xoxo, iltsu