Mellomrom mellom header og innhold

Har du lyst på mellomrom mellom header og innhold? Da går du inn på “design”, “rediger” også “stilsett”. Det skal ca. se ut som dette:

#header {
background-color: #FFFFFF;
background-image: url(”HER ER URL’EN TIL DIN HEADER);
height: 480px;
background-repeat: repeat;
margin: 0px 0px 10px 0px;                         << HER!

Sett inn denne koden margin: 0px 0px 10px 0px; slik som jeg har gjort over. Vil du ha større eller mindre mellomrom, bare endrer du der det står 10px, til f.eks 5px eller 20px.

Menyen fra høyre til venstre

Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;

Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut sånn ca:

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Forhåndsvis først, så ser du om du har gjort det riktig. Husk å lagre!

Ramme rundt bloggen

Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:

border: 2px solid #000000;

Hvor legger jeg den inn?
Du legger den inn under #wrapper og #footer. Ca. sånn her skal det se ut:
(Du kan også legge koden inn under #header, hvis du vil ha en ramme rundt headeren også).

#wrapper {
background-color: #FFFFFF;
border: 2px solid #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px solid #000000;
 
Istedet for solid, som betyr helstrukken linje rundt bloggen, kan du putte inn disse:
dotted
dashed
solid
double
groove
ridge
inset
outset

border-bottom = ramme eller strek kun på bunnen

bordet-top = ramme eller strek kun på toppen

border-left / border-right = ramme eller strek kun til venstre eller høyre

For å få tykkere ramme, så kan du bare endre ved å skrive 3px og hvis rammen skal være mindre, så skriver du bare 1px. Farger endrer du også fra #000000; (svart) til en annen type farge.

Smal og midtstille bloggen

Smal blogg

Koden:
width: 610px;

Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.

Slik skal det se ut da:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: left;
margin-right: left;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: left;
margin-right: left;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: left;
margin-right: left;
width: 700px;
}

Nå er det bare å endre tallet til hva du måtte ønske. 600px eller kanskje 800px. Du bestemmer.


Midtstille bloggen

Koden du skal bruke:
margin-left: auto;
margin-right: auto;

Hvor legger jeg den inn?
Den skal du legge inn under #header, #wrapper og #footer.

Slik skal det se ut:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;

}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;

}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;

Endre bakgrunn for overskrifter

Hvor legger jeg den inn?
Denne koden skal du lime inn nederst i stilsettet ditt.

h2 {
cursor:default;
background-color: #000000; <- Her endrer du bakgrunnsfarge..
color: #16CC16;
font-size:9pt;
font-family:tahoma;
letter-spacing:1px;
line-height:13pt;
text-align: center;
padding: 1px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #16CC16;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;

Hvor mange leser bloggen din akkurat nå?

Hvor legger jeg den inn?
Endre profil – > Beskrivelse
I ruten for beskrivelse skal du lime inn koden, og du må huske på å legge inn linken til bloggen din.

Så limer du inn dette:
<!– Start FastOnlineUsers.com –> <a href=”http://www.fastonlineusers.com”> <script type=”text/javascript” src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!! mce_src=http://fastonlineusers.com/on4.php?d=LINK TIL DIN BLOGG HER!!!></script> </a> leser denne bloggen NÅ</a> <!– End FastOnlineUsers.com –></div>

Jeg har den koden på høyre side av bloggen. Det går også ann å legge inn koden på Widgets.
Gå inn på Design – Rediger – Widgets.

Hvordan få headeren (bilde) på plass der oppe

Koden du skal bruke er:

#header {
background-image: url(http://www.settinnlenkeher.jpg);
background-repeat: no-repeat;
height: 100px;
width: 800px;
}

Hvor skal jeg legge den inn?
Design -> Rediger
Du limer bare inn koden i stilsettet ditt.

Større profilbilde

Koden du skal bruke er:
<img src=”PICTURE URL” height=”100″>

Forklaring:
Picture url skjønner du sikkert. Der du skal legge inn linken til bildet ditt.
100, der kan du sette inn et tall, og det bestemmer hvor stort bildet ditt blir.

Slik gjør du det:
Design -> Rediger -> Maler.
Her skal du finne

<img src=”${ProfileImageUrl}” alt=”${ProfileName}” />.

Så kan du for eksempel søke (CTRL + F) på ‘profilename’. Du skal deretter bytte ut
(<img src=”${ProfileImageUrl}” alt=”${ProfileName}” />) med koden; <img src=”PICTURE URL” height=”100″>.
For å legge inn linken til bildet, så må du laste opp bildet ditt på www.tinypic.com, under “Direct Link for Layouts” henter du linken som du skal legge inn i koden. Og du kan endre størrelsen for bildet ditt også hvis du vil.
Nå trykker du på Lagre Malen og da skal bildet ditt være større.

Mindre/større skrift på innleggene dine

Koden du skal bruke:
font-size: 10pt;

Hvor skal jeg legge den inn?
Den skal du legge inn under wrapper.

Slik for eks. skal det se ut;
#wrapper{
background-color: #FFFFFF;
font-size: 10pt;
}

Det eneste du trenger å gjøre nå er å endre tall, vil du ha større skrift skriver du for eksempel 12, eller kanskje du vil ha mindre skrift, så skriver du 8…