Tescho

Här kommer en förklaring till vad allting innebär i en stilmall. Jag har utgått från temat ”fashion” från blogg/webblogg.se. Det som är i kursiv stil behöver du inte bry dig om och det som är kursivt med färg kan du ta bort. En stilmall sköter allt utseende i din design (bakgrunder, färg på länkar, typsnitt etc) medan i kodmallarna placerar man hur allting ska vara uppbyggt.

I detta inlägger förklarar jag inte vad diverse smågrejer betyder i stilmallen utan vad alla ”rubriker” på koderna betyder. Däremot så skriver jag ut lite små tips här och var. Om du t ex vill lära dig padding & margin finns det samlat { här }

body {
margin: 0px;
padding:0px;
background: #FFFFFF url(http://static.blogg.se/shared/img/css/fashion_bg.jpg);
}

↑ Betydelse: // Body = Kroppen på designen. Om du vill byta bakgrund kan du göra det vid ”background”. Om du vill ha en bild som bakgrund byter du ut länkadressen ”http://…..” Mer info om hur du positionerar din bakgrund hittar du { här } //

a {
color: #999999;
}

a:hover {
color: #80FF9F;
}

↑ Betydelse: // a & a:hover behandlar alla ”överblivna” länkar. T ex, länkarna i sidomenyn har egna koder (nav a + nav a:hover) och då är det dem som används. De som inte har egna koder kommer a & a:hover sköta om. De länkar som publiceras i inlägg har inga egna koder i denna stilmall och därför tar a & a:hover hand om dem. Om man skulle lägga in koder för länkarna i inläggen skulle de heta ”#entrybody a & #entrybody a:hover”.

a = hur länken ser ut hela tiden
a:hover = hur länken ser ut när man har musen över den //

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

↑ Betydelse: // Wrapper = ramen runt hela designen. Det är som en ram runt en tavla. I ramen ska få plats med allt innehåll. Det betyder att inlägg + sidomeny inte får vara bredare än bredden på wrapper. Då kommer sidomenyn hoppa ner under inläggen. //

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

↑ Betydelse: // Detta är alltså efter wrapper – wrapper:after //

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

#header {
background: #FFFFFF url(http://static.blogg.se/shared/img/css/fashion_top.jpg) no-repeat right center;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}

↑ Betydelse: // Header är det som är längst upp i en design, header – head – huvud. Man får tänka allting på engelska och översätta så blir det lättare i många sammanhang. Jag tänkte även sticka in med att jag aldrig brukar använda padding/margin i #header utan jag brukar forma diverse mellanrum i headerbilden istället (som man t ex gör i photoshop). //

#side {
float: left;
width: 180px;
margin: 0px;
padding: 24px 18px 0px 12px;
left:-30px;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #CCCCCC;
}

↑ Betydelse: // side = sidomeny. Inge svårare än så. I stilmallen ”fashion” som jag visar har de lagt in left:-30px; och det är onödigt. Det kan du ta bort (kursivt). En annan sak som är värd att nämnas är att i denna stilmall ligger sidomenyn till vänster och för att ändra den till höger sida får du skriva in ”right” vid ”float” (byta ut left till right) samt byta ”float” vid content från ”right” till ”left”. Då kommer sidomenyn ligga på höger sida och inläggena på vänster sida. //

#content {
overflow: hidden;
width: 538px; <-- Det räcker med en width.
position:relative;
left:0px;
padding: 20px 0px;
voice-family:”\”}\”";
voice-family:inherit;
width:538px;
float: right;
margin: 0px 10px 0px 0px;
}html>body #content { width: 538px }

↑ Betydelse: // content = är som en slags ram runt alla inlägg. Stilmallen ”fashion” har några onödiga koder inlagda här (tom dubbletter) så jag rekommenderar att ta bort det som är kursivt ovan. //

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

↑ Betydelse: // Detta är koder för länkar i headern. Här ser man att det inte finns någon a:hover-kod och då kommer inte länken ändras när man håller musen över den. Man kan självklart lägga in det om man vill ha någon annan färg eller utseende när man håller musen över länken. Då lägger man in #header a:hover { alla grejer här, så som color:; etc } //

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

↑ Betydelse: // h1 = Bloggtitel. Du ändrar vad som ska stå under inställningar > blogg. //

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

↑ Betydelse: // h2 = Bloggbeskrivning. Du ändrar vad som ska stå under inställningar > blogg. //

/** Entry headers **/
h3 {
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #ED6EA3;
margin: 0px 0px 10px;
text-transform: uppercase;
}

↑ Betydelse: // h3 = Rubrik i inlägg. text-transform: uppercase; betyder att det ska vara versaler. Om man inte vill ha det kan man byta ut ”uppercase” till ”none”. //

.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;
}

↑ Betydelse: // navheader = rubriker i sidomenyn. //

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

↑ Betydelse: // nav = all övrig text i sidomenyn. //

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

↑ Betydelse: // nav ul = hur texten ska vara placerad i sidomenyn (mellanrum). //

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

↑ Betydelse: // nav li = hur texten ska vara placerad i sidomenyn (mellanrum). //

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

↑ Betydelse: // nav a & nav a:hover = länkarna i sidomenyn. //

/** 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;
}

↑ Betydelse: // entrybody = all text i dina inlägg dvs under rubriken och över ”datum & tid, kommentarer, kategori” etc. //

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

↑ Betydelse: // entrymeta = texten under inläggen dvs datum & tid, kommentarer, kategori etc. //

.entrymeta a { color: #E04201; }
.entrymeta a:hover { color: #80FF9F; }

↑ Betydelse: // entrymeta a & entrymeta a:hover = 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;
}

↑ Betydelse: // commentheader = rubriken på en kommentar (Postat av: Namn). //

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

↑ Betydelse: // commenttext = kommentaren någon har postat hos dig. //

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

↑ Betydelse: // commentmeta = datum & tidpunkt samt möjligtvis en URL till personen som har postat kommentaren. //

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

↑ Betydelse: // commentmeta a & commentmeta a:hover = utseende på länken till personen som har postat kommentaren. //

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

↑ Betydelse: // commentform = där man skriver kommentaren. //

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

↑ Betydelse: // separator = är just en separator. Brukar ligga under varje inlägg som ett streck. Det är inte superpopulärt så 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;
}

↑ Betydelse: // Detta syns när man klicka på ett enskilt inlägg (när man ska kommentera). default sköter texterna ”kommentarer” (som ligger ovanför kommentarerna) & ”trackback” (som ligger nedanför ”skicka kommentar-knappen”.

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

↑ Betydelse: // subside = 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;
}

↑ Betydelse: // image = alla bilder i din blogg. Jag tycker inte om att ha färdiga inställningar på bilder då jag vill välja själv om jag ska ha ram (border) eller annat. Om jag skulle redigera denna stilmall skulle jag ändra så att det såg ut så här:

.image {
border: 0px solid #CCCCCC;
background:;
padding:0px;
margin: 0px;
}

//

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

↑ Betydelse: // thumbnail = de klickbara miniatyrbilderna. Här skulle jag också ta bort allt så att det ser ut så här:

.thumbnail {
border: 0px solid #CCCCCC;
background:;
padding:0px;
margin: 0px;
}

//

.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;
}

#calendar table tr td div.cssDayAvailable {
text-decoration: underline;
text-weight: bold;
}

↑ Betydelse: // Förut var en kalender standard på en blogg/webblogg.se-blogg men det finns inte längre så du kan ta bort allting som heter #calendar //

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

↑ Betydelse: // Denna 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;
}

↑ Betydelse: // profile = standardprofilen som sitter i sidomenyn på förstasidan. //

#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;
}

↑ Betydelse: // profile h4 = rubriken (Om) på standardprofilen som sitter i sidomenyn på förstasidan. //

#profile p{
}