Loading...
 
Skip to main content

History: Templates Best Practices

View published page

Source of version: 54 (current)

Copy to clipboard
{REMARKSBOX(type="warning" title="Warning")}1. The content of this page is mostly obsolete.
2. Should this be on themes.tiki.org instead as per ((tw:Where)) ? {REMARKSBOX}

! Smarty
Tiki uses __[http://www.smarty.net/|Smarty]__ template engine
!! HTML
{CODE(caption=Minimal Conforming HTML5 Template)}
<!DOCTYPE html>
<html>
	<head>
		<title>Conforming HTML5 Template</title>
	</head>
	<body>
		
	</body>
</html>
{CODE}

! General layout of a template:
Tiki's main template file is -+tiki.tpl+-

!! Tiki CSS Layout schema

~tc~ added by kstingel 22/03/2013 ~/tc~
{img id="131" thumb="y" width="512" rel="box"}

!!- Older stuff

{img src="img/wiki_up/tiki_screen_example.png" width=640}

...with css classes

{img src="img/wiki_up/tiki_screen_mini.gif"}

* [http://tiki.org/MoreNeatLayoutSchema|MoreNeatLayoutSchema]

! Template includes

!! Title
{CODE(caption=>Smarty : templates/tiki-edit_blog.tpl)}
{title help="Blogs" url="tiki-edit_blog.php?blogId=$blogId" admpage="blogs"}
{tr}Edit Blog:{/tr} {$title}{/title}
{CODE}

!! Find

{CODE(caption=>Smarty : templates/tiki-admin_forums.tpl)}
{if $channels or ($find ne '')}
  {include file='find.tpl' _sort_mode='y'}
{/if}
{CODE}


!! Include TPL

{CODE(caption=>Smarty : templates/tiki-view_tracker.tpl)}
{include file='tracker_item_field_input.tpl'} <= Using simple quote calling TPL without variable
{include file="$checkbox.tpl"} <= Using double quote when calling TPL with variable
{CODE}

!! Remarksbox
{CODE(caption=>Smarty : tiki-mods.tpl)}
{remarksbox type="tip" title="{tr}Tip{/tr}"}
    {tr}Tiki "mods" are additional features not included in the public release. 
Learn more at <a target="tikihelp" href="htt+p://mods.tiki.org">mods.tiki.org</a>.{/tr}
{/remarksbox}
{CODE}

!!Buttons
{CODE(caption=>Smarty : tiki-syslog.tpl)}
<div class="navbar"> or <div id="page-bar">
   {button _text="{tr}Log SQL{/tr}" href="tiki-sqllog.php"}
</div>
{CODE}

or (if not in navbar or page-bar)

{CODE(caption=>Smarty : tiki-syslog.tpl)}
   {button _text="{tr}Log SQL{/tr}" href="tiki-sqllog.php"}
{CODE}

!!Tables
!!! Definition of a table
{CODE(caption=>Smarty : tiki-syslog.tpl)}
{cycle values="even,odd" print=false}
<table class="normal">
  <tr class="head">
    <th>......</th>
  </tr>
  <tr class="{cycle}">
    <td>.......</td>
  </tr>
 ...
</table>
{CODE}

!!!Table can have different classes
* normal: is usually a 100% large, with a border, the table is used to list items
* formcolor: is usually a 100% large, with a border, the table is used in a form

!!! td classes and styles
td can have a class depending of the type of the content
* __checkbox__: for a column with checkboxes for selecting some values
* __action__: for a list of action (usually can not be wrapped - or have a limited size
* __char__: for a single character e.g. {text-align: right}
* __integer__: {text-align: right}
* __icon__: for one icon
* __email__: {text-align: "@"}
* __floatnum__: {text-align: "."}
* __date__: ...should we add "longdate" and "shortdate" ?
* __username__: for names. E.g in bold
* __norecords__: for table with no records
* __id__: for id {text-align: center}
* ...

By default a td with no class is for text = left align

!Notes:
* Avoid inline styles if possible (inline styles are possible if they are required to keep the page structure consistent). No inline style should specify size, colour or fonts.


!Alias
*(alias(TemplatesBestPractices))

!Related
http://themes.tiki.org/Template+Tricks
Show PHP error messages