|
Viewed 1624 times 1. 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.
 Download the PSD source file
2. 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:
3. 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 (The knowledge of PHP is no 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)
[code]<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>[/code]
This is the result:
4. 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:
5. 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):
[code]{loop name="tpl_blocks_navigator"}
{if condition="$value.usetitle > 0"}
<div><b>{$value.title}</b></div>
{/if}
<div>{$value.content}</div>
{/loop}[/code]
Extra (To be shown when {$fullscreen} is < 1):
[code]{loop name="tpl_blocks_extra"}
{if condition="$value.usetitle > 0"}
<div><b>{$value.title}</b></div>
{/if}
<div>{$value.content}</div>
{/loop}[/code]
Central:
[code]{loop name="tpl_blocks_central"}
{if condition="$value.usetitle > 0"}
<div><b>{$value.title}</b></div>
{/if}
<div>{$value.content}</div>
{/loop}[/code]
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):
[code]{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}[/code]
MESSAGES
[code]{loop name="tpl_messages"}
<div><b>{$value.title}</b></div>
<div>{$value.content}</div>
{/loop}[/code]
NEWS
[code]{loop name="tpl_news"}
<div><a href='http://www.memht.com/news_{$value.title|urlencode}.html'><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='http://www.memht.com/news_{$value.title|urlencode}.html'>Read more</a></div>
{/if}
{if condition="$value.tags != ''"}
<div class="info">{$value.tags}</div>
{/if}
{/loop}[/code]
BLOG POSTS
[code]{loop name="tpl_blog"}
<div><a href='http://www.memht.com/blog_view_{$value.title|urlencode}.html'><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='http://www.memht.com/blog_view_{$value.title|urlencode}.html'>Read more</a></div>
{/if}
{if condition="$value.tags != ''"}
<div class="info">{$value.tags}</div>
{/if}
{/loop}[/code]
PAGES
[code]{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>[/code]
6. Build the template
This should be the final home.html structure:
7. 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 777), 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
8. Full list of the template variables
{$site_name} [string] 
{$site_url} [string]
{$showpath} [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]
.title [string]
.content [string]
.more [int 0/1]
.author [string]
.date [string]
.hits [int]
.topicimg [string]
.ncomments [int]
.rank [int]
.tags [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.
More informations about the template engine can be found here:    |
|
Navigator
Tags Cloud
Search
Users Block
New files
|
rivo: WONT WORK
pls edin..
