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.

    Custom code for menu DokuWikiInsert 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. Custom menu final view DokuWikiSave 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.


Continued Education in Course 201: Working with menus in DokuWiki
You are viewing Section 1: Inserting a custom CSS menu in DokuWiki
Section 2: How to use the menu plugin in DokuWiki
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-03-24 11:21 am

Hello i used your code and it worked perfectly.

But is it possible to use it as a div. and edit the background colour and make buttons in it?

Something like this website has as a nav bar?

i hope you can help me.

Thanks, Bram van der Werf.

 

Staff
18,098 Points
2014-03-24 12:27 pm
Hello Bram van der Werf,

Yes, you can customize the CSS for your menu to behave any way you like. Simply keep testing and tinkering with it until you get it the way you want. If you are not sure how to do so, you may want to contact a CSS professional to assist you.

Kindest Regards,
Scott M
n/a Points
2014-03-25 5:03 am

Thanks for your answer Scott!

So i edited some css in the tpl_header file but it does not work on the website.

Do i have to make a different file in the css directory ?

 

Thanks,

Bram van der Werf.

Staff
8,394 Points
2014-03-25 8:09 am
If you are changing an existing CSS style, you might want to locate the file in which it is declared, as your changes could be becoming overridden by another stylesheet.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

4 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!