Tänään on vuorossa themen ulkoasun tyylittely, eli style.css tiedoston muokkaus. Siihen ei olla koskettu sitten ensimmäisen osan, joten avaa style.css, index.php, header.php, sidebar.php ja footer.php.

Themen tyylit

Themen tyylitiedosto (style.css) määrittelee miltä blogin theme näyttää. Sen takia se onkin yksi tärkeimmistä tiedostoista ulkoasuja tehdessä, teki sitten ulkoasun WP:lle tai ihan normaalin nettisivuston. Tällä hetkellä teema näyttää erittäin tylsältä ja kaikki on yhdessä jonossa. Vieressä on teeman nykyinen asetelma. Tarkoituksenamme on tässä osassa saada teemasta hieman selkeämpi.

Tavoitteemme on vasemmalla oleva kuva. Ennen sivuston ulkoasun tekemistä, täytyy sivusta tehdä jonkinlainen suunnitelma ja ottaa mahdolliset haittatekijät huomioon. Päätin tehdä teemasta 750px leveän ja keskitetyn. Tämä sen takia, että 750px leveä sivusto näkyy vielä 800×600 näyttöillä ja voimme keskittää sivuston helposti <div></div> tageilla.

style.css

Tehdään sivustolle pieni muutos ennen muihin sivuihin koskemista. Jätä pari riviä väliä */ rivin jälkeen ja kirjoita:

body {
background-color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0;
padding: 0;
}

Tallenna style.css ja lataa blogisi etusivu. Huomaa, että fontti ja fontin koko muuttui. Myös marginaali ja padding laitettiin nollaksi, eli sivulla ei ole enää näkymättömiä reunoja estämässä tekstin kosketusta selaimen reunoihin. Laitoimme myös taustavärin valkoiseksi sekä tekstin mustaksi ja Verdana -fontilla. Jos vierailijan koneelta ei löydy Verdanaa, etsitään Arial fontti jne.

header.php

Lisää header.php -tiedostoon ennen <h1> tagia <div id=”wrapper”>, seuraavalle riville <div id=”header”> ja seuraavan rivin <br /> tagin jälkeen </div>. Poista sen jälkee <br /> tagi. Tallenna header.php. Lisää </div> footer.php -tiedostoon ennen </body> tagia, jotta saamme suljettua #wrapper divin.

Avaa style.css tiedosto. Lisää body { … } määritelmän jälkeen yksi tyhjä rivi ja kirjoita:

#wrapper {
margin: 0 auto 0 auto;
width: 750px;
}

Lisäsimme nyt sen sivuston keskittäjän. Keskitys onnistuu kun laittaa width (leveys) -arvoksi vähemmän kuin 100% ja margin (marginaali) -arvoksi vasemmalle ja oikealle sivulle “auto”. Ensimmäinen nolla on ylämarginaali ja toinen nolla on alamarginaali.

Miksi #wrapper, eikä .wrapper? Laitoimme divin id:ksi, emmekä class:ksi. ID ja class eroaa toisistaan sillä, että id=wrapper ei saa ilmestyä sivulla kuin kerran, class=wrapper voi ilmestyä kuinka monesti tahansa. Käytän wrapperissa id:tä sen takia, koska sitä ei tarvita kuin sivuston alussa. Sama asia headerissa ja tulevissa osissa.

Lisää #wrapper { … } jälkeen #header ja kirjoita:

#header {
background-color: #acabae;
padding: 10px;
text-align: center;
}

Tallenna, päivitä blogisi sivu. Nyt sivun otsikon taustan pitäisi muuttua harmahtavaksi ja tekstin keskitetyksi. Laitoimme myös laatikolle 10 pikselin sisennyksen.

Kirjoita #header { … } jälkeen:

#header h1 a, h1 a:visited, h1 a:active {
color: #000000;
text-decoration: none;
}
#header h1 a:hover {
color: #ffffff;
}

Tallenna ja lataa blogin etusivu. Blogin otsikon linkin pitäisi muuttua mustaksi ja kun hiirellä osoittaa nimeä sen pitäisi muuttua valkoiseksi.

index.php

Lisää <?php get_header(); ?> rivin jälkeen yksi tyhjä rivi ja kirjoita <div id=”container”> sulje div laittamalla rivin <?php get_sidebar(); ?> eteen </div>.

Tämän jälkeen lisää style.css tiedostoon #header { … } jälkeen:

#container {
padding: 10px 0 10px 10px;
}

Päivitä blogisi sivu. Määrittelimme #container divin ylä/ala/vasemman puolen sisennykseksi 10px, eli tekstin pitäisi hieman liikkua “laatikon” keskelle.