a {
color: #C0C0C0;
}

a:hover {
color: #80FFFF;
}

a och a:hover behandlar alla ”överblivna” länkar. Exempelvis alla länkar du skriver när du skriver inlägg i bloggen. Alla länkar som inte har specifika koder, tar a och a:hover hand om.

a            visar hur länken ser ut orörd
a:hover  visar hur länken ser ut när man för pekaren över den

...........................................................................................................................................................................

#wrapper {
clear:none;
margin: 30px auto;
padding: 20px;
width: 950px;
background-color: #FFFFFF;
}

Wrapper är själva ramen runt bloggen. Det är innanför wrappern allt händer, en gräns för hur stor yta allt innehåll ska få plats på. Viktigt att notera här är att du kan inte göra bredden på content (inläggen) och side (sidomenyn) större än wrappern, för då kommer sidomenyn att hoppa ner under inläggen. Ex: Wrapper 950px: content 750px, side 200px.

...........................................................................................................................................................................

#wrapper:after {
content: ”.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Efter wrappern. Här kan man tex sätta in en sk footer. Men det är en helt annan historia.

...........................................................................................................................................................................

p {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

...........................................................................................................................................................................

#header {
background: #FFFFFF url(https://cdn1.cdnme.se/cdn/7-2/1374594/images/2011/min-header.jpg) no-repeat right center;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 950px;
height: 355px;
}

Headern är längst upp på bloggen, själva huvudet. Här är det bra att kolla att man ställt in sin bredd och höjd på bilden korrekt. Om du tex har en height som är 389px kan det inte stå 355px i stilmallen, för då syns inte hela höjden på bilden. Samma sak gäller självklart bredden. Använd helst inte margin och padding här, då det kan sturla till det och kan se olika ut beroende på vilken webbläsare man har.

...........................................................................................................................................................................

#side {
float: left;
width: 180px;
margin: 0px;
padding: 24px 18px 0px 12px;
border-right-width: 3px; ← Delare mellan inläggen och sidomenyn. Obs! Den måste räknas med i wrapperbredden!
border-right-style: solid; ← Stil, solid: vanlig linje, dashed: streckad, dotted: prickig.
border-right-color: #CCCCCC; ← Färg
}

Side är själva sidomeny.  Här ligger sidomenyn till vänster, men för att ändra den till höger sida får du byta ut left mot right, samt byta ”float” vid content från right till left. Då kommer sidomenyn ligga på höger sida och inläggen på vänster sida.

...........................................................................................................................................................................

#content {
overflow: hidden;
width: 538px;
position:relative;
padding: 20px 0px;
voice-family:”\”}\”";
voice-family:inherit;
float: right;
margin: 0px 10px 0px 0px;
}

Content är själva innehållet, där inläggen hamnar.

...........................................................................................................................................................................

#header a {
color: #000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
}

Denna kod visar hur länkar i headern ser ut. Eftersom att de inte finns någon a:hover här, så kommer inte länken att ändra färg när man för pekaren över den. Dock kan man lägga till detta genom att skriva:

#header a:hover {
color: #FFF;
text-decoration: underline; ← Hur texten ska se ut, underline: understruken
font-weight: bold ← Hur texten ska vara, normal: vanlig, bold: fet osv..
}

...........................................................................................................................................................................

h1 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
text-transform:uppercase;
margin: 0px;
padding: 0px;
height: 30px;
}

Textutformningen av din bloggtitel, om du har en standardmall.

...........................................................................................................................................................................

h2 {
font-family: arial, verdana, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
margin: 0px;
padding: 0px;
width: 170px;
}

Utformningen av bloggbeskrivningen som hamnar under din bloggtitel i standardmallar.

...........................................................................................................................................................................

/** Entry headers **/
h3 {
background: #FFFFFF; ← Bakgrundsfärg på rubrikerna
font-family: Arial, Helvetica, sans-serif; ← Typsnitt
font-size: 14px; ← Storleken på texten
font-weight: bold;
padding:10px 10px 10px 0px;
color: #ED6EA3; ← Färgen på texten
margin: 0px 0px 10px;
text-transform: none; ← Ändra till uppercase om du vill ha versaler
}

Rubrikerna i inläggen.

...........................................................................................................................................................................

.navheader {
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
padding:5px 5px 0px;
margin-bottom:0px;
background-color:#FFFFFF;
text-transform: uppercase;
}

Rubrikerna i sidomenyn.

...........................................................................................................................................................................

.nav {
font-family: verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
margin: 0px;
}

All annan text i sidomenyn.

...........................................................................................................................................................................

.nav ul {
margin: 0px 0px 12px;
padding: 5px 10px 10px;
font-weight: normal;
background-color: #FFFFFF;
}

Hur texten ska vara placerad i sidomenyn.

...........................................................................................................................................................................

.nav li {
list-style: none;
padding: 0px 0px 6px 0px;
font-weight: normal;
}

Hur texten ska vara placerad i sidomenyn, samma visa som ovan, men fokus på listor (arkiv, kategorier etc).

...........................................................................................................................................................................

.nav a { color: #000000; }
.nav a:hover { color: #F5F5F5; }

Länkarna i sidomenyn. Orörd och rörd.

...........................................................................................................................................................................

/** Post’s body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 10px;
background-color: #FFFFFF;
padding: 10px;
}

All text i dina inlägg, utom rubrik, tid, datum, kategori etc. Men det du skrivit i inläggen.

...........................................................................................................................................................................

/** ‘Posted by’ txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #666;
text-align:right;
}

Texten under inläggen, tid, datum, kategori etc.

...........................................................................................................................................................................

.entrymeta a { color: #E04951; }
.entrymeta a:hover { color: #80FFFF; }

Länkarna under alla inlägg, dvs kommentar-länken, kategori-länken etc.

...........................................................................................................................................................................

.commentheader {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color:#809FFF;
padding:5px;
color: #FFFFFF;
}

Kommentarrubrikerna.

...........................................................................................................................................................................

.commenttext {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000;
line-height: 130%;
}

Texten i själva kommentaren någon skrivit till dig.

...........................................................................................................................................................................

.commentmeta {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: normal;
color: #999999;
margin: 10px 0px 20px 0px
}

Datum och tid, samt möjligtvis bloggadessen till personen som har skickat kommentaren.

...........................................................................................................................................................................

.commentmeta a { color: #809FFF; }
.commentmeta a:hover { color: #80FF9F; }

Utseende på länken till personen som har skickat kommentaren.

...........................................................................................................................................................................

.commentform {
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
margin: 0px 0px 20px 0px
}

Där man skriver kommentaren.

...........................................................................................................................................................................

.separator {
border-top: 2px solid #CCCCCC;
border-bottom: 0px solid #CCCCCC;
margin: 14px 0px 14px 0px
}

En separator som brukar ligga under varje inlägg som ett streck. Många väljer att ta bort den. Leta upp separator i alla kodmallar och radera det om du inte vill ha den (<hr class="separator" />).

...........................................................................................................................................................................

.default {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333;
font-weight: bold;
padding: 0px 0px 10px 0px;
text-transform: uppercase;
}

Detta syns när man klickar på ett enskilt inlägg för att kommentera. Default sköter texterna ”Kommentarer” (som ligger ovanför kommentarerna) och ”Trackback”.

...........................................................................................................................................................................

.subside {
font-family: ”Trebuchet MS” Verdana, Arial, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
padding: 0px 0px 0px 0px;
}

RSS-ikonen.

...........................................................................................................................................................................

.xmlButton {
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
font:bold 10px Verdana, Arial, Helvetica, Sans-serif;
color:#FFF;
background:#F60;
text-decoration:none;
margin:0;
}

...........................................................................................................................................................................

.image {
border: 2px solid #CCCCCC;
background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}

Alla bilder i din blogg, både i inläggen och i sidomenyn. Jag skulle ställt alla margin och padding till 0px och ställt in border till 0px.

...........................................................................................................................................................................

.thumbnail {
border: 2px solid #CCCCCC;
background-color:#FFFFFF;
padding:2px;
margin: 0px 6px 6px 0px;
}

De klickbara miniatyrbilderna. Jag skulle gjort samma sak här som ovanstående justeringsexempel.

...........................................................................................................................................................................

.video{
padding: 0px 0px 0px 0px;
}

...........................................................................................................................................................................

.fieldName{
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin: 0px 0px 12px 0px
}

...........................................................................................................................................................................

select{
font-family: verdana, arial, sans-serif;
font-size: 11px;
}

...........................................................................................................................................................................

#calendar {
color: #333333;
font-family: ‘Trebuchet MS’, Verdana, sans-serif;
padding: 0px;
text-align: left;
background-color: #FFFFFF;
margin: 12px 0px 12px 0px;
padding: 10px;
}

#calendar table {
padding: 1px;
/*border-collapse: collapse;*/
border: 0px;
}

#calendar table caption {
color: #666666;
font-family : Arial, Helvetica, Sans-serif;
font-size : 0.7em;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;
text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

#calendar table th {
text-align: center;
font-weight: bold;
font-size: xx-small;
}

#calendar table tr td {
border: 1px solid #666666;
text-align: center;
font-size: xx-small;
}

#calendar table tr ul {
color: #666666;
list-style: dot;
margin: 0px 0px 0px 20px;
padding: 4 0 5 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.7em;
}

#calendar table tr td.cssDayMouseOver {
border: 1px dotted red;
cursor: hand;
}

#calendar table tr td.cssDayMouseOut {
border: 1px solid #666666;
}

#calendar table tr td.cssEntryBox {
border: 1px solid gray;
padding: 6px;
text-align: left;
background: #FFFFFF;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
color: #666666;
}

#calendar table tr td ul li {
color: #666666;
}

#calendar table tr td div.cssDayEntryHeader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 0.8em;
text-align: left;
font-weight: bold;
padding: 4;
}

form {
padding: 10px;
background-color: #FFFFFF;
margin: 0px 0px 10px;
}

Denna funktion kompenserar både commentform samt alla andra ”form”-koder t ex sökformuläret på bloggen.

...........................................................................................................................................................................

#profile {
font-family: Verdana, Helvetica, Sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding-left: 16px;
}

Standardprofilen som sitter i sidomenyn på förstasidan. Själv tycker jag inte att det är så fruktansvärt vackert, men det är en smaksak.

...........................................................................................................................................................................

#profile h4{
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
margin: 0px 0px 6px 0px;
}

Rubriken under profilbilden (Om).

...........................................................................................................................................................................

#profile p{
}

...........................................................................................................................................................................

Så, nu vet ni förhoppningsvis lite mer om stilmallen. Man kan säga att den styr det designmässiga och placeringar av innehåll och sidomeny, medan kodmallarna sköter om innehållet i hela bloggen. Men kodmallarna tar vi någon annan dag!