Inserting a custom CSS menu in DokuWiki

DokuWiki has preset menu items towards the top right that are very difficult customize. The links are Recent Changes, Media Manager, and Sitemap. These are there by difault and are difficult to change. You can use a custom made css menu that can be inserted into the wiki header code. This will allow you to add your own links to the top of each page. The template used in this tutorial is the DokuWiki theme.

Adding custom menu code

The following steps will explain how to add custom HTML and CSS to your template code.

1. Login into your cPanel.
2. Go to the File Manager, select your dokuwiki installation location and click Go
3. Navigate to the following file:

   public_html/your-dokuwiki/lib/tpl/dokuwiki/tpl_header.php

   Open the tpl_header.php file in the code editor.
   

   

   Insert the menu code in the file right before the following code:

   <!-- BREADCRUMBS -->

   Here is the custom code for the header section.

   <!-- Begin Custom Menu --> <style type="text/css">         #custom_menu {clear:both;}         #custom_menu ul {padding:0px;}         #custom_menu ul li {display:inline; margin:0px 10px 0px 0px;} </style> <div id="custom_menu">         <ul>                 <li><a href="/doku.php?id=html_basics">Html Basics</a></li>                 <li><a href="/doku.php?id=contact_us">Contact Us</a></li>         </ul> </div> <!-- End Custom Menu -->

   
   

4. 

   Save the file.

   You can edit the source code of the menu to link to your existing pages and change the link names to customize the menu further.

   The snapshot to the right will show what the menu looks like after the page is saved.