Project Template - Taustavärit + Taustakuva

Taustavärit

Lue aikaisempi postaukseni heksakoodeista, mikäli ne eivät ole sinulle entuudestaan tuttuja. Kannattaa heti alkuun opetella, että #000000 on musta ja #FFFFFF valkoinen. Niitä värejä kun yleensä tarvitsee eniten.

Blogin taustaväri:

1. Selaa koodia hiukan alaspäin niin, että tämä kohta tulee esille:

body {
       margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.


Sisällön taustaväri:

1. Selaa koodista tämä kohta esille:

#container {
     line-height: 150%;
     position: absolute;
     left: 0px;
     width: 800px;
     background-image: url("http://www.sinun.bannerisi.osoite.png");
     background-repeat: no-repeat;
     background-color: #FFFFFF;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.


Tekstiosion taustaväri:

1. Selaa koodista tämä kohta esille:

#main {
     width: 490px;
     margin-top: 225px;
     padding-left: 0px;
     padding-right: 0px;
     text-align: left;
     margin-left: 10px;
     margin-right: 10px;
     float: right;
     overflow: hidden;
     background-color: #FFFFFF;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.

Sivupalkin taustavärit:

1. Selaa koodista tämä kohta esille:

#left {
     float: left;
     width: 200px;
     line-height: 150%;
     background-color: #FFFFFF;
     margin: 225px 10px 0px 10px;
     font-size: x-small;
     padding-left: 0px;
     overflow: hidden;
     padding-bottom: 0px;
}

2. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
3. Esikatsele ja tallenna muutos mikäli se miellyttää.
4. Selaa koodia vielä enemmän alaspäin kunnes löydät tämän kohdan:

.side {
     padding: 5px;
     margin: 5px;
     font-size: x-small;
     background-color: #FFFFFF;
     color: #000000;
     text-align: left;
     line-height: 140%;
}

5. Laita haluamasi värin heksakoodi sinisellä merkittyyn kohtaan mallin mukaan.
6. Esikatsele ja tallenna muutos mikäli se miellyttää.

Taustakuva:

Lue aikaisempi postaukseni taustakuvista.

1. Selaa koodia tähän kohtaan:

body {
     margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

2. Lisää siihen uusi rivi taustakuvaa varten näin ikään:

body {
     margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     background-image:url('taustakuvasi.jpg');
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

(Et voi pitää samaan aikaan taustaväriä ja taustakuvaa, joten voit poistaa vihreällä merkityn taustaväririvin. Voit kuitenkin halutessasi jättää rivin esimerkiksi tulevaisuutta varten ja huolehtia vain siitä, että taustakuvarivi on taustaväririvin alapuolella.)

3. Laita taustakuvasi osoite sinisellä merkittyyn kohtaan.
4. Esikatsele ja tallenna.

Mikäli haluat määritellä taustakuvasi sijaintia ja käyttätymistä tarkemmin:

1. Lisää haluamasi määreet violetin esimerkin mukaisesti taustakuvarivin alapuolelle. Voit siis käyttää useampaa tai vain yhtä.

body {
     margin: 0px 0px 0px 0px;
     background-color: #FFFFFF;
     background-image:url('taustakuvasi.jpg');
     background-repeat:repeat-y;
     background-position:right;
     background-attachment:fixed;
     text-align: center;
     font-family: 'Geneva', Verdana, Times, sans-serif;
}

Löydät listan erilaisista määreistä esimerkiksi täältä. Muista lisätä ; jokaisen uuden rivin perään!