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 :)

Comments

  1. osaisitko tässä suoraan kertoa miten päivämäärän saa ennen otsikkoa?

    ReplyDelete
  2. anteeks, meinasin et otsikon jälkeen

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. En tiiä onko vika mun selaimessa vai missä, mutta mulla ainakin Explorerilla tää kursori on ihan normaali ja tummentaessa toi tausta on sininen. Lisäks noi "about me", "archive" yms. tuolla ylhäällä on puoliks piilossa, tekstin otsikko on kokonaan päivämäärän päällä ja esimerkiks siinä postauksessa missä alkuperäisten kuvien pitäis näkyä ku siirtää kursorin siihen päälle ni se ei toimi... Mutta sitten ku tuun tänne Chromella niin kursori on erilainen ja muutkii jutut on niinku niitten pitääki :)

    Toivottavasti tää ei kuulostanu kauheelta valitukselta sillä tykkään sun blogista paljon, mutta aattelin kertoa jos et oo ite huomannu näitä :)

    ReplyDelete
    Replies
    1. Explorer ei tue oikeestaan mitään uudempia koodin asioita jote oon tullu siihe lopputulokseen etten jaksa enää välittää miltä tä blogi explorerissa näyttää :Dd se rajoittais niin paljon kaikkia niitä ideoita joita mulle tulee mieleen, joten sen takia näyttää siltä :)

      Delete
  5. tiiätkö miten tota kursorii sais muutettuu niis muissaki muodois tai siis esim. kun sen vie linkin pääl ni tulee se käsi, miten sen käden saa muutettuu?

    ReplyDelete
    Replies
    1. etsit coodista kohdan jossa lukee a:hover jonka alapuolelle lisäät sen alapuolelle ton saman koodin kun tossa yläpuolella :) Eli jos haluut kursorin pysyvän normaalina lisäät siihen alapuolelle cursor:default:

      Delete
  6. Ooh jee kiitos paljon, ootpa velho :D

    ReplyDelete

Post a Comment