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

Kontrollera att alla kodmallar är öppna i din texteditor, det vill säga front, arkiv, kategori och entry page. Leta dig sedan fram till koden i den högra kolumnen som börjar med <div id="rightcol" >. Profilen har jag valt att enbart visas i kodmallen front. Koderna har placerats i ett eget block. Vill du ha din profil på samtliga sidor så kopierar du bara in koderna i alla kodmallar. Omedelbart efter <div id="rightcol"> placerar du in följande koder:

<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4>Det här är jag</h4>
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
<br />
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a>
</tag:if>
</tag:profile>
</div>

Under profilen så har jag även valt att lägga in en oordnad lista som jag har stylat med en bild och ett textavsnitt ifall du vill ha fler länkar och/eller skriva lite mer eller lägga in annat som du känner för.

<ul>
<li><a href="nogo" title="">Länk</a></li>
<li><a href="nogo" title="">Länk</a></li>
<li><a href="nogo" title="">Länk</a></li>
<li><a href="nogo" title="">Länk</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.</p>

Här måste vi också se till att blocket rightcol och blocket twocols som omsluter maincol samt rightcol avslutas.
layoutskiss

Kontrollera därför att följande två koder finns kvar på slutet:

</div>
</div>

Alla koder till rightcol för samtliga kodmallar

Mellan <div id="rightcol"> och </div> </div> kopierar du alltså in följande koder:

<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4>Det här är jag</h4>
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
<br />
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a>
</tag:if>
</tag:profile>
</div>
<ul>
<li><a href="nogo" title="">Länk</a></li>
<li><a href="nogo" title="">Länk</a></li>
<li><a href="nogo" title="">Länk</a></li>
<li><a href="nogo" title="">Länk</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.</p>

Koderna i leftcol

Precis som i guiden för den högra kolumnen rightcol kan du kopiera in koderna för den vänstra kolumnen i alla kodmallar. Vi ska dock gå igenom hur blocket är uppbyggt så du inte råkar ut för några otrevliga överraskningar om något blir fel. <div id="leftcol" > öppnar upp den vänstra kolumnen och överst i denna ska vi lägga in sökformuläret. Börja med att radera alla koder som finns mellan dessa:

<div id="leftcol">
radera allt här emellan
</div>
</div>

Placera därför in följande kod omedelbart efter <div id="leftcol">

<form action="${AppUrl}index.bd?fa=search.do" id="searchform" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<label class="hidden" for="s"></label>
<div>
<input type="text" name="s" id="s" value="" size="12" maxlength="64" />
<input type="submit" id="searchsubmit" value="sök" />
</div>
</form>

Nu har vi infogat sökformuläret men vi vill ju också ha vår navigation till våra senaste poster, arkiv, kategorier och länkar. Lägg därför in dessa koder under sökformuläret.

<div class="navheader">Senaste inläggen</div>
<ul>
<tag :recentlist limit="20">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag>
</ul>
<div class="navheader">Kategorier</div>
<ul>
<tag :categorylist>
<li><a href="${CategoryLink}">${CategoryName}</a></li>
</tag>
</ul>
<div class="navheader">Arkiv</div>
<ul>
<tag :archivelist>
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag>
</ul>
<tag :if test="${hasLinks == 'true'}">
<div class="navheader">Länkar</div>
<ul>
<tag:linklist>
<li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
</tag:linklist>
</ul>
</tag:if>

Samtliga koder i leftcol till alla kodmallar

Mellan <div id="leftcol"> och </div> </div> kopierar du alltså in följande koder i alla kodmallar:

<form action="${AppUrl}index.bd?fa=search.do" id="searchform" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<label class="hidden" for="s"></label>
<div>
<input type="text" name="s" id="s" value="" size="12" maxlength="64" />
<input type="submit" id="searchsubmit" value="sök" />
</div>
</form>
<div class="navheader">Senaste inläggen</div>
<ul>
<tag :recentlist limit="20">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag>
</ul>
<div class="navheader">Kategorier</div>
<ul>
<tag :categorylist>
<li><a href="${CategoryLink}">${CategoryName}</a></li>
</tag>
</ul>
<div class="navheader">Arkiv</div>
<ul>
<tag :archivelist>
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag>
</ul>
<tag :if test="${hasLinks == 'true'}">
<div class="navheader">Länkar</div>
<ul>
<tag:linklist>
<li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
</tag:linklist>
</ul>
</tag:if>

I nästa steg kikar vi på <div id="footer"> och <div id="topbar">. 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 *