InMotion Hosting Support Center

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

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Social Media Login

   
Social Login Joomla

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
2017-09-06 4:25 am

Fixed! This is awesome, thank you so so much for the menu code. I simply added /w to the start of each link. So if anyone has a domain name issue like I'm having, just change your links like the following. Instead of this line: <li><a href="/doku.php?id=humor">Humor</a></li>

You'll want this line: <li><a href="/w/doku.php?id=humor">Humor</a></li>Where "W" is the subfolder your DokuWiki is stored in.

n/a Points
2017-09-06 4:17 am

Slight update - Okay so I notice when I click a link, the reason it directs me to my Drupal8 site is that the link doesn't include the /w/ or maybe Drupal8 takes out the /w/. Basically Ontu.org is my site, and ontu.org/w is my dokuwiki. The code here is perfect, but due to my drupal8 site being a wacky dictator, I wonder if there's a way to specify in the CSS that /w/ is important to the url. No worries if it's any bother to you. I'm just not educated enough with either website.

n/a Points
2017-09-06 4:13 am

Thank you kindly for the menu code and easy instructions!!!! What a life saver. You'd think DokuWiki would already have a smart horizontal menu...but nope! Visually it looks beautiful, but I'm a noob to DokuWiki and so something isn't right due to my stupid Drupal8 installation. Drupal8 is my main site, it was installed to my root folder. As such, it has a file called HTAccess which takes over all other websites on my account. So... I couldn't even install DokuWiki until I temporarily renamed HTACCESS to disable it. Then I found out out to disable Drupal8's security which blocks other sites from being used, so now I can use other sites. And I temporarily disable HTACCESS every time I install a new content management system such as Wordpress or DokuWiki. Okay so... The weird thing is, when I use your code here, I click a link in the menu and it routes me to my Drupal8 site. So I think I need to put Drupal8 in a subfolder instead of my root folder...so I made a Drupal8 clone in a subfolder but it won't run because I don't know how to properly change it's settings.php file to edit its location. At any rate, your code is perfect, I just need to get rid of Drupal8 from my root folder and everything will be perfect. I'll get there! Here is my DokuWiki:http://www.ontu.orgAnd here is my Drupal8: http://www.ontu.org/wYou can see Drupal8 is the domain name, and DokuWiki is a subfolder of that. My goal is to have all sites in subfolders. Drupal8 is such a mess to work with.

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
11,186 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.
Staff
43,761 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-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.

 

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.

7 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!