8. heinäkuuta 2021

Koodinurkka 5: Post-footer

Toivottavasti olet pärjännyt kuumuuden kanssa! Täällä meinaa läkähtyä ja jaksaminen kirjoitella on ollut sen mukaista, mutta hypätään tänään vielä hieman takaisin mainin pariin ja muokataan post-footeria.

Seuraa blogin muutosta täällä!

Edellisessä koodinurkassa käytiin läpi hieman sivupohjaa ja muokattiin postauksia erottumaan varsinaisen blogin taustasta. Tällä hetkellä post-footer ei kuitenkaan tunnu sopivan nykyiseen taustaan, joten korjataan se. Muokkaan tosin ensin postauksia, sillä itse en ole kovin tyytyväinen tuohon lennossa tehtyyn muokkaamiseen.

.date-outer{
    font-size: 12px;
    border-radius: 10px;
    border: 0.01em solid rgba(0,0,0,0.3);
    box-shadow: 0px 2px 3px #000;
    margin-bottom: 20px;
    padding: 20px;
    background: url(https://i.imgur.com/O7N80dW.png);
    background-position: top center;
}

Yllä tämän hetkinen koodi, josta on selitetty tarkemmin täällä. Alla kuva uudesta ulkoasusta ja uudesta koodista. Pidän enemmän yksinkertaisesta ja selkeästä ulkoasusta, joten pudotin taustakuvan pois ja pienensin reilusti nurkkien pyöristystä.

.date-outer{
    font-size: 12px;
    border-radius: 2px;
    margin-bottom: 20px;
    border: 0.01em solid rgba(0,0,0,0.05);
    padding: 20px;
    background: rgba(0,0,0,0.05);
}

Lisätään CSS-koodiin uusi kohta, .post-footer. Tämä on osuus, joka tulee jokaisen postauksen loppuun ja sisältää aina samat tiedot, jotka voi muokata Ulkoasu kohdassa Bloggerissa. Tästä olen selittänyt hieman tässä postauksessa. Kun lisäät alla olevan koodin, huomaat että footerin tausta, joka nyt on valkoinen, muuttuu läpinäkyväksi.

.post-footer {
    background: rgba(0,0,0,0);
}

Voit kokeilla post-footeriin mitä tahansa aiemmin käytettyjä komentoja, saadaksesi siitä mieleisen! Tässä omani;

.post-footer {
    background: rgba(0,0,0,0.1);
    border-bottom: none;
    margin-left: -21px;
    width: 648px;
    margin-bottom: -46px;
    border-radius: 0px 0px 2px 2px;
}

Käydäänpä hieman läpi mitä muutoksia tein ja miten ne vaikuttavat.

Tein footeriin hieman tummemman taustavärin, jotta se erottuu vaaleasta taustasta. Lisäksi poistin sen alaosassa olevan viivan border-bottom: none; komennolla. Seuraavana oleva margin-left siirtää footeria 21 pikseliä vasemmalle. Jos miinusmerkki olisi pois, siirtäisi komento footeria 21 pikseliä oikealle. Syy tähän komentoon löytyy siitä, että halusin footerin olevan yhtä leveä kuin postaus ja koska olen aiemmin määrittänyt postauksen sisälle 20px tyhjää tilaa, täytyy se vähentää footerin kohdalla. Koska määrätty arvo on nyt 21px, tarkoittaa se sitä että footer menee myös postauksessa olevan reunaviivan päälle, joka on 1px leveä. Width määrittää footerin leveyden ja oikea leveys löytyy yksinkertaisesti vain kokeilemalla, sillä tuohon leveyteen vaikuttaa moni asia koodissa. Border-radius määrittää footerin alanurkkiin 2px kokoisen pyöristyksen, eli saman mitä postauksessa itsessään on.

Sitten pääsemme tähän margin-bottom koodiin, joka miinusmerkillä poistaa tyhjän tilan footerin alareunassa. Jos en olisi määrittänyt date-outerissa padding: 20px; olisi margin-bottomin luku -26px. Eli tässä huomaat, miten jokainen määritys saattaa vaikuttaa myöhemmin tehtäviin muutoksiin. Tämän vuoksi, kun käyttää näitä miinusarvoja, on parempi tehdä aina välitallennuksia ja tarkastaa sivu, jotta määritelmät toimivat kuten pitää. Esimerkiksi nyt kun klikkaan auki ensimmäisen postauksen, voin huomata että postauksen alaosa näyttääkin tältä.

Syy siihen, miksi Ei kommentteja: teksti menee footerin päälle, löytyy tuosta nimenomaisesta margin-bottom komennosta. Sama koodi, joka näyttää etusivulla hyvältä ja toimii kuten pitää, tekee saman asian myös kommenttisivulla ja tämä täytyy ottaa huomioon koodia tehdessä. Tähän löytyy kuitenkin ratkaisu, joka tarkoittaa yksinkertaisesti kommenttikentän siirtämistä alaspäin sen verran, ettei se mene footerin päälle.

#comments {
    margin-top: 70px;
}

Yllä olevassa koodissa määritetään comments divin yläreunaan tyhjää tilaa 70 pikselin verran. Määritin luvun paljon suuremmaksi kuin aiemmin miinustettu määrä, koska mielestäni kommenttiosuus jäi liian kiinni footeriin, nyt tilaa on sopivasti. 

Siinä lyhykäisyydessään tämän kertainen opastus! Siirrytään seuraavassa koodinurkassa sivupalkin kimppuun.

Ei kommentteja:

Lähetä kommentti