Der Template Aufbau

Das dot.orange besitzt eine einfache Template Engine. In den Templates können Sie sogenannte Marker einsetzen, die später mit Inhalt ausgetauscht werden. Die Marker haben folgendes aussehen:

###MARKER###

Jeder Marker beginnt mit drei Rauten, dann dem Text in der Mitte und abschließend wieder mit drei Rauten. Grundsätzlich können Sie den Text in der Mitte Groß oder Klein schreiben. Das bleibt Ihnen überlassen. Wichtig ist das der Text in der Mitte aus einem Wort besteht und falls Sie mehrere Wörter benutzen möchten, dann trennen Sie die Wörter bitte entweder mit einem Bindestrich - oder einem Unterstrich _ . Bitte keine Leerzeichen oder Sonderzeichen verwenden.

Richtig: ###HAUPT-MENU###
Falsch: ###HAUPT MENU###

Es gibt drei Marker die im System reserviert sind und zwar die Content Marker, die die für die Ausgabe der Inhalte verantwortlich sind.

  • ### CONTENT_LEFT###
    Das ist der Marker für die linke Inhaltspalte.
  • ###CONTENT###
    Das ist der Marker für die mittlere Inhaltsspalte.
  • ### CONTENT _RIGHT###
    Das ist der Marker für die rechte Inhaltsspalte.
In der Erstinstallation sind drei Inhaltsspalten angelegt, die man aber bis unendlich viele Spalten erweitern kann. Auch die Content Marker können verändert werden, sodass Sie Ihre eigene Bezeichnung und Logik verwenden können. Wie das geht erfahren Sie hier.

Hier ein einfaches Template Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="description" content="Your description">
  <meta name="keywords" content="Your keywords">
  <meta name="author" content="Your name">
 
</head>

<body>
<div class="linke-spalte">###CONTENT_LEFT###</div>
<div class="mittlere-spalte">###CONTENT###</div>
<div class="rechte-spalte">###CONTENT_RIGHT###</div>
</body>
</html>


Neben den Content-Marker gibt es noch die Menü-Marker und die Element-Marker. Für beide sind keine  Marker reserviert. Das heißt Sie können die Marker selber bezeichnen.

Hier ein Template Beispiel mit allen Markern:
<!DOCTYPE html>
<html lang="###LANG###">
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="description" content="Your description">
  <meta name="keywords" content="Your keywords">
  <meta name="author" content="Your name">
 
</head>

<body>
###ADLEADER###
<div class="body-container container">

<div id="skyscraper">
###WEBTIPP_SKY1###
###ADSKY###
###ADSKY2###
</div>

<div class="header-container">
<div class="stj-logo"><a href="/"><img src="/fileadmin/img/empty.gif" border="0" style="width:400px; height:100px" alt="Stockjaeger.de-Logo" /></a></div>
<div class="loginbox">###MEMBER_BOX###</div>
</div>
<div class="clearfix"></div>

<div class="navi-container">
 ###MENU###
</div>
<div class="clearfix"></div>

<div class="adtop">###ADTOP###</div>
<div class="clearfix"></div>

<div class="container-fluid">
<div class="row-fluid">
  <div class="span8">###CONTENT_LEFT###</div>
  <div class="span4">###CONTENT###</div>
</div>
<div class="row-fluid">
  <div class="span12" style="height:220px;"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="footer">
   <div class="foot-container">
      <div class="footer-menu">###MENU_UNTEN### ###FOOTER###<div style="clear:both;"></div></div>
   </div>
</div>
<div style="clear:both;"></div>
<br style="clear:both;" />
###ADLAYER###
</div>

###POPUNDER###

<script src="/fileadmin/scripts/bootstrap/bootstrap.min.js"></script>
</body>
</html>