blogin muokkaus - header, taustakuva & värit, fontit osa 1

Noniin, eli nyt ollaan ulkoasunmuokkauksessa tässä kohtaa:

Nyt olis sitten headerin, taustakuvan tai taustan värin, palkkien värien, fonttien, yms muun visuaalisen häröilyn vuoro!

Mä tykkään alottaa tosiaan tosta headerista, sillä sittenku on headeri selkee, on helpompi lähteä määrittelemään muun ulkoasun väritystä yms. Onhan niitäkin jotka tykkää tehä ulkoasun ensin ja säätää siihen sopivan headerin (teen itsekin joskus näin), mutta mutta, alotetaan me kuitenkin nyt siitä headerista. Ite käytän tähän valmiita kuvia tän oman blogini pohjalta, mutta ne siis voisivat olla myös ihan joitain muita kuvia.

Noni, eli headeri on näin yksinkertainen:

Näin!

Tietenkin, tämä toimii näin jos haluaa laatikoiden kanssa yhteenmenevän headerin joka on kuva. Headerin voi myös olla tälläinen:

• Teksti taustan päällä
• Kuva joka on erillään palkeista

Tai muuta vastaavaa. Teksti taustan päällä -headerin saa menemällä taas kohdan #header alle, ja muuttamalla pari juttua, kuten background color ja borderin $headerBgColor -kohdan tekstiksi transparent. Coloriin headerin tekstiin haluttava väri, font muutetaan font-familyksi ja määritetään haluttava fontti, ja lisäämällä kohta text-align saadaan määriteltyä fontin kohta, lisäämällä font-size saadaan määriteltyä tekstin koko.

Vasemmalla muokkaamaton ja oikealla muokattu headerin html. Lopputulos oli tällainen:

Tietenkin näyttäisi paremmalta jos kyseessä olisi jo muuten lopullinen tulos, mutta anyways!

Sitten, palkeista erillään olevan headeri saadaa noudattamalla samaa kaavaa kuin ensimmäisessä headerohjeessa, mutta sen jälkeen mennään taas html-koodipohjalle ja ite lähdin muokkaamaan näin:

#headerista muutin paddingin leftiin 251px, jolloin kuva on keskellä, ja sitten #header-wrapperista muutin marginin 40px, ja backgrouncolorin transparentii. Kuvina siis näin:

Ja kuvat siis klikkaamalla isommaksi jos jotain ei nää kunnolla/tms. Ja sen headerin sinisen palkin saa tosiaan muuttamalla ton #header-wrapperin colorin transparentiksi.

No, sitten on headeri kohdallaan, jatketaan tästä:

No, sitten haluan headerin vähän erilleen yläosan navigointipalkista, joten menen html-koodiin, etsin kohdan #header-wrapper, muutan kohdan margin -> margin-top :iksi, ja määritän pikselimääräksi 40px.

Sen jälkeen haluan määrittää blogille taustakuvan, joten etsin taustakuvakuvan, uploadaan sen itselleni vaikka photobucketiin (ylipäätänsä jokaisen blogin ulkoasun kuvan kannataa olla upattuna jonnekin kuvaserverille eikä vaan etsitty jostain netistä ja napattu nettisivun kautta, koska muuten ne voi hukkua!) ja menen html-koodin alkuun kohtaan body. Backgroundin kohdalle teen näin:

Jos haluaa erilaisesti toistuvan/ei toistuvan taustan, tee näin:

• Näin tausta ei toistu: url('http://...') no-repeat;
• Näin tausta toistuu alaspäin, muttei sivuille: url('http://...') repeat-y;
• Näin tausta toistuu sivuille, muttei alaspäin: url('http://...') repeat-x;
• Lisäämällä repeat termien jälkeen, mutta ennen ; -merkkiä vaikka top right, saat kuvan yläkulmaan oikealle. Määreitä on top, bottom ja center pystysuunnassa ja vaakasuunnassa right, left ja center. Eli jos kuvan haluaa täysin keskelle, tulee määritelmän olla center center (esim: url('http://...') repeat-y center center;)

Mutta se taustakuvasta! Seuraavaksi sinne fonttien yms postausjuttujen ja sivupalkin pariin. Eli nyt olisi hyvä käydä luomassa testipostaus, jossa on otsikko, tekstiä normaalisti ja isoilla kirjaimilla, boldattuna, kursivoituna, alleviivattuna, linkki, kaksi kuvaa, bulletlista (eli numeroimaton luettelo, eli lista missä on palloja), lainaus ja tunniste. Kaikki näähän löytyy tekstinmuokkausosiosta, joten ei pitäisi tuottaa suurempia ongelmia. Tää tehään sen takia että pystyy muokattaessa näkemään miten esim. fontti jne. käyttäytyy muokattaessa.

Kun postaus on tehty, mennään muokkaamaan taas html-koodia. Ensimmäiseksi itse määritän uudet värit content-, main- ja sidebar-wrapperille, mulla ne kaikki on valkoisia, mutta yhtä hyvin esim content-wrapperin voi määrittää läpinäkyväksi transparentilla, tms. Eli nää saa tosiaan määritettyä kyseisten wrapperien alta taas kohdasta background-color. Siitä ei nyt tarkempaa kuvaa, mut jokanen varmaan löytää kohdan.

Sitte voidaan vaikka rupeen määrittelemään blogin postauksien otsikon ja päivämäärän fonttia yms. Etsi kohta Posts html-koodista. Kohdasta .date-header määritetään päivämäärä, .post-title otsikon fontti ja .post-title a, .post-title a:visited, .post-title strong kohdasta fontin väri. 

Eli ensiksi päivämäärä:

Sitten otsikon fontti:

Ja otsikon värin voi vaihtaa aiemmin mainitun osion kohdasta color: $textColor; kunhan vaihtaa $textcolorin tilalle oman värikoodin. Sitten pitäisi alkaa näyttää about tältä:

Ja sitte mallin suunnittelutyökalulla vaihtaan ton tekstin fontin ja koon postauksissa mieluisaks. Enspostauksesssa taas lisää samasta aiheesta, nyt ei jaksa enempää!

♥

SASSE

blogin muokkaus - mainbar ja sidebar

Noni, eli alotetaan mainbarin ja sidebarin muokkaamisesta! Kaikki kuvat saa klikkaamalla isommaksi.

Eli, tää on alkutilanne:

Muokkaamaton Denim (Darren Delaye), sivupalkissa vain lukijat ja tietoja minusta -kohta, ei postauksia, yms. Ei mitään ylimääräsiä häröilyjä.

Sitten muokataan sidebarin ja mainbarin leveyttä html:n kautta:

Etsi kohta Content. Se on ns. "otsikkokohtana" htmlssä, jonka alta löytyvät kohdat .clear, #content-wrapper, #main-wrapper ja #sidebar-wrapper

• Content-wrapper kertoo kuinka leveän alueen mainbar ja sidebar saavat yhteensä käyttää. Periaatteessa, content-wrapper on boksi jonka sisässä mainbar ja sidebar on. (Yeah I know, ei mikään kaunein selitys mutta näin se on ainakin mun helpoin selittää ja ymmärtää)
• Main-wrapper, eli mun termeissä mainbar, on alue mihin postaukset tulevat. Mainbariin voi myös laittaa yleensä sidebariin laitettavia gadgetteja, jne. jos haluaa. Anyways, mun tutoissa gadgetit/widgetit/mitkälie pysyvät sidebarissa ja postaukset mainbarista.
• Sidebar-wrapper, eli sidebar on sivupalkkialue. Lukijat, yms gadgetwidgethäröt löytyy siitä.

Eli nyt sitten, miksi niitä muokkaisi ja miten?

No, esimerkiksi mä olen ihmisiä jotka diggaa isommista kuvista blogeissaan. Ja in case haluan isompia kuvia ilman että tuhoon kaikkia ulkoasujuttuja yms. on mun blogin mainbar oltava leveämpi kuin oletusleveys tässä ulkoasussa. Sidebarin leveys riittää mulle taas sellaisenaan oikein hyvin.

Joten, ensimmäiseksi lähetään muuttamaan htmlkoodia siitä kohtaa mistä varmaan ajatellaan että on loogisinta aloittaa tässä kohtaa: Mainbarin leveydestä. Kuitenkin, elämää helpottaa huomattavasti kun muutetaan sidebar ja mainbar erivärisiksi niin nähään kunnolla se niiden koko.

Näin, tadah!

Kohta joku kysyy pidänkö mä teitä idiootteina; en. Haluun vaan olla pomminvarma että säästyn joka ikisen yksityiskohdan selittämiseltä moneen kertaan tekemällä nää niin yksinkertaisen tarkasti. Ja saa tulla kysymään vaikka näistä huolimatta jokin jää tajuamatta. Mutjoo.

Mut siis, noitten värien määrittämisellä on parikin nerokasta juttua: ensimmäiseks tosiaan näätte ne boksien koot, ja näätte myös ton maagisen content-wrapperin koon! Se on siis toi valkonen boksi tuolla takana.

Nojoo, sitten siihen leventämiseen:

Etitään kohdan #main-wrapper alapuolelta kohta width: 464px. Muutetaan nro 464 joksikin muuksi numeromääräksi, ihan kiva on vaikka 600, px on pikseleitä, pitäkää se siinä numeroiden takana. Meikä tykkää pitää tän sillee kivasti aika tasalukuina, tai ainakin viidellä jaollisina lukuina että elämä on selkeempää ja helpompaa.

Nojoo, mitä käy? Näin:

Joissain tilanteissa jompikumpi palkeista saattaa myös mm. "kadota" jonnekin. Tämä johtuu siitä että content-wrapper eli toi valkoinen palkki tossa takana on liian pieni! Homma ratkaistaan siten, että lasketaan yhteen paljon tilaa vie molemmat palkit yhteensä:

Margin tarkoittaa valkoista "reunaa" content-wrapperin, side- ja mainbarin välillä.

Eli lasketaan marginien viemä koko ja laatikoiden koko yhteen. Tästä tulee tässä tilanteessa yhteensä 864px, jolloin laatikot mahtuisi juuri ja juuri tarkasti content-wrapperiin. Itse kuitenkin olen tosiaan ihmisiä jotka tykkää niistä tasaluvuista, joten revinkin content-wrapperin suoraan 900px niin ainakin on palikoilla tilaa.

HUOM! Jos margin ei ole määritetty vaan jommallekummalle puolelle niinkuin tässä on (-$startside määrittää missä margin on, eli tässä tilanteessa laatikon "alkupuolella" eli vasemmalla ruutua katsottaessa) vaan on koko laatikon kiertävä, pitää koodissa lukeva pikselimäärä kertoa kahdesti. Eli jos koodissa lukisi näin:

• margin: 14px, tarkoittaisi se että 14px kerrotaan kahdella koska margin tulee molemmille puolelle.

No, content-wrapperin muuttuessa oikean kokoiseksi, lopputulos näyttää tältä:

Noh, nyt laatikoiden koko, etäisyys jne. näyttää vaikka aika kivalta! Mitäs sitten? Tehdään headerin tila samankokoiseksi kuin laatikoiden koko. Eli siis:

Etsitään hmtlkoodin alkupuolelta kohta Header, ja sen alta löytyy kohdat #header-wrapper, #header, h1.title, h1.title a, h1.title a:visited, #header .description. Tähän tarvitaan kohtaa #header, jonka alta etsitään kohta width, ja muutetaan se 900px. Tällöin headerpalkin pitäisi olla yhtä leveä kuin content-wrapperin, näin:

Tietenkin headerpalkki voi olla ihan minkä tahansa kokoinen, niin kunhan oma headeri on about sen kokoinen/sitä pienempi.

Noniin. Nyt palkkien koko on haluttu; siirrytään seuraavaan postaukseen ja aiheeseen, joka on sitten ulkoasun muokkaaminen taustakuvalla, headerilla yms.

♥

SASSE

Blogin muokkaus - aloitus

Eli tästä alkaa blogin muokkaamiseen liittyvä sarja! Nähään mitä tapahtuu, mutta ensimmäisenä ois semmonen pieni infopaussi ennen mitään muokkausjuttuja, että:

• Tiedot voi olla virheellisiä/toimimattomia. Kaikki tehtävä htmlmuokkaus perustuu mulla netistä ohjeiden lukemiseen, niistä oppimiseen ja puhtaaseen kokeiluun.
• Jos jokin menee pieleen, en vastaa seurauksista. Mä en ole vastuussa siitä että joku kaataa bloginsa vahingossa.
• Tää on aika näppärä neuvo: testaamalla oppii. Ja mitä enemmän muokkaa htmlää, sitä enemmän siitä alkaa jotain perusjuttuja tajuamaan.
• On kans ihan kätevää luoda testausblogi sen oikeen blogin vierelle, että sinne voi ensin testaa mitä tekee ja sen jälkeen siirtää toimivat jutut copypastella oikeeseen paikkaan omaan blogiin ja sumplia lisää jos tarve. Jos tekee testiblogin, se alkumalli on aika näppärää olla samanlainen kuin oman blogin malli.
• Netistä löytyy kaikkea jännää ja paljon eri vaihtoehtoja samaan asiaan, google on ystävä.
• Käytän ite vanhempaa blogimallia, sitä joka on otettu käyttöön 2006, en siis aivan uusinta mallia. Uusinta mallia en ole vielä oikeastaan edes kokeillut säätää.
• Oman blogini alkustage on Darren Delayen Denim, eli ensimmäinen vaihtoehto Denim -ulkoasun valikosta. Miksi? Sillä sivupalkki jatkuu postauspalkin kanssa kokonaan alas asti. Musta se on semisti esteettisemmän näköstä, mutta oma maku jokasella.

Pari hyödyllistä nettisivua aiheen tiimoille

• Colorpicker - helppokäyttöinen värivalitsin josta saa näppärästi napattua värikoodit talteen ulkoasua muokkaillessa
• Photobucket - toimiva kuvahostpalvelu, jonne saa kuvat talteen ulkoasua muokkaillessa.
• W3schools - hyviä ohjeita asiaan liittyvä, älykätevä!

Eli näin. Seuraavassa postauksessa ois tarkotus alottaa joistain ihan perushötöstä.

Kiinnostaa nähä paljon anonyymiranttausta saan näistä postauksista ;)

Lista tehdyistä postauksista aiheeseen liittyen:

1. Mainbar ja sidebar
   
2. Header, taustakuva & Värit, fontit osa 1
3. Värit, fontit osa 2
4. Määreitä
5. Navigointipalkin poisto

PS // Osa teistä varmaan lukee Millin blogia, Dream Catcher's Landia? Milli pyys mua vähän auttamaan asiassa, meinaan se muutti blogin osotetta hieman fiksumpaan muotoon, joka siis on nykyään http://dcsland.blogspot.com ! Eli edellinen blogiosote laserlights.blogspot.com on vanhentunu, ja sen kautta blogiin ei enää pääse.

Let me use, use, use, use up tonight

Give me your your your your your your mind

♥

SASSE

Who needs enemies, when you've got friends?

'Elloo amigos!

Sori sori soriiii ettei postauksia oo näkyny! Nääs se on fakta että kone on yhä finito ja mullaki on vähän finito -olo koska on paljon tekemistä ja tekemätöntä, joten vaikka oon kuvannu teille jo KAKSI videopostausta, ei niistä kumpakaan ole päätynyt nettiin mun kiireiden jne tekemättömyyden takia. Aattelin udella tänään kuitenkin faijalta josko kone on milloin kunnossa, ja jos näyttää siltä ettei vielä pitkään aikaan, niin lupaan tehdä sen saamarin videopostauksen ja saada aikaseksi teille tänne nähtäväksikin sen!

Mutjoo, yleisesti faktaa tästä hetkestä: Kävin protukoulutuksessa ja nyt oottelen huhtikuun ekaa kokonaista viikkoo koska silloin pitäis tulla tieto siitä onko päässyt tiimiin, mikä ois ihan sikamuikeeta (tuun oleen niin ">:" jos en pääse, voin kertoa) jne! Koulutuksessa tapasin kaikkii jännittävii ihmisiä, täl viikolla pitäis ähä muutamaa heebouta ja sunmuuta. ja ja öö. Elämä yleisesti on ihan siistii, paitsi että stressaa - mm. raha-asiat jne. Ja pääsin työharjotteluun! Ja en osaa tehä kampauksia joita mun pitäis osata. Yhyy.

Nojoo, semmosta, vi ses videolla seuraavan kerran todennäköisesti ja sillee!

You laid your soul into

the fragile you call your life

But who remebers an outcast

who lives in vain?

With sharpened teeth's

we are breaking an entry

♥

SASSE

Ounou

....jepa.
Paremman koneen (joka sisältää mun blogille elintärkeän Photoshopin) poweri tais kosahtaa, joten uutta postausta tulee sitte ku joskus hamassa tulevaisuudessa joko kun:

• nöyrryn koulun koneille muokkailee kuvii yms.
• uus poweri kotiutuu koneeseen tms.

Tai saattaa tulla jotain tekstipostausta (vaiks sit niistä htmlkoodijutuista in case oon jaksaa) jossain vaiheessa, mut siis patience, hetken voi taas mennä että uutta matskuu tulee!

Adiós!

She's been a crazy dita,

disco diva, and you wonder:

"Who's That Chick?"

Too cold for you to keep her,

Too hot for you to leave her

♥

SASSE