Theme Guide
Contents
1. Layout
< ! DOCTYPE html >
< div class = " wrapper " >
< header > ... </ header >
< main >
< article > ... </ article >
< nav > ... </ nav >
< aside > ... </ aside >
</ main >
< footer > ... </ footer >
</ div >
2. CSS
3. Templates
The first code example is from the parent PHP file, defining the variables $tpl->variable
and the second from the associated template file.
3.1. Elements
3.1.1. breadcrumbs
<?php $tpl -> breadcrumbs = $this -> get_page_path ( false , ' > ' , true , true );
<nav class="breadcrumb">
[ ' breadcrumbs ' ]
</nav>
3.1.2. usertrail
<?php $tpl -> usertrail = $this -> get_user_trail ( true , ' > ' , true , $size = 8 );
<nav class="usertrail">
[ ' usertrail ' ]
</nav>
3.1.3. page handler
<?php // defining tabs constructor // $image = 0 text only, 1 image only, 2 image and text $echo_tab = function ( $method , $hint , $title , $image , $tab_class = '' , $access_key = '' , $params = null ) use (& $tpl ) { $tpl -> class = $tab_class ?: ( 'm-' . $method ); if (! strncmp ( $this -> method , $method , strlen ( $method ))) // STS why?! { $tpl -> active = ' active' ; $tpl -> enter ( 'in_' ); } else { $tpl -> enter ( 'out_' ); $tpl -> method = ( $method == 'show' ? $this -> href () : $this -> href ( $method )); $tpl -> hint = $this -> _t ( $hint ); $tpl -> params = $params ; if ( $access_key !== '' ) { $tpl -> key = $access_key ; } } $image == 1 or $tpl -> t_title = $this -> _t ( $title ); $image == 0 or $tpl -> t_im_title = $this -> _t ( $title ); $tpl -> leave (); }; $tpl -> enter ( 'tab_' ); $echo_tab ( 'show' , 'ShowTip' , 'ShowText' , 1 , '' , 'v' ); // [...] other handlers // show more tab $tpl -> leave (); $tpl -> enter ( 'droptab_tab_' ); // print tab if ( $readable ) { $echo_tab ( 'print' , 'PrintVersion' , 'PrintText' , 2 , '' , 'v' , ' target="_blank" rel="noopener"' ); } // [...] other handlers $tpl -> leave ();
<ul class="submenu">
[= tab TabList =
<li class="[ ' class ' ][ ' active ' ]">
[= in _ =
<span>[ '' t TabTitle | trim '' ]</span>
=]
[= out _ =
<a href="[ ' method ' ]" title="[ ' hint ' ]"
[ ' key | e attr | enclose ' accesskey="' '"' ' ][ ' params ' ]>[ '' t TabTitle | trim '' ]</a>
=]
</li>
=]
[= droptab _ =
<li class="dropdown"><a href="#" id="handler-more">[ ' _t: PageHandlerMoreTip ' ]<span class="dropdown-arrow">▼</span></a>
<ul class="dropdown_menu">
['' tab TabList '']
['' // last empty '']
<li></li>
</ul>
</li>
=]
</ul>
3.2. Sidebar
3.2.1. toc
<?php // side bar toc list if ( $this -> db -> hide_toc == 0 ) { // display the page toc list, numerated, without labels and markup $tpl -> toc_action = $this -> action ( 'toc' , [ 'numerate' => 0 , 'nomark' => 0 ]); }
[= toc =
<div id="sidebar-toc-wrapper" class="toc-wrapper sidebar-box">
<header id="sidebar-toc-header" class="toc-header sidebar-box-header">
[ ' // _t: TOCTitle ' ]
</header>
<div id="sidebar-toc" class="sidebar-toc-list">
[ ' action ' ]
</div>
</div>
=]
3.2.2. categories
<?php // display the categories for this page $tpl -> categories_action = $this -> action ( 'categories' , [ 'list' => 1 , 'nomark' => 1 ]);
[= categories =
<div id="sidebar-categories-wrapper" class="categories-wrapper sidebar-box">
<header id="sidebar-categories-header" class="page-categories-header sidebar-box-header">
[ ' // _t: Categories ' ]
</header>
<nav id="sidebar-categories-list" class="sidebar-categories-list">
[ ' action ' ]
</nav>
</div>
=]
3.2.3. tagcloud
<?php // display the tag cloud this page $tpl -> tagcloud_action = $this -> action ( 'tagcloud' , [ 'nomark' => 1 ]);
[= tagcloud =
<div id="sidebar-tagcloud-wrapper" class="tagcloud-wrapper sidebar-box">
<header id="sidebar-categories-header" class="categories-header sidebar-box-header">
[ ' // _t: Categories ' ]
</header>
<nav id="sidebar-categories-list" class="sidebar-categories-list">
[ ' action ' ]
</nav>
</div>
=]
3.2.4. tree
<?php // page tree if ( $this -> db -> hide_index == 0 ) { // display all subpages for this page/cluster, 3 levels down $tpl -> tree_action = $this -> action ( 'tree' , [ 'page' => $this -> tag , 'depth' => 3 , 'nomark' => 1 ]); }
[= tree =
<div id="sidebar-tree-wrapper" class="tree-wrapper sidebar-box">
<header id="sidebar-tree-header" class="tree-header sidebar-box-header">
[ ' // _t: Cluster' ' ]
</header>
<nav id="sidebar-tree" class="sidebar-tree">
[ ' action ' ]
</nav>
</div>
=]
3.2.5. bookmarks
<?php // user bookmarks $tpl -> enter ( 'smenu_menu_' ); foreach ((array) $this -> get_menu () as $menu_item ) { $tpl -> commit = true ; if ( $this -> page [ 'page_id' ] == $menu_item [ 0 ]) { $tpl -> active_item = $menu_item [ 1 ]; } else { $tpl -> item_link = $this -> format ( $menu_item [ 2 ], 'post_wacko' ); } } $tpl -> leave (); if ( $logged_in ) { // determines what it should show: "add to menu" or "remove from menu" icon if (! in_array ( $this -> page [ 'page_id' ], (array) $this -> get_menu_links ())) { $tpl -> addmark_href = $this -> href ( '' , '' , [ 'addbookmark' => 1 ]); } else if (! $this -> get_menu_default ()) { $tpl -> removemark_href = $this -> href ( '' , '' , [ 'removebookmark' => 1 ]); } }
[= smenu =
<div id="sidebar-user-bookmarks-wrapper" class="user-bookmarks-wrapper sidebar-box">
<header id="sidebar-user-bookmarks-header" class="user-bookmarks-header sidebar-box-header">
<span>
[ ' // _t: Bookmarks ' ]
</span>
</header>
<nav id="sidebar-user-bookmarks-list" class="sidebar-user-bookmarks-list">
<ol>
[= menu =
[ ' commit | void // alternation hack ' ]
[= item _ =
<li>[ ' link ' ]</li>
=]
[= active _ =
<li class="active"><span>[ ' item ']</span></li>
=]
=]
[= addmark _ =
<li>
<a href="[ ' href ' ]">
<img src="[ ' db: theme_url ' ]icon/spacer.png" alt="+" title="[ ' _t: AddBookmark ' ]" class="btn-addbookmark">
</a>
</li>
=]
[= removemark _ =
<li>
<a href="[ ' href ' ]">
<img src="[ ' db: theme_url ' ]icon/spacer.png" alt="-" title="[ ' _t: RemoveBookmark ' ]" class="btn-removebookmark">
</a>
</li>
=]
</ol>
</nav>
</div>
=]
4. Icons
Chose an icon set and select the icons you think fit.
5. Resources
[link1] https://wackowiki.org/doc/Doc/English/Themes
[link2] https://wackowiki.org/doc/Dev/Projects/Templatest/Usage
[link3] https://wackowiki.org/doc/Dev/Projects/Templatest/Filters