Theme Guide
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 ($this->method === $method) { $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.
- https://material.io/tools/icons/
- https://materialdesignicons.com/
- https://github.com/KDE/breeze-icons
- https://icons.getbootstrap.com/