Jag fick en förfrågan om hur man gör boxar i menyn utan bilder.

Så som jag har på jennysmodemix.se

SKAPA BOXAR

1. Lägg till koden som finns här under, under #side i din stilmall.

#box {
width: 175px;
padding: 5px 5px 5px 5px;
background: #FFFFFF;
}

SÅ DET SER UT SÅ HÄR:
#side {
text-align: center;
position: absolute;
float:left;
width: 175px;
}

#box {
width: 175px;
padding: 5px 5px 5px 5px;
background: #FFFFFF;
}






2. Ta bort background i #side.
Den behövs inte därför att du redan har background i boxkoden.

Ta alltså bort background: #FFFFFF;

#side {
text-align: center;
position: absolute;
float:left;
background: #FFFFFF;   <-----TA BORT
width: 175px;
}




Nu ska du börja koda i kodmallen (framsidan)


Du lägger in denna koden under <div id="side"> i kodmallen för att få boxarna vid menyn.



Först så kopierar du det här:

<div id="box">
SKRIV DET INNEHÅLL SOM DU VILL HA
</div>

 

MIN SER UT SÅ HÄR:
<div id="box">
<div>SENASTE INLÄGGEN</div>
   <ul>
       <tag:recentlist limit="10">
      <div align="left">   <li><img src="http://jennysmodemix.se/images/2009/icon_heart_pink__65662424.gif"><a href="${EntryPermaLink}">${EntryTitle}</a></li>
       </tag:recentlist>

   </ul></div><br />

 

Sen ska du ju få mellanrum för att det ska bli som det heter "uppdelad meny" och det gör du med hjälp av koden <br />.

Desto fler <br /> desto större mellanrum.

4. Nu ligger säkert inte allt exakt rätt. Då ändrar du bara i stilmallen.
Du får ändra till din widht du vill ha och hur mycket padding du vill ha.

 

 

BAKGRUNDEN
body {

background: #FFFFFF url(http://DinBildsUrlAdress.com/bild.jpg);

margin:0;

padding:0px 0 14px;

text-align:center;

color:#333;

}



FÄRGEN PÅ DINA LÄNKAR I INLÄGGEN
a {color: #000000;text-decoration:bold;}

a:hover {color: #fffffff;text-decoration:bold;}


#000000 står för färgen svart.
Vill du ha en annan färg, byter du bara ut #000000 mot en annan färgkod.
Koder kan du hitta HÄR.



BLOGGARKET, DET VITA SOM HEADER, INLÄGG, MENY LIGGER PÅ
#wrapper {

text-align: left;

width: 830px;     <---------Här kan du ändra vilken bredd arket ska ha.

margin: 50px auto;

padding: 30px;

vertical-align: top;

border: 5px dotted #D9CCD0;    <------Ramen runt arket.

background-color: #FFFFFF;    <---------Färgen på arket.

}

Här är olika ramstilar
solid
dashed
dotted
double
groove
ridge
inset
outset

Om du inte vill ha någon ram runt arket så ändrar du bara så att border-färgen är samma som på bakgrund-color.


HEADER
#header {

background: #FFFFFF url(http://DinBildsUrlAdress.com/bild.jpg) no-repeat right center;

padding-left: 30px;

padding-bottom:15px;

padding-top:30px;

margin: 0px 0px 20px;

width: 700px;    <------------Ändra width till 800px; om din header är 800 pixlar bred.

height: 200px;        <-----------Ändra heigh till 400px; om din heder är 400 pixlar hög


SIDOMENYN
#side {

margin-right:0;

padding: 24px 12px 0px;

background: #ffffff; (Färg på bakgrunden i sidokolumnen)

width: 150px; (Bredden på sidokolumnen.)

margin-left: 620px;

}


INLÄGGSRUBRIKER
/** Entry headers **/

h3 {

font-family: papyrus;        <------------Anger vilket typsnitt du vill ha på rubriken.

font-size: 20px;       <---------------Anger vilken storlek det är på rubrikerna

font-weight: medium;

color: #000;

background:#ffffff;        <--------------Om du vill ha en särskild bakgrundsfärg till rubrikerna så

padding:14px 10px 10px 15px;       <------------ändrar du färgkoden.

margin: 0px 0px 10px;

height: 14px;

vertical-align: top;

text-align: left;           <---------om du ändrar left till right så högerjusterar du rubriken.

}


RUBRIKERNA I SIDOMENYN (Kategorier,länkar, osv)
.navheader {

font-family: arial;    <---------Typnitt på rubrikerna

font-size: 15px;      <------------Storlek på rubrikerna

font-weight: bold;        <---------kursiv, fetstil,

color: #000000;  <---------Färg på rubrikerna

margin-bottom: 3px;

}


LÄNKARNA I SIDOMENYN
.nav a {

color: #000000;    <--------------Normal färg på länken

text-decoration:none;

font-family:verdana; <-------------- Typsnitt på länkarna

font-size: 12px;

}

.nav a:hover { color: #999999;text-decoration:bold;}  <--------Färg på länken när du håller pilen där.



INLÄGGSTEXTEN
/** Post's body text **/

.entrybody {

font-family: "Times New Roman", Times, serif;       <-----------Typnitt på texten

font-size: 12px;      <------------Storlek på texten

font-weight: normal;

color: #000000;        <-------------Färg på texten

line-height: 130%;

text-align:justify;

padding:20px;

margin: 10px 0px 0px 0px;

}


Datum då inlägget postades:

/** 'Posted by' txt **/

.entrymeta {

font-family: century gothic; Typsnitt

font-size: 10px; Storlek

font-weight: normal;

color: #000000; Färg

padding:20px;

text-align:right;

}


FÄRG PÅ LÄNKARNA BREDVID DATUMET PÅ INLÄGGET (permalink, kommentarer osv.)

.entrymeta a { color: #ffffff; text-decoration:bold;}

.entrymeta a:hover { color: #fff;text-decoration:bold; }



TA BORT STRECK MELLAN INLÄGGEN
.separator {

border-top: 2px solid #000000;        <--------------byt till samma färgkod som färgen på ditt ark.

border-bottom: 0px solid #000000;

margin: 14px 0px 14px 0px

Gå in i dina kodmallar:

Leta upp koden som ser ut så här:

<div class= "nav">


Det är nedanför denna kod som du ska skapa din meny nu.



Lägg in följande kod:

<div>Din rubrik</div><br />



Byt ut Din rubrik mot namnet på den rubriken du vill använda.
Om du vill ha längre avstånd neråt, så lägger du till <br />



Klicka på den kategori du vill länka till, kopiera adressen.




Lägg in länkarna där du vill ha dom i din meny, genom att kopiera följande kod:

<a href="länkadressen">Den klickbara länken</a>



♥ Där det står Länkadressen, lägger du in adressen som du kopierade.
♥ Där det står Den klickbara länken, där ska du ha själv länken som man ska klicka på.



Om du skulle vilja ha en bild framför din länkadress/kategori, så skriver du så här istället:

<img src="Adressen till din bild"> <a href="länkadressen">Den klickbara länken</a>

TA BORT UPPREPNING  AV BAKGRUNDEN


För att bakgrundsbilden inte ska upprepa sig 

Gå in i stilmallen och klistra in:

no-repeat;

Exempel:
background: #FFFFFF url(bildadress) no-repeat;

FIXERA BAKGRUNDEN


För att fixera bakgrunden så att den ligger stilla när man scrollar nedåt.

Då skriver man in följande kod i stilmallen:

background-attachment: fixed;

Exempel:
body {
margin: 0px;
padding:0px;
background: #373737 url(bildadressen);
background-attachment: fixed;
}

Hur man lägger in bakgrund

1. Skapa först en egen eller ta en du hittar på nätet.

Backgroundlabs

Bigoo

Patterncoller

2. Klicka på skapa, bild och ladda upp bilden, kolla hur stor bilden är
tex: 1000x800 då ska du ändra bredd till 1000 när du laddar upp bilden.

3. När du laddat upp bilden klicka på den och kopiera länken högst upp.

4. Gå in på stilmallen bläddra ner till

body {
  background:url(Länken till bilden här);  <-----Lägg in länken här

Ändra färg på bakgrunden

Klicka på stilmallen och bläddra ner till:

body {
  background:#ffffff; <----ändra färgen här

 

Vet du inte vilken färg du vill ha?

Klicka då på färgkartan [HÄR] eller [HÄR]

Flytta upp datum

GÖR SÅ HÄR:


1. Gå in i kodmallen och bläddra ner till content, leta upp koden som ser ut så här:

<h3>${EntryTitle}</h3>
<div>${EntryBody}</div>
<div>
${EntryDate} @ ${EntryTime}

2. Ta bort koden som ser ut så här:

${EntryDate} @ ${EntryTime}

3. Kopiera denna koden:

<div align="left"><font face="verdana" size="1" color="pink"> ${EntryDate} @ ${EntryTime}</font></div>

4. Klistra in koden  under <h3>${EntryTitle}</h3>

Vill du ändra sida skriver du: 
vänster=left

höger=right

mitten=center

Typsnitt ändrar du på:
font face="verdana"

Storlek på:
size="1"

Färg på texten:
color="#E0E0E0" 

Färgkarta:
Bloggdesign
December
Canit
InternetGrafik