Theme Guide

this page will move



1. Layout

sketch of a page’s desired layout


<!DOCTYPE html>
<div class="wrapper">
  <header>...</header>
  <main>
     <article>...</article>
     <nav>...</nav>
     <aside>...</aside>
  </main>
  <footer>...</footer>
</div>

2. CSS

3. Templates

3.1. Elements

layout elements

3.1.1. breadcrumbs

$tpl->breadcrumbs	= $this->get_page_path(false, ' > ', true, true);

<nav class="breadcrumb">
	[ ' breadcrumbs ' ]
</nav>

3.1.2. usertrail

$tpl->usertrail		= $this->get_user_trail(true, ' > ', true, $size = 8);

<nav class="usertrail">
	[ ' usertrail ' ]
</nav>

3.1.3. handler

// 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">&#9660;</span></a>
			<ul class="dropdown_menu">
				['' tab TabList '']
				['' // last empty '']
				<li></li>
			</ul>
		</li>
	=]
</ul>

3.2. Sidebar

3.2.1. toc

// 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

// 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

// 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

// 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

// 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.


Show Files (1 file)