Bygg ditt eget tema – steg-för-steg-guide

<body>-sektionen

Allt som skrivs i <body> är det som syns utåt. <body> är så att säga kroppen på hemsidan eller bloggen. I vår layout så ska vi leta oss ned till <header> för att infoga våra koder. Eftersom layouten är uppbyggd med olika div-block är det viktigt att veta hur dessa fungerar.

Strukturen i body börjar här…

<body>
<div id="pagewidth">
<div id="masthead">
<div id="header"><p>header</p></div>
</div>

…och betyder följande…

<div id="pagewidth" > är “huvudblocket” som håller ihop hela layouten. Blocket har ett unikt IDpagewidth.

I blocket <div id="masthead"> är <div id="header"> placerad. Här ska vi stanna till för att infoga våra koder som ska ligga i header:

<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>

När det är gjort så stänger vi blocket <header> med följande kod </div>. Därefter måste vi också stänga själva blocket<masthead> med ytterligare en </div>

Du ska nu kopiera in koderna härunder i front.htm, entry.htm, arkiv.htm och kategori.htm så det blir så här:

<div id="pagewidth">
<div id="masthead">
<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>
</div>

Var observant på att du verkligen stänger alla taggar annars kommer du får en obehaglig överraskning när du går in på sidan.

<div id="topbar"><p>navigering</p></div> väntar vi med så länge.

<div id="maincol"> där entrybody ska infogas

Den här layouten är användarvänlig och även gjord för att vara utskriftsvänlig. Av den anledningen så är strukturen uppbyggt lite annorlunda än vad du kanske är van vid, men det är inte speciellt konstigt utan egentligen väldigt logiskt. Layouten är ju uppdelad i tre delar, ett block i mitten och två sidoblock. Alla dessa tre block hålls samman med koden <div id="wrapper" class="clearfix" > – det grå på bilden. Man kan säga att wrapper är bloggens huvudblock. Men som du ser så finns ytterligare ett block i wrapper, nämligen <div id="twocols" class="clearfix"> (det blå) – det blocket omsluter bara maincol och rightcol. Det vänstra blocket leftcol ligger utanför. Se skiss:

layoutskiss

Summa kardemumma så innebär det att vi har ett stort block som innehåller två block – det ena är större än det andra. Blocket som är större innehåller i sin tur två block – maincol och rightcol. Det är i maincol som vi ska placera entrybody. Se skiss:

layoutskiss2

Anledningen till att layouten är byggd på detta vis är att när- eller om man vill skriva ut text och innehåll på sidan så är inte sidoblocken intressanta eftersom innehållet finns i maincol. Vid en utskrift så reglerar layouten sin utformning så att mittenkolumnen maincol blir lika stor som alla tre blocken tillsammans. Smart va!

Infoga entrybody

Vi håller fortfarande på att skriva i front.htm så se till att det är det dokumentet du har öppet. Radera alla koder i <div id="maincol"> så du bara har detta kvar:

<div id="maincol" >
</div>

Därefter kopierar du in nedanstående koder mellan <div id="maincol" > och </div>

<tag:entrylist limit="15">
<a name="a${EntryNum}"></a>
<h3>${EntryTitle}</h3>
<div class="entrybody">${EntryBody}</div>
<div class="entrymeta">
${EntryDate} @ ${EntryTime}
<a href="${EntryPermaLink}">Permalink</a>
<a href="${EntryCategoryLink}">${EntryCategoryName}</a>
<a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
<a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
<br /><br />
tag:taglist title="Nyckelord: ">
<a href="${TagURL}" rel="tag">${TagName}</a>
</tag:taglist>
</div>
<hr class="separator" />
</tag:entrylist>

Alla koder så här långt…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${BlogTitle} - ${BlogDescription}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="generator" content="${AppUrl}" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
</head>
<body>
<div id="pagewidth">
<div id="masthead">
<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>
</div>
<div id="topbar"><p>navigering</p></div>
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="maincol" >
<tag:entrylist limit="15">
<a name="a${EntryNum}"></a>
<h3>${EntryTitle}</h3>
<div class="entrybody">${EntryBody}</div>
<div class="entrymeta">
${EntryDate} @ ${EntryTime}
<a href="${EntryPermaLink}">Permalink</a>
<a href="${EntryCategoryLink}">${EntryCategoryName}</a>
<a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
<a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
<br /><br />
tag:taglist title="Nyckelord: ">
<a href="${TagURL}" rel="tag">${TagName}</a>
</tag:taglist>
</div>
<hr class="separator" />
</tag:entrylist>
</div>

arkiv.htm och kategori.htm

Öppna upp båda dokumenten. Börja med att kopiera in de nya koderna – precis som vi nyss gjorde i front.htm. Front.htm, arkiv.htm och kategori.htm ska alltså ha identiskt lika koder fram till <div id="rightcol" >. När du är klar med det ska du i arkiv.htm och kategori.htm leta dig fram till denna kod <tag:entrylist limit="15">. Ändra från 15 till 300!

I nästa steg i guiden ska vi infoga entrybody i entry.htm. Välkommen dit!

Liknande poster:

2 Comments Add yours

  1. Sanna says:

    Hej, klistrat in stilmallen och gjort en egen “design” på photoshop av din “exempelmall”. men hur får jag in den som bakgrund och tema?

    1. Lena says:

      Hej och ursäkta för sent svar.
      Du öppnar stilmallen och letar dig fram till deklarationen html/body – i denna lägger du in den bild som ska vara bakgrundsbilden. Kanske att du får trixa med inställningarna beroende på hur din bild ser ut och ska visas.

Leave a Reply

Your email address will not be published. Required fields are marked *