I Say Sabotage

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.

”I don’t say sāb’ə-täzh’, you say sāb’ə-täzh’. I say sāb’ə-tāzh’.”

– William Shatner

Tagit: I Say Sabotage.