I Say Sabotage

Aluksi Idan pyynnöstä sivupalkin siirtäminen ylemmäs.

Lisätään Custom CSS:ään seuraavat säännöt:

#header {
float: right;
width: 80%;
}

#headerimg {
margin-left: 0px;
}

Mitä tämä tekee? White as Milkissä tulee sivun alkuun header-lohko, joka on koko sivun levyinen. Sen alle tulevat content-, sidebar– ja footer-lohkot. Content-lohko siirretään sidebar-lohkon oikealle puolelle ominaisuudella float: right. Jotta sidebar saataisiin alkamaan aivan sivun alusta, sama asia pitää tehdä header-lohkolle, joka pitää myös kaventaa saman levyiseksi kuin content, eli 80% koko sivusta. Oletustyylissä header-lohkon sisällä olevalla headerimg-lohkolla on vasen marginaali 20%, jotta se alkaisi sivusuunnassa samasta kohdasta kuin content, mutta tämä ei ole enää tarpeen, joten marginaali asetetaan nollaksi.

Tätä testatessani huomasin, etten oikeastaan pidä lainkaan White as Milkin koko ikkunan levyisestä sivusta. Minusta blogipalstan leveyden pitäisi olla vakio, jolloin blogaaja pystyy hallitsemaan mahdollisimman hyvin sitä, miltä blogi näyttää selaimessa.

Mutta määrittämällä vakioleveyden teen blogista lukukelvottoman, jos selainikkuna tai käyttäjän monitori on tiettyä kokoa pienempi. Eikö tämä ole vähän väärin? No, White as Milkin oletustyyli syyllistyy samaan syntiin: Sivupalkin leveys on vakio 200px, mutta sen pitää mahtua sisällöltä yli jäävään 20%:iin. Sivusta tulee siis lukukelvoton, jos ikkunan leveys on alle 1000px.

Muutetaan Custom CSS tämän näköiseksi:

#header {
float: right;
width: 550px;
}

#headerimg {
margin-left: 0px;
}

#page {
width: 800px;
}

#content {
width: 550px;
}

Koko sivu sisältyy page-lohkoon. Asetetaan sille mukavan kompakti leveys 800px. Tällöin siis törmätään yllä mainittuun ongelmaan prosentuaalisten leveysten kanssa. Nyt kuitenkaan header– ja content-lohkojen leveydet eivät riipu tuntemattomasta ikkunan leveydestä, joten nekin voidaan asettaa vakioiksi. Leveydellä 550px saadaan mukava marginaali sivupalkin ja sisällön väliin.

Oletustyylissä page sijoittuu ikkunan keskelle, koska vasen ja oikea marginaali on auto. Muutetaan page-lohkon tyyliksi:

#page {
width: 800px;
margin: 20px auto 0 50px;
}

Nyt sivu pysyy ikkunan vasemmassa reunassa mukavalla 50px marginaalilla.

Samoja kikkoja voi kokeilla myös muissa teemoissa. En ole testannut näitä vielä muilla selaimilla kuin Firefoxilla, joten lisäsäätö saattaa olla vielä tarpeen.

Tagit: css, teemat.

Teemassa raamit tehty kuvalla. Ulkoasun muokkaamisessa pääsee helpommin liikkeelle jollain muulla teemalla.

Tagit: css, teemat.

Teemassa hyvin kommentoitu css.

Perusjutut: Taustaväri, tekstin fontti, koko ja väri:

body {
background: #333 url('images/pattern.jpg') repeat;
color: #b9b9b9;
font-family: Arial, Verdana, sans-serif;
font-size: 62.5%;
text-align: center;
font-weight: normal;
}

Linkit:

a {
color: #53abd5;
text-decoration: none;
}

a:hover {
color: #FFF;
}

Otsikkokuva:

#header {
width: 871px;
position: relative;
height: 236px;
margin-top: 100px;
background: #333 url('images/header.jpg') no-repeat;
}

Otsikkoteksti:

#header h1.main_title {
padding-right: 22px;
position: absolute;
bottom: 219px;
}

Kuvausteksti:

#header h3.slogan {
padding-right: 22px;
position: absolute;
font-size: 21px;
bottom: 160px;
left: 100px;
font-weight: normal;
}

Sivupalkki muokattavissa, mutta edellyttää joiltain osin hyvää CSS:n tuntemusta. Firebug on ystäväsi.

Tagit: css, teemat.

Teemassa hyvin kommentoitu css-tiedosto.

Perusjutut: Taustaväri, tekstin fontti, koko ja väri:

/*Background Color of the page*/
body {background-color:white;}

/*Body text color*/
body {color:#333;}

/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
/*background: #fff;
color: #333;*/
text-align: left;
}

Linkit:

/*Links color*/
a {color:#0066CC}

/*Links hover color*/
a:hover {color:#333}

Otsikkokuva:

#headerimg {
/* Asetetaan korkeus, vähintään yhtä korkea kuin taustakuva */
height: 150px;
/* Lisätään taustakuva */
background: url(’http://kuvan.osoite/kokonaisuudessaan’) no-repeat 0% 0%; /* Kuvan suhteellinen sijainti */
}

Otsikkoteksti:

/*Text color of the blog title in the header*/
#header h1 a {color:#3b6ea5;
/* Pois näkyvistä kokonaan */
display: none;
}

Kuvausteksti:

/*Text color of the blog description in the header*/
.description {color:#333;
/* Pois näkyvistä kokonaan */
display: none;
}

Sivupalkin otsikot:

#sidebar h2 {
margin: 5px 0 0;
padding: 0;
/* Pois näkyvistä kokonaan */
display: none;
}

Sivupalkin elementit:

#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px; /* Elementtien välinen etäisyys */
}

Tagit: css, teemat.

Teeman oma css-tiedosto erittäin vaikealukuinen. Teeman ulkoasun muokkaaminen onnistuu, jos hallitsee jo CSS:n sujuvasti. Firebug on ystäväsi.

Tagit: css, teemat.

Perusjutut: Taustaväri, tekstin fontti, koko ja väri:

body {
background: #fff; /* tai #ffffff tai rgb(255,255,255) tai white */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; /* Yleensä yksikkö on pt */
line-height: 18px;
color: #333333;;
}

Linkit:

a {
color: #878C8D;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color : #bbb;
}

Otsikkokuva:

#header {
height: 150px; /* Pitää olla vähintään yhtä korkea kuin taustakuva */
border-bottom: 1px solid #bbb; /* Reunaviiva katoaa laittamalla none */
/* Lisätään taustakuva */
background: url('http://kuvan.osoite/kokonaisuudessaan') no-repeat 0% 0%; /* Kuvan suhteellinen sijainti */
}

Otsikkoteksti:

#header h1 {
font-size: 50px;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
padding: 55px 0 5px 0; /* Tekstin etäisyydet laatikon reunoista: ylä oikea ala vasen */
/* Väri */
color: #00ffff;
/* Tasaus left / center / right */
text-align: left;
/* Pois näkyvistä kokonaan */
display: none;
}

Kuvausteksti:

#header h2 {
color: #555;
font-size: 19px;
font-weight: 100;
padding: 0 0 0 0;
letter-spacing: -1px;
line-height: 12px;
/* Tasaus left / center / right */
text-align: left;
/* Pois näkyvistä kokonaan */
display: none;
}

Sivupalkin (oikea) otsikot:

.right h2 {
height: 30px;
font-size: 15px;
color: #000;
line-height: 30px;
text-decoration: underline;
/* Pois näkyvistä kokonaan (Laita oma otsikkokuva teksti-vimpaimella) */
display: none;
}

Sivupalkin elementit:

.right ul {
list-style-type: none;
padding: 5px 10px 10px 10px; /* Etäisyydet laatikon reunoista ylä oikea ala vasen */
}

Tagit: css, teemat.