How to create new Templates

From MemHT Wiki

Graphics

As first we need to create all graphic elements that will be used in the template. I suggest you to draw the entire template with programs like Photoshop or Fireworks, exactly as you want the site to be: sample text included.

PSD source file: Download

Slices

Now we have to cut the image into slices (small pieces), to be used in the template structure. Every template is different, there are no standards, but in all cases, i suggest you to use small and repeated images to build backgrounds, reducing the template filesize.

These are the extracted slices:

HTML Structure

The advantage of the new template engine (MemHT Portal 3.6.5 and later) is in the possibility to use pure HTML files to build the site structure (No PHP knowledge is needed).

The main template files (used by the template engine) are:

home.html This file contains the basic site structure. In it we have to show the header, footer; to decide where to place blocks, messages, news, blog posts, page content and so on...

news.html This file contains the structure of news

blog.html This file contains the structure of blog posts

The easiest way to start is using tables (you could use a tableless css layout):

<table width="800" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td colspan="3">Header</td>
    </tr>
    <tr>
        <td>Navigator blocks</td>
        <td>Main content</td>
        <td>Extra blocks</td>
    </tr>
    <tr>
        <td colspan="3">Footer</td>
    </tr>
</table>

This is the result:

Styling

At this point you can customize the template structure, using css (recommended) or standard HTML tags: Site dimensions, colors, backgrounds, images and so on

The MemHT Portal engine includes automatically two css style files (if they exist):

• templates/templatename/style.css

Default + Customized css style (Use this file to declare your css rules)

• templates/templatename/forum.css

Default forum css style (All rules in this file are used by the forum engine and the class names should not be changed)

First steps with styling:

Template engine elements

Here we will see examples, that show how to use the most important elements of the template structure:

Blocks

Navigator (To be shown when {$fullscreen} is < 2):

{loop name="tpl_blocks_navigator"}
    {if condition="$value.usetitle > 0"}
        <div><b>{$value.title}</b></div>
    {/if}
    <div>{$value.content}</div>
{/loop}

Extra (To be shown when {$fullscreen} is < 1):

{loop name="tpl_blocks_extra"}
    {if condition="$value.usetitle > 0"}
        <div><b>{$value.title}</b></div>
    {/if}
    <div>{$value.content}</div>
{/loop}

Central:

{loop name="tpl_blocks_central"}
    {if condition="$value.usetitle > 0"}
        <div><b>{$value.title}</b></div>
    {/if}
    <div>{$value.content}</div>
{/loop}

To permit to blocks to be hided, according to the "Full / Half / Standard screen" setting in pages, we can use {$fullscreen}:

Example of extra blocks (Show only when {$fullscreen} < 1):

{if condition="$fullscreen < 1"}
    {loop name="tpl_blocks_extra"}
        {if condition="$value.usetitle > 0"}
            <div><b>{$value.title}</b></div>
        {/if}
        <div>{$value.content}</div>
    {/loop}
{/if}

Highlighted blocks

Starting from the 3.8.5 version, MemHT Portal supports sticky blocks, with different (highlighted) styles.

Highlighted modes (in templates) are indicated with the {$value.flag} variable:

flag = 0; Standard style block (default)

flag = 1; Highlighted mode style

flag = 2; Highlighted mode style 2

You can set higher flag numbers for templates that support more block highlight styles.
Example: 3,4,5,6...

Note: Obviously old templates will not highlight blocks untill they are updated

Example of highlighted block detection

{loop name="tpl_blocks_extra"}
    {if condition="$value.flag == 0"}
        {if condition="$value.usetitle > 0"}
            <div class="standard_title"><b>{$value.title}</b></div>
        {/if}
        <div class="standard_body">{$value.content}</div>
    {elseif condition="$value.flag == 1"}
        {if condition="$value.usetitle > 0"}
            <div class="highlighted_title"><b>{$value.title}</b></div>
        {/if}
        <div class="highlighted_body">{$value.content}</div>
    {elseif condition="$value.flag > 1"}
        {if condition="$value.usetitle > 0"}
            <div class="highlighted_title_2"><b>{$value.title}</b></div>
        {/if}
        <div class="highlighted_body_2">{$value.content}</div>
    {/if}
{/loop}

Messages

{loop name="tpl_messages"}
    <div><b>{$value.title}</b></div>
    <div>{$value.content}</div>
{/loop}

News

{loop name="tpl_news"}
    <div><a href='index.php?page=news&op=readNews&title={$value.title|urlencode}'><b>{$value.title}</b></a></div>
    <div class="info">{$value.date} ({$value.ncomments} comments)</div>
    <div>{$value.content}</div>
    {if condition="$value.more == 1"}
        <div><a href='index.php?page=news&op=readNews&title={$value.title|urlencode}'>Read more</a></div>
    {/if}
    {if condition="$value.tags != ''"}
        <div class="info">{$value.tags}</div>
    {/if}
{/loop}

Blog posts

{loop name="tpl_blog"}
    <div><a href='index.php?page=blog&title={$value.title|urlencode}'><b>{$value.title}</b></a></div>
    <div class="info">{$value.date} ({$value.ncomments} comments)</div>
    <div>{$value.content}</div>
    {if condition="$value.more == 1"}
        <div><a href='index.php?page=blog&title={$value.title|urlencode}'>Read more</a></div>
    {/if}
    {if condition="$value.tags != ''"}
        <div class="info">{$value.tags}</div>
    {/if}
{/loop}

Pages

{if condition="$tpl_page.title != ''"}
    {if condition="$tpl_page.url != ''"}
            <div><a href='{$tpl_page.url}' title='{$tpl_page.title}'><b>{$tpl_page.title}</b></a></div>
    {else}
            <div><b>{$tpl_page.title}</b></div>
    {/if}
{/if}
{if condition="$tpl_page.name == 'blog'"} {include="blog"} {/if}
{if condition="$tpl_page.name == 'news'"} {include="news"} {/if}
<div>{$tpl_page.content}</div>

Build the template

This should be the final home.html structure:

Compiled files

The template engine, doesn't use the static html files directly, indeed it compile them and creates php files in root/templates/xxxx/compiled/. Obviously this folder should have write permissions (chmod 755), or the template would give an error as result.

The compiled files have this kind of names:

• home_123456789.php
• news_123456789.php
• blog_123456789.php

To maintain the compatibility with hosts that don't give write permissions, the template engine will try to open the following default files:

• home_def.php
• news_def.php
• blog_def.php

Those files must be provided inside the template by the developer.
To do this, after you have finished to build the template, copy and rename the original compiled files with the default names:

• home_123456789.php > home_def.php
• news_123456789.php > news_def.php
• blog_123456789.php > blog_def.php

Template variables

• {$site_name} [string]
• {$site_url} [string]
• {$showpath} [string]
• {$tpl_template} [string]
• {$fullscreen} [int 0/1/2]
• {$copyright} [string]
• {$copytext} [string]
• {$footmsg} [string]

• {$tpl_blocks_navigator} [array]
  • .title [string]
  • .usetitle [int 0/1]
  • .content [string]

• {$tpl_blocks_central} [array]
  • .title [string]
  • .usetitle [int 0/1]
  • .content [string]

• {$tpl_blocks_extra} [array]
  • .title [string]
  • .usetitle [int 0/1]
  • .content [string]

• {$tpl_messages} [array]
  • .title [string]
  • .content [string]
  • .author [string]
  • .date [string]

• {$tpl_news} [array]
  • .id [int]
  • .title [string]
  • .content [string]
  • .more [int 0/1]
  • .author [string]
  • .date [string]
  • .day [int]
  • .month [string]
  • .year [int]
  • .hits [int]
  • .topicimg [string]
  • .ncomments [int]
  • .usecomments [int]
  • .rank [int]
  • .tags [string]
  • .argument [string]

• {$tpl_blog} [array]
  • .id [int]
  • .title [string]
  • .content [string]
  • .more [int 0/1]
  • .category [string]
  • .author [string]
  • .date [string]
  • .hits [int]
  • .usecomments [int 0/1]
  • .ncomments [int]
  • .rank [int]
  • .tags [string]

• {$tpl_page} [array]
  • .name [string]
  • .title [string]
  • .url [string]
  • .content [string]

Note

Using PHP into the static html files is still possible. Just use <?php and ?> inside home.html, news.html and blog.html to enclose the PHP code.

Languages

العربية • Bahasa Indonesia • Bosanski • Български • Dansk • Deutsch • English • Español • فارسی • Français • Galego • עברית • Italiano • Magyar • Македонски • Nederlands • Português • Русский • Српски/Srpski • Svenska • Türkçe • Українська • Tiếng Việt