====== DokuTouch Design ======

[[DokuTouch]] is a carefully designed template for [[DokuWiki]]. Take a look at these details:
===== Fixed Position Bars =====

{{:en:site-functions.jpg?nolink |Site functions}}

Site functions (search, recent changes, index) are grouped together on the right hand side of the upper bar. 

{{:en:page-functions.jpg?nolink |Page functions}}

Page functions are always visible and always in the same place: on the left hand side of the lower bar. 

{{:en:user-functions.jpg?nolink |User functions}}

User functions (login / logout, admin, update profile) are on the right hand side of the lower bar. The lower bar disappears if the user isn't logged in and isn't allowed to edit the current page. 
===== Navigation =====

{{:en:subsites-nav.jpg?nolink |Subsites navigation}}

Switch between different subsites – for example, versions of the site in other languages.

{{:en:main-nav.jpg?nolink |Main navigation}}

The main navigation is on the top with a clearly visible accent for the current page. The tab is blue if you are directly on that page, and it is grey if you are on a subpage of the selected page.

{{:en:left-nav.jpg?nolink |Left navigation}}

Two further levels of navigation can be displayed in the left column of the page.

{{:en:breadcrumb-trail.jpg?nolink |Breadcrumb trail}}

A breadcrumb trail according to your sitemap makes it easy to go back.

{{:en:toc-nav.jpg?nolink |Table of Contents}}

The table of contents has fingertip-sized links and a large double tap area to zoom in to the column width.
===== Page Images =====

{{:en:page-images.jpg?nolink |Page images}}

Every wiki page can have an image in the left column. The picture has to have the same name like the page, but with an image extension (.jpg, .jpeg, .gif, .png). The maximum size of the picture is 200x420 pixels.

Because of this naming convention an unintented image may be displayed in the sidebar. To remove it, just rename it to something else than the page ID.

===== Colored Buttons =====

{{:en:section-edit.jpg?nolink |Section edit button}}

Section edit buttons are white in order not to distract from the content.

{{:en:save-reset.jpg?nolink |Save and reset buttons}}

Buttons that save changes or add content are green, while buttons that discard changes or delete content are red.
===== Nice Inline Styles =====

{{:en:inline-styles.jpg?nolink |Inline styles}}

Subtle styling of inline elements like tables, code blocks and headings.

===== To Do =====

As very often not everything is perfect right now. These changes are on my list for the next release:

  * Media manager
  * Media detail view
  * Configuration