User Tools

Site Tools


devel:dokuwiki

Dokuwiki setup

This page summarises specifics of DokuWiki setup and outlines development of templates that are used for Workcraft website.

Template dokuwiki-light

The default dokuwiki-template has some elements that feel a bit heavy and redundant. We derived dokuwiki-light from the default dokuwiki template and simplified it as follows:

  1. In inc/lang/en/lang.php shorten the following button text:
    $lang['btn_recent']            = 'Changes';
    $lang['btn_profile']           = 'Profile';
    $lang['btn_media']             = 'Manager';

  2. Copy dokuwiki template into dokuwiki-light and go inside this new template directory.
  3. In main.php do the following changes:
    • Tweak the title, so it is in the form current:page:path - Workcraft:

      <title><?php echo strip_tags($conf['title']) ?> - <?php tpl_pagetitle() ?></title>

    • Make tpl_pageinfo() output visible only to logged-in users:

      <?php if (!$conf['useacl'] || !empty($_SERVER['REMOTE_USER'])): ?>
        <div class="docInfo"><?php tpl_pageinfo() ?></div>
      <?php endif ?>

    • Make the content of <!– PAGE ACTIONS –> section visible only to logged-in users:

      <!-- PAGE ACTIONS -->
      <div id="dokuwiki__pagetools">
      <?php if (!$conf['useacl'] || !empty($_SERVER['REMOTE_USER'])): ?>
          <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
          <div class="tools">
          ...
          </div>
      <?php endif ?>
      </div>

  4. In tpl_header.php do the following changes:
    • Replace the whole <div class="headings group"> ... </div> section by the following code:

      <h1><?php
          // get logo either out of the template images folder or data/media folder
          $logoSize = array();
          $logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
          // display logo and wiki title in a link to the home page
          tpl_link(
              wl(),
              '<img src="'.$logo.'" '.$logoSize[3].' alt="" />',
               'title="'.$conf['title'].' start page"'
          );
      ?></h1>
      <?php if ($conf['tagline']): ?>
          <p class="claim"><?php echo $conf['tagline']; ?></p>
      <?php endif ?>

    • Modify <!-- USER TOOLS --> section as follows:

      <!-- USER TOOLS -->
      <?php if ($conf['useacl']): ?>
          <div id="dokuwiki__usertools">
              <h3 class="a11y"><?php echo $lang['user_tools']; ?></h3>
              <ul>
                  <?php
                      if (!empty($_SERVER['REMOTE_USER'])) {
                          tpl_action('admin', true, 'li');
                          tpl_action('profile', true, 'li');
                      }
                      tpl_action('register', true, 'li');
                      tpl_action('login', true, 'li');
                  ?>
              </ul>
          </div>
      <?php endif ?>

    • Modify <!-- SITE TOOLS --> section as follows:

      <!-- SITE TOOLS -->
      <div id="dokuwiki__sitetools">
          <h3 class="a11y"><?php echo $lang['site_tools']; ?></h3>
          <?php if ($conf['useacl']): ?>
              <div class="mobileTools">
                  <?php
                      if (!empty($_SERVER['REMOTE_USER'])) {
                          tpl_actiondropdown($lang['tools']);
                      } else {
                          tpl_action('login', true, 'li');
                      }
                  ?>
              </div>
              <ul>
                  <?php
                      if (!empty($_SERVER['REMOTE_USER'])) {
                          tpl_action('recent', true, 'li');
                          tpl_action('media', true, 'li');
                          tpl_action('index', true, 'li');
                      }
                  ?>
              </ul>
          <?php endif ?>
      </div>

    • Add <!-- SEARCH TOOLS --> section between <!-- USER TOOLS --> and <!-- SITE TOOLS --> sections as follows:

      <!-- SEARCH TOOLS -->
      <div id="dokuwiki__searchtools">
          <h3 class="a11y"><?php echo $lang['search_tools']; ?></h3>
          <?php tpl_searchform(); ?>
      </div>

  5. In tpl_footer.php add information about logged-in user at the bottom of the footer:

    <div class="userInfo">
        <?php if ($INPUT->server->str('REMOTE_USER')) echo $lang['loggedinas'].': '.$INPUT->server->str('REMOTE_USER'); ?>
    </div>

  6. In css/design.less do numerous changes:
    • Change padding, .headings and .tools settings:

      padding: 1.0em 0 0.5em;
       
      .headings {
          margin-top: 0.2em;
          margin-bottom: 1.0em;
          width: 65%;
      }
       
      .tools {
          margin-top: 0.0em;
          margin-bottom: 0.0em;
          width: 34%;
      }
      <code>
          * In ''%%#dokuwiki__usertools%%' change ''%%position: absolute;%%'' to ''%%position: static;%%''.
          * Change ''.pageID'' settings as follows: \\ <code php>
      .dokuwiki .pageId {
          display: none;
          position: absolute;
          top: -2.3em;
          right: -1em;
          overflow: hidden;
          padding: 0.5em 1em 0;
      ...

    • Extract #dokuwiki__searchtools from #dokuwiki__sitetools as follows:

      /*____________ site tools ____________*/
       
      #dokuwiki__sitetools {
          position: relative;
          top: -.5em;
          right: 0em;
          text-align: right;
          width: 100%;
      }
       
      [dir=rtl] #dokuwiki__sitetools {
          text-align: left;
          left: 40px;
          right: auto;
      }
       
      /*____________ search tools ____________*/
       
      #dokuwiki__searchtools {
          text-align: right;
       
          form.search {
              font-size: 0.875em;
          }
      }
       
      [dir=rtl] #dokuwiki__searchtools {
          text-align: left;
      }
       
      form.search {
          display: block;
          position: relative;
          margin-bottom: 0.5em;
       
          input {
              width: 100%;
              height: 1.9em;
              padding: .35em 22px .35em .1em;
          }
       
          button {
              background: transparent url(images/search.png) no-repeat 0 0;
              border-width: 0;
              width: 19px;
              height: 14px;
              text-indent: -99999px;
              margin-left: -20px;
              box-shadow: none;
              padding: 0;
          }
      }
       
      [dir=rtl] form.search {
          input {
              padding: .35em .1em .35em 22px;
          }
       
          button {
              background-position: 5px 0;
              margin-left: 0;
              margin-right: -20px;
              position: relative;
          }
      }

    • Change .docInfo settings as follows:

      .dokuwiki .docInfo {
          position: absolute;
          font-size: 0.875em;
          text-align: left;
          width: 100%;
      }

    • In div.userInfo change div.button as follows:

      div.buttons a {
          display: none;
          ...

    • Reduce the margin in .dokuwiki .wrapper:

      .dokuwiki .wrapper {
          margin-bottom: 1em;
      }

    • Add the following div.userInfo settings into #dokuwiki__footer:

      div.userInfo {
          position: absolute;
          text-align: left;
      }

Template dokuwiki-light-export

This template removes decoration elements that are redundant in the offline version of documents. Here is an instruction of how to produce dokuwiki-light-export template from dokuwiki-light template:

  1. Copy dokuwiki-light template into dokuwiki-light-export and go inside this new template directory.
  2. In main.php comment out content of a section after <!-- PAGE ACTIONS --> and the following portion of code:
    <?php if (!$conf['useacl'] || !empty($_SERVER['REMOTE_USER'])): ?>
      <div class="docInfo"><?php tpl_pageinfo() ?></div>
    <?php endif ?>

  3. In tpl_header.php comment out content of sections after:
    <!-- USER TOOLS -->
    <!-- SEARCH TOOLS -->
    <!-- SITE TOOLS -->
    <!-- BREADCRUMBS -->
  4. In tpl_footer.php comment out content of a section after:
    <!-- ********** FOOTER ********** -->