CSS koodia

Tässä tämän sivuston CSS koodi, tehty white wash pohjalle. Kun tämän copy pastaa Appearance kohdan CSS-osioon, niin pääsee vähän alkuun oman blogin muokkailussa.

Koodi siis löytyy klikkaamalla tämä postaus auki tuosta alhaalta.

/*muokkaa blogin ulkomuotoa tällä CSS koodilla*/

/*taustaväri, fontit, tekstien koot ja värit*/

body {
background: url("http://kuva.jpg") no-repeat bottom right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
}
/*yläpalkin kuva*/

div#header {
background: url("http://kuva.jpg")
no-repeat bottom left;
}

/*yläpalkin korkeus*/
#header {
height: 227px;
border-bottom: none;
}

/*Blogin nimi yläpalkissa*/
#header h1 {
font-size: 40px;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
padding: 30px 200px;
text-align: right;
}

#header h1 a {
color: #99CC00;
text-decoration: none;
}

#header h1 a:hover {
color: #CCFF00;
text-decoration: none;
}

/*Blogin kuvaus yläpalkissa*/
#header h2 {
color: #000033;
font-size: 19px;
font-weight: 100;
padding: 0 0 0 0;
letter-spacing: -1px;
line-height: 12px;
}

/*menu, joka näyttää pysyvät sivut*/
#menu {
font-size: 15px;
font-weight: 10;
font-family: Arial, Helvetica, sans-serif;
padding: 100px 0px;
text-align: left;
text-decoration: none;
}

#menu a {
color: #99CC00;
text-decoration: none;
}

#menu a:hover {
color: #CCFF00;
text-decoration: none;
}

/*vasen puoli blogia*/
}

.left {
width: 568px;
float: left;
text-align: justify;
color: #99CC00;
}

.left h2 {
color: #99CC00;
font-size: 20px;
font-weight: 100;
padding : 15px 0 15px 0;
}

.left h2 a {
color: #99CC00;
}

.left h2 a:hover {
color: #99CC00;
text-decoration: none;
}

.left ul {
padding-left: 3em;
}

.left ol {
padding-left: 3em;
}

/*oikea puoli blogia*/
.right {
width: 160px;
float: right;
padding: 10px;
border-left: none;
}

.right ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
}

.right ul ul{
margin:0.1667em 0;
padding: 5px 0 0 15px;
}

.right h2 {
height: 15px;
font-size: 15px;
color: #99CC00;
line-height: 15px;
text-decoration: none;
padding: 5px 0px 10px;
}

.right a {
text-decoration: none;
color: #666;
}

.right a:hover {
text-decoration: none;
color: #99CC00;
}

/*RSS syöte*/

.nomove {
width: 160px;
float: right;
padding: 10px;
border-left: none;
}

.nomove ul {
list-style-type: none;
padding: 5px 10px 10px 10px;
}

.nomove h2 {
height: 30px;
font-size: 10px;
color: #99CC00;
line-height: 30px;
}

.nomove a {
font-size: 10px;
color: #99CC00;
}

.nomove a:hover {
text-decoration: underline;
color: #99CC00;
}
#spacer {
padding-top: 10px;
border-bottom: none;
}

Plus tässä vielä jotain lisävinkkejä:

/* Koko blogin ympäröivä laatikko */
#wrap {

font-family: verdana;

background: rgb(255,255,255);

/* Kokeile solid / dashed / dotted */
border: 0px solid rgb(200,200,200);

/* Sivun yläreunan ja reunuksen väli */
margin-top: 20px;

/* Reunuksen ja sisällön väli: ylä oikea ala vasen */
padding: 0px 20px 10px 20px;

}

/* Tagit listaava laatikko */
#content .showtags { background: rgb(253,253,253); }

/* Turha rivinvaihto pois blogin otsikon ja kuvauksen välistä */
#header br { display: none; }

/* Vähän väliä kuitenkin otsikon ja kuvauksen väliin */
#header h1 { margin-bottom: 0px;}

/* Tekstiotsikot piiloon sivupalkissa */
.right h2 { display: none; }

/* Vähän väliä kuvaotsikon alle */
.right .textwidget { margin-bottom: 5px; }

/* RSS-linkit piiloon hakulaatikon yläpuolelta */
.nomove ul { display: none; }