Pari pientä vinkkiä

Näin keväällä monen muun asian lisäksi tulee yleensä sellanen fiilis, että nyt on aika uudistaa blogin ulkoasua. Tätä silmällä pitäen päätin tehdä teille postauksen, jossa neuvon pari yksinkertasta pikku juttua, joilla pääsee jo pitkälle blogia muokatessa.

1.
Alotetaan vaikeemmasta, eli kursorin muokkaamisesta. Kursoria muokatessa voidaan joko etsiä jostain valmiiksi tehtyjä tai tehdä kuva itse, mutta sitä kuvan muokkaamista en nyt aio sen enempää selitellä.
Koko homma alotetaan sillä, että valitaan millasen kursorin sinne nyt haluu sitten laittaa. Kursoriksi voi valita ns. alkuperäsen kursorin tai sitten ihan oman kuvan. Niitä "alkuperäsiä" kursoreita on aika hyvin lueteltu tälläsellä sivulla: echoecho.com/csscursors.htm. Sen lisäks niitä ite tehtyjä kuvia löytyy tosi monelta sivulta, mutta koska en löytäny mitään yhtä missä olis paras valikoima päätin tehdä teille omat. Näittä voitte siis vapaasti käyttää omissa ulkoasuissanne.

http://3.bp.blogspot.com/-7t6by5LFkXs/UyV1DR52UzI/AAAAAAAADT0/sE6c-iMMlqg/cursorneli%C3%B6.PNG
http://1.bp.blogspot.com/-e07TCG95zIU/UyV2xL57ZhI/AAAAAAAADUQ/2OVwgs5T_28/kolmio.PNG
http://4.bp.blogspot.com/-qPsqyaeHzfM/UyV1DRLxy5I/AAAAAAAADTw/ZQi2JkurUJ0/s1600/cursornuoli.PNG

Nyt kun sitten tiedetään millanen kursori me sinne blogiin halutaan voidaan alkaa miettiä mitä koodeja tarvitaan ja mihin ne lisätään.
Koodi jota käytetään on tosi yksinkertanen ja se näyttää tältä:
cursor: url(img.url), auto;

Toi pieni tekstinpätkä lisätään sinne blogin html-koodiin. Html-koodista etsitään (ctrl + f) ensin kohta jossa lukee /* Content ja sen jälkeen ensimmäinen }-merkki. Se koodi jonka tossa äsken näytin lisätään html-koodiin heti }-merkin yläpuolelle.

Tällä hetkellä siinä koodissa siis lukee img.url, mutta se korvataan sen kuvan url-osoitteella, jota halutaan kursorina käyttää. Ja jos taas käyttää noita "alkuperäisiä" kursoreita kirjotetaan se kursorin nimi siihen url(img.url), auto tilalle.

Esimerkiksi siis, jos käytetään mun tekemää neliö kursoria koodi näyttäis tältä
cursor: url(http://3.bp.blogspot.com/-7t6by5LFkXs/UyV1DR52UzI/AAAAAAAADT0/sE6c-iMMlqg/cursorneli%C3%B6.PNG), auto;

Ja jos taas haluttaisiin kursoriksi nuoli, joka osoittaa oikeaan näyttää lisättävä koodi tältä
cursor: ne-resize;


2.
Sitten voidaankin siirtyä siihen helpompaan eli tummennetun tekstin värin vaihtamiseen. Mulla ittellänikin tämä on vaihdettu, joten voitte nähdä hyvän esimerkin miten se toimii, tummentamalla vaikka tämän tekstin. Tausta ei muutukkaan siniseksi vaan harmaaksi. Niinkuin sanoin tämä on vielä yksinkertasempi kun toi edellinen. Eli etsitään (ctrl + f) blogin html-koodista kohta jossa lukee /* Content ja sen yläpuolelle lisätään seuraavanlainen koodi:
::selection {background: #ffffff; color: #000000}
::-moz-selection {background: #ffffff; color: #000000}

Nyt se näyttää siltä, että tausta on valkoinen (#ffffff) ja tekstinväri musta (#0000000). Jos tätä haluu muokata täytyy noita värin kirjain-numero yhdistelmiä muuttaa. Colorpicker.com on hyvä sivusto, jolta pystyy noita värejä etsimään. Eli sieltä ensin etsit sen värin, jonka haluat ja sen jälkeen kopioit sen kuusi nurmeroisen/kirjaimisen tekstin sieltä laatikon yläpuolelta ja lisäät sen tohon koodiin #-merkin jälkeen niin, että se korvaa noi mitä siinä aikasemmin on ollut.


Jos tulee kysymyksiä kannattaa rohkeesti kysyä. Kommentteihin voi myös laittaa ehdotuksia mitä seuraavassa tämän tyyppisessä postauksessa voisin neuvoa :)