Tweaking templates

In case you didn't know, this wiki has been built using dokuwiki. Dokuwiki is totally awesome with loads of plugins, templates and other goodies. However, there may be times when you want to make tweaks. My wiki site is based on the excellent bootstrap3 template. However, I wanted to change the header to make it fit with the rest of this site. Here's how I did it

1. Templates are installed in lib/tpl directory so the first thing I did was take a complete copy of the bootstrap3 directory

 cd $DOKUWIKIHOME/lib/tpl
 cp -r bootstrap3 bootstrap3-test

2. For this template (and maybe all) the header is built by tpl_navbar.php . I had to change this a bit

 cd bootstrap3-test
 vi tpl_navbar.php

I added the following new variable, $title2.

 
      $loggoSize  = array();
      $logo      = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
      $title     = $conf['title'];
      $title2    = '<span id="pi">Just</span><span id="ye">Some</span><span id="pi2">Stuff</span><br>';
      $tagline   = ($conf['tagline']) ? '<span id="dw__tagline">'.$conf['tagline'].'</span>' : '';
      $logo_size = 'height="20"';

It is a somewhat clumsy hack in that I have hard coded the site name rather than pick it up from the dokuiwik settings but as this is a bespoke template just for this website, it didn't seem worth coding a routine to break up $title . Anyway the purpose of $title2 is to introduce the ids that will format the words Just, Some and Stuff. Next I had to amend the line that constructed the header html, from:

 '<img src="'.$logo.'" alt="'.$title.'" class="pull-left" id="dw__logo" '.$logo_size.' /> <span id="dw__title" '.($tagline ? 'style="margin-top:-5px"': '').'>'. $title . $tagline .'</span>',

to

  '<img src="'.$logo.'" alt="'.$title.'" class="pull-left" id="dw__logo" '.$logo_size.' /> <span id="dw__title" '.($tagline ? 'style="margin-top:-5px"': '').'>'. $title2 . $tagline .'</span>',

So the original $title is replaced by my new variable, $title2 . And that's it for editing the PHP files. Now for the CSS.

3. Custom CSS can be added to the conf directory in the dokuwiki home location (not the one in the template folder). Dokuwiki defines the names of the CSS custom files you can use see the dokuwiki dev manual but I have called mine userall.css so that it is called under all circumstances. Here it is.

@font-face {
    font-family: 'Lobster';
    src: url('/conf/fonts/Lobster_1.3.eot');
    src: url('/conf/fonts/Lobster_1.3.eot?#iefix') format('embedded-opentype'),
         url('/conf/fonts/Lobster_1.3.woff') format('woff'),
         url('/conf/fonts/Lobster_1.3.ttf') format('truetype'),
         url('/conf/fonts/Lobster_1.3.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body.default #pi {
   color: pink;
   position: relative;
   float: left;
   font-family: 'Lobster';
   font-size: 3.0rem;
   text-shadow: 2px 2px 1px rgba(47, 47, 47, 1);
}
body.default #ye {
   color: yellow;
   position: relative;
   float: left;
   font-family: 'Lobster';
   font-size: 3.0rem;
   text-shadow: 2px 2px 1px rgba(47, 47, 47, 1);
}
body.default #pi2 {
   color: pink;
   position: relative;
   float: left;
   font-family: 'Lobster';
   font-size: 3.0rem;
   text-shadow: 2px 2px 1px rgba(47, 47, 47, 1);
}
body.default #dw__tagline{
   line-height: 1.6rem;
   font-size: 1.2rem;
}
.navbar {
   background-size: cover;
   background: #cedce7;
   background: -moz-linear-gradient(top,  #cedce7 0%, #596a72 100%);
   background: -webkit-linear-gradient(top,  #cedce7 0%,#596a72 100%);
   background: linear-gradient(to bottom,  #cedce7 0%,#596a72 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
}
#dw__tagline {
   color: white;
}

This CSS could probably be a bit more efficient but in summary, it allows the use of the Lobster font, formats the title text and creates a gradient in the navbar.

4. Download the Lobster font and copy it into the location specified in the CSS above.

5. Log into you dokuwiki site as admin, go to configuration settings and choose bootstrap3-test as your template.

That's it. You can see the result at the top of this page.

Recent Changes

Contribute to this wiki

Why not help others by sharing your knowledge? Contribute something to this wiki and join out hall of fame!
Contact us for a user name and password