Templates

WebGUI Seiten bestehen aus einem Seiten-Objekt, das weiter genutzte Objekte enthält. Jedes Objekt hat eine eigene Vorlage.

Eine Seite mit nur einem Artikel enthält somit:

  1. Layout der Seite
  2. Layout des Content-Bereichs (z.B. Spalten)
  3. Layout des Artikels

Die Vorlagen werden mit HTML-Template erstellt, mit WebGUI mitgeliefert und können nach Bedarf geändert werden.

Auf dieser Seite sind ein paar Vorlagen beispielhaft dargestellt.

 

Seitenvorlage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Templates - <tmpl_var session.setting.companyName></title>
<link rel="icon" href="ˆExtras(favicon.png);" type="image/png" />
<link rel="shortcut icon" href="ˆExtras(favicon.ico);" />
<tmpl_var head.tags>
</head>
<body>

ˆAdminBar("");

<div style="text-align:center;"><a href="ˆPageUrl;"><img src="ˆExtras(xxx.gif);" style="border-style:none;" alt="xxx" /></a></div>

<div>
    <tmpl_var body.content>
</div>

<div style="text-align:center;">INNOVATE</div>

</body>
</html>

Artikel Template

<div class="articleContent">

<tmpl_if description>
    <div class="description">
        <tmpl_var description>
    <!--/description-->
    </div>
</tmpl_if>

<tmpl_if linkUrl>
    <tmpl_if linkTitle>
        <div class="articleLink">
            <p><a href="<tmpl_var linkUrl>"><tmpl_var linkTitle></a></p>
        <!--/articlelink-->
        </div>
    </tmpl_if>
</tmpl_if>

<!--/articlecontent-->
</div>

<tmpl_if attachment_loop>
    <div class="attachments">
    <ul>
    <tmpl_loop attachment_loop>
        <li>
        <img src="<tmpl_var iconUrl>" alt="<tmpl_var filename>" class="wg-icon" />
        <a href="<tmpl_var url>"><tmpl_var filename></a>
        </li>
    </tmpl_loop>
    </ul>
    <!--/attachments-->
    </div>
</tmpl_if>

<div class="wg-clear"></div>

<!--/article<tmpl_var assetIdHex> /article default-->
</div>

Seiten-Layout Vorlage

Beispiel Seiten-Layout mit einem Übersichtsblock und danach zwei Spalten.

Im Administrationsmodus werden einzelne Objekte in einer Tabelle dargestellt und können neu platziert werden.

 

<div id="layout<tmpl_var assetIdHex>" class="layout oneovertwo">

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

<tmpl_if session.var.adminOn>
<tmpl_var controls>
</tmpl_if>

<tmpl_if displayTitle>
<h2>
<tmpl_var title>
</h2>
</tmpl_if>

<tmpl_if description>
<div class="description">
<tmpl_var description>
<!--/description-->
</div>
</tmpl_if>
<div id="gelbbereich" style="background-color:#ffff8f;border: 1px solid: #333366; padding: 10px;">
<!-- begin position 1 -->
<div class="wg-content-position wg-top">

<tmpl_if session.var.adminOn>
<table border="0" id="position1" class="content">
<tbody>
</tmpl_if>

<tmpl_loop position1_loop>
<tmpl_if session.var.adminOn>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable<tmpl_if isUncommitted> uncommitted-asset</tmpl_if>">
</tmpl_if>

<tmpl_var dragger.icon>
<tmpl_var content>

<tmpl_if session.var.adminOn>
</div>
</td>
</tr>
</tmpl_if>
</tmpl_loop>

<tmpl_if session.var.adminOn>
</tbody>
</table>
</tmpl_if>

<!-- end position 1 -->
</div>

<!-- begin position 2 -->
<div class="wg-content-position wg-left" >

<tmpl_if session.var.adminOn>
<table border="0" id="position2" class="content">
<tbody>
</tmpl_if>

<tmpl_loop position2_loop>
<tmpl_if session.var.adminOn>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable<tmpl_if isUncommitted> uncommitted-asset</tmpl_if>">
</tmpl_if>
</tmpl_if>

<tmpl_var dragger.icon>
<tmpl_var content>

<tmpl_if session.var.adminOn>
</div>
</td>
</tr>
</tmpl_if>
</tmpl_loop>

<tmpl_if session.var.adminOn>
</tbody>
</table>
</tmpl_if>

<!-- end position 2 -->
</div>

<!-- begin position 3 -->
<div class="wg-content-position wg-right">

<tmpl_if session.var.adminOn>
<table border="0" id="position3" class="content">
<tbody>
</tmpl_if>

<tmpl_loop position3_loop>
<tmpl_if session.var.adminOn>
<tr id="td<tmpl_var id>">
<td>
<div id="td<tmpl_var id>_div" class="dragable<tmpl_if isUncommitted> uncommitted-asset</tmpl_if>">
</tmpl_if>

<tmpl_var dragger.icon>
<tmpl_var content>

<tmpl_if session.var.adminOn>
</div>
</td>
</tr>
</tmpl_if>
</tmpl_loop>

<tmpl_if session.var.adminOn>
</tbody>
</table>
</tmpl_if>
 <!-- end position 3 -->
</div>

<div class="wg-clear"></div>
</div>
<tmpl_if session.var.adminOn>
<table>
<tr id="blank" class="hidden">
<td>
<div class="empty">&nbsp;</div>
</td>
</tr>
</table>
<tmpl_var dragger.init>
</tmpl_if>

<!--/id="layout<tmpl_var assetIdHex>" class="layout oneovertwo-->
</div>
                  
 

©2012 WebGUI Professional. All Rights Reserved.