1. Laten we er vanuit gaan dat de index file er als volgt uitziet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesla</title>
<link href="tesla/css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div class=”menu”>
<ul>
<li class=”active”>
<a href=”/”>Home</a>
</li>
<li class=”active”>
<a href=”/over_ons.html”>Over ons</a>
</li>
</ul>
</div>
<div class=”content”>
<h1>Welkom</h1>
<p>
Hello World.
</p>
</div>
</div>
</div>
</body>
</html>
2. Ga naar main.tpl deze is te vinden in de map public/templates/{klant naam}
3. Plaats hier je algemene html in (zoals bijvoorbeeld de code hierboven). Pas eventueel het voorbeeld aan. De volgende tags zijn van belang:
a. “{$_lang} “ De taal waarin de website wordt bekeken.
b. “{$title}” De title van de paginac. “{$keywords}” De meta keywords
d. “{$descriptoin}” De meta omschrijving
e. “{$_theme}” De naam van de gekozen theme
f. “{$content}” De inhoud van de pagina. Dit kan een formulier zijn of verschillende pagina inhoud.
4. Sla main.tpl op deze zal er als volgt uitzien
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{$title}</title>
<link href="/themes/{$_theme}/css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div class=”menu”>
<ul>
<li class=”active”>
<a href=”/”>Home</a>
</li>
<li class=”active”>
<a href=”/over_ons.html”>Over ons</a>
</li>
</ul>
</div>
<div class=”content”>
<h1>Welkom</h1>
<p>
Hello World.
</p>
</div>
</div>
</div>
</body>
</html>
5. Onze eerste pagina is nu te bekijken bekijk het resultaat op www.jouwdomein.nl
6. We zien dat de layout nog niet opgemaakt is laten we dus de css files en images toevoegen
7. De css file plaatsen we onder de map public/themes/{klant naam}/css
8. We noemen onze css file layout.css
9. De images die we gebruiken in onze css plaatsen we in de map public/themes/{klant naam}/images
10. Zorg er wel voor dat de link naar de images in de css er als volgt uitziet ../image.png
11. Onze website heeft nu ook een theme
Gefeliciteerd!!!!! Je hebt een website.