DokuWiki

It's better when it's simple

User Tools

Site Tools


Sidebar

Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community


Follow us on Facebook, Twitter and other social networks.

tips:topbar

Top Bar

Many users ask how the top bar in this wiki is done. As it's just some hard-coded HTML and also very specific for this installation, its source code is no real use for most users. But here is a better way to do something very similar.

The following implementation uses a normal wiki page called “topbar”. Just create it and add a simple list into it. An example:

topbar.txt
  * [[wp>Interwiki link]]
  * {{:wiki:dokuwiki-128.png?nolink&16}} [[wiki:page|Internal page]]
  * [[http://example.com/|External link]]
  * {{:document.pdf|Some PDF}}
  * [[paypal>anika@selfthinker.org|Donate]]

For that to work you need two files, which are automatically included (automatically included by what?). If they don't exist yet, just create them. If they do exist, just add the code to them. The code is using the new default template as an example.

Add this to your template's folder1):

./lib/tpl/dokuwiki/footer.html
<div class="topbar">
    <?php tpl_include_page('topbar') /* includes the wiki page "topbar" */ ?>
</div>

And add this to your conf folder:

./conf/userall.css
@media screen {
 
    /* top bar */
    .dokuwiki .topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .dokuwiki .topbar ul {
        text-align: center;
        max-width: 600px; /* change accordingly */
        margin: 0 auto;
        padding: 0;
        list-style: none;
        background-color: __background_alt__;
        border: solid __border__;
        border-width: 0 1px 1px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        box-shadow: 0 1px 3px #999;
        overflow: hidden;
    }
    .dokuwiki .topbar ul li {
        margin: 0;
        padding: 0 2px;
        display: inline-block;
        font-size: 85%;
    }
    .dokuwiki .topbar ul li a {
        color: __text__;
        display: inline-block;
        min-height: 16px; /* make sure icons are not cut off (most icons are 16x16) */
    }
 
    /* for IE7 */
    *+html .dokuwiki .topbar ul li,
    *+html .dokuwiki .topbar ul li a {
        display: inline;
    }
 
    /* changes specific for the default "dokuwiki" template,
       other templates need other changes! */
    #dokuwiki__header {
        padding-top: 3.5em;
    }
    #dokuwiki__usertools {
        top: 2em;
    }
 
    /* IE8 needs this in the default template */
    .dokuwiki .topbar ul li img {
        max-width: none;
    }
 
} /* /@media */
 
 
/* for screens less than 480px wide */
@media only screen and (max-width: 480px) {
 
    /* move topbar back to the bottom */
    .dokuwiki .topbar {
        position: static;
    }
 
    /* un-do some specific template changes */
    #dokuwiki__header {
        padding-top: .5em;
    }
 
} /* /@media */
 
 
@media print {
 
    /* don't print the topbar */
    .dokuwiki .topbar {
        display: none;
    }
 
} /* /@media */

:!: There is a bit of code in the CSS which is specific for the DokuWiki Template. If you use a different template, you will most probably need to make your own specific adjustments.

And this is how the above example looks like:

Discussion

Thank you for the usefull tip. I have a trouble: in toc, clicking on a title will bring me to the title in the page, but this title is hidden by the top bar… What change should I make?

Celano, 13-07-31

Sorry, I don't understand what you mean. A screenshot might help. — Anika HenkeAnika Henke
ach

2014/04/06 00:37

Hello, the topbar displays correctly in IE, but when viewing in google chrome, I see a list of the top bar items near the footer. Is there an adjustment I need to make in the CSS to fix the view of the topbar in chrome? Thank you. — pearsonapollopearsonapollo

2014/04/04 04:07

That is not a browser issue but depends on the width of the browser window. The topbar automatically places itself in the footer whenever the browser window is less than 480px wide. That is to prevent the topbar from wrapping and therefore hiding text inaccessibly underneath on smaller devices. — Anika HenkeAnika Henke
ach

2014/04/06 00:37
Re sized and boom! Works perfectly, thanks so much! — pearsonapollopearsonapollo

2014/04/07 16:54

Hello, the top bar does not display correctly in seamonkey, and it is not a very pleasing look. The exact top bar on this site, however, looks great and works well. How can we find out what css you used, where we should put that, and what we should modify for our own site? Thanx, -cosmicbruce 2014/08/07

Can you please be more specific and explain what exactly you mean by “does not display correctly”? If it's pleasing or not is a matter of opinion. The above code emulates the style which the topbar of dokuwiki.org had in its first iteration (the black one now is the second iteration). I personally agree that it doesn't look great, but lots of people liked it a lot and were asking for it. What you need to modify for your own site is the same code as described above, except that the CSS needs to change to make it look like the one you see now on dokuwiki.org. — Anika HenkeAnika Henke
ach

2014-08-09 23:45

Anika you are very kind to reply, thank you! “Does not display correctly”= goes on screen in a layer on top of the Login, Search bar, Recent Changes, Media manager, etc. links, and you cannot access them at all!. On this Docuwiki, the black bar makes its own bar above all these items. This is an important difference. The black bar is aesthetically superior by a vote of 3:0, and it reserves it's own area on the screen so it doesn't interfere with the top right elements. How can I do that? Again thanks, -cosmicbruce 2014/08/12

Have you done all of the changes in the CSS mentioned above? The bit that gives the bar its own space is the one starting with #dokuwiki__header. That is what adds more space to the top of the header. Depending on your template you would need to adjust the CSS selector. Which template are you using? — Anika HenkeAnika Henke
ach

2015-03-22 00:58

Maybe a plugin is of interest for the visitors of this page: topbarsyntax

Change the position to fixed instead of absolute will make the top bar sticky at the top. :)

1)
most templates support the include hook for footer.html, some might not
tips/topbar.txt · Last modified: 2016-02-12 16:56 by 129.110.242.29