sidebar.php

Avaa sidebar.php. Lisää heti ensimmäiselle riville, <h2> tagin eteen <div id=”sidebar”> ja viimeiselle riville </div>. Poista nyt <h2>Valikko</h2>. Avaa style.css ja lisää #container { … } jälkeen:

#sidebar {
background-color: #657855;
padding: 0 0 15px 0;
}

Tallenna ja lataa taas blogin etusivu. Blogimerkintöjen perään on ilmestynyt vihreellä taustalla oleva valikko. Nyt pitäisi saada se valikko siihen blogimerkintöjen oikealle puolelle. Se onnistuu muokkaamalla molempien, #container { … } ja #sidebar { … } sisälle:

float: left;

Tallenna style.css. Lataa blogin etusivu. Nyt blogitekstin oikealle puolelle pitäisi olla ilmestynyt se vihreä valikkolaatikko. Se on liian lähellä keskustan tekstiä, joten lisätään seuraavat määritykset #container ja #sidebar { … } sisälle:

#container {
padding: 10px 0 10px 10px;
width: 540px;
float: left;
}
#sidebar {
margin: 0 0 0 10px;
background-color: #657855;
float: left;
width: 190px;
}

Laitoimme valikkolaatikolle leveydeksi (width) 190px ja marginaaliksi (margin) vasemmalle 10px, ettei keskustan teksti ota reunaan kiinni.

footer.php

Lisää footer.php sivun alkuun, ennen Copyright tekstiä <div id=”footer”> ja </a> tagin jälkeen </div>. Sen jälkeen lisää style.css tiedoston loppuun:

#footer {
clear: both;
background-color: #a1b094;
text-align: center;
padding: 10px 0 10px 0;
}

Laitoimme taustaksi vaalean vihreän, tekstille keskitys ja sisennys ylhäältä ja alhaalta 10 pikseliä. Kohdassa clear: both, tyhjennämme molemmat divit, containerin ja sidebarin, koska haluamme footerin tulevan sivun alas. Ilman clear komentoa teksti olisi heti valikon alapuolella.

Hienosäätöä

Avaa style.css ja lisää body { … } koodin perään:

a:link, a:visited {
text-decoration: underline;
color: #467e30;
}
a:hover {
text-decoration: none;
color: #a93d0d;
}

Tallenna, lataa blogin etusivu. Muutimme linkkien väriä ja otimme linkistä alleviivauksen pois kun hiiri menee linkin kohdalle. Huomaa, että linkin väri muuttui myös valikossa, joten joudumme muokkaamaan myös valikkoa. Se onnistuu lisäämällä nämä kolme:

#sidebar h2 {
border: 1px solid #39462d;
background-color: #8d9b53;
padding: 2px 0 3px 8px;
color: #313717;
text-align: center;
}
#sidebar ul li {
font-family: Georgia, Sans-serif;
font-size: 14px;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0 5px 0 5px;
}

#sidebar h2 muuttaa jokaisen #sidebar divin sisällä olevien <h2></h2> tageilla määritellyt tekstit. #sidebar ul kohdassa otimme listatyypiksi “ei mitään”, eli mitään palloja/neliöitä yms ei näy listassa. Linkki ei vielä muuttunut, joten se muutetaan sitten näin:

#sidebar a {
color: #ffffff;
}
#sidebar a:hover {
color: #000000;
}

Tallenna, lataa blogisi ja sivusi valikossa olevat linkit on nyt muuttunut valkoisiksi ja hiiren osoittaessa ne muuttuvat mustaksi.

Avaa index.php ja etsi alusta kohta <?php the_time(’d.m.Y’) ?> ja lisää sen eteen <span class=”pvm”> sekä perään </span> ennen </h2>. Avaa sen jälkeen style.css ja lisää sinne #container { … } jälkeen:

.pvm {
color: #477b19;
font-size: 11px;
}

Nyt jokaisen blogimerkinnän päiväys on erilainen kuin otsikko. Vielä joudumme muokkaamaan style.css tiedostossa blogimerkinnän näkyvyyttä. Eli tarkoitus on laittaa sille taustaväri, että jokainen otsikko erottuisi helposti. Lisää .pvm { … } eteen:

h2 {
background-color: #a6c689;
padding: 5px;
}

Tallenna. Avaa uudelleen blogin etusivu. Nyt otsikot erottuvat paremmin.

Loppusanat

Sarjan neljäs osa oli siinä. Seuraavasta osasta en osaa sanoa mitään, koska periaatteessa tässä oli kaikki tarpeellinen. Tietenkin jotain viilauksia voi ja pitääkin tehdä, niistä voi kysyä ohjeita sähköpostilla/kommentoimalla tähän oppaaseen. Nyt on mahdollisuus vaikuttaa mistä seuraava WP-opas tehdään, eli mitä jäi mieltä kaivelemaan. Tässä vielä tämän osan lopulliset tiedostot:

- header.php
- index.php
- sidebar.php
- footer.php
- style.css

WordPress Theme -opas, osa 5