Designtips - Boxar med runda hörn
1: Gå in i din stilmall. Leta upp stycket #side. Där ska du:
#side {
text-align: left;
float: left;
width: 205px;
margin: 0px 0px 0px 0px;
padding: 0px;
margin-top: 0px;
}
#side {
background: #fff; ← Ta bort bakgrunden (ta bort hela den radan)
text-align: left;
float: left;
width: 205px; ← Här kan ni bestämma bredden på menyn
margin: 0px 0px 0px 0px; ← Nollställ margin
padding: 0px; ← Nollställ padding
}
2: Scrolla sedan ner till .nav ul. Där ska du:
obs! lägg inte till koderna om de redan finns.
.nav ul {
text-align: left; ← Om du vill ha texten åt vänster (left), höger (right) eller centrerat (center)
margin: 0px 0px 10px; ← Hur mkt mellanrum det ska vara mellan boxarna
padding: 6px; ← Hur mkt padding (mellanrum) det ska vara mellan innehållet och ytterkanten i boxen
font-weight: normal; ← Tjocklek på texten (normal, medium eller bold)
background: #fff; ← Bakgrundsfärgen i boxarna
}
3: För att sedan få runda hörn lägger du till:
-moz-border-radius: 15px;
border-radius: 15px;
Du kan även lägga till: border: 1px solid #DIN FÄRG; om du vill ha en färgad kant runt.
Så här kan det se ut:
.nav ul {
text-align:left;
margin: 0px 0px 10px;
padding: 6px;
font-weight: normal;
background: #dfdfdf;
border: 1px solid #c70315;
-moz-border-radius: 15px;
border-radius: 15px;
}
Spara!
4: Nu ska vi in i kodmallen. Om du kollar på din blogg nu så är rubrikerna i menyn utanför boxarna. Det ska vi fixa nu. Leta upp alla kategorier (senaste inläggen, kategorier, arkiv osv.). Jag använder Senaste inlägget för att visa hur man gör:
<div>Senaste inäggen</div>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">» ${EntryTitle}</a></li>
</tag:recentlist>
</ul>
Klipp ut den markerade texten <ul> och klistra in den ovanför <div class="navheader">Senaste inäggen</div>. Så här ska det se ut:
<ul>
<div>Det senaste</div>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">» ${EntryTitle}</a></li>
</tag:recentlist>
</ul>
Gör nu samma sak på övriga kategorier. Och glöm inte göra det i ALLA kodmallar.
Spara!
Om ni har gjort rätt och om jag har förklarat rätt så borde eran meny vara delad i boxar med rundade hörn nu. Säg gärna till om något blivit fel, inte funkar eller om jag missat nåt.

