====== 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:

<code * 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]]
</code>

For that to work you need two files, **which are automatically included** (//by dokuwiki code(tpl_footer.php)//). 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 folder((most templates support the include hook for ''footer.html'', some might not)):

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

And add this to your conf folder:

<code css ./conf/userall.css>
@media screen {

    /* top bar */
    .dokuwiki .topbar {
        position: absolute; /* "fixed" for sticky on top */
        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 */
</code>

:!: There is a bit of code in the CSS which is specific for the [[template:dokuwiki|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: {{:tips:dokuwiki-topbar-tip.png?direct&350}}

===== 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. --- [[user>ach|Anika Henke]] //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.
 --- [[user>pearsonapollo|pearsonapollo]] //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. --- [[user>ach|Anika Henke]] //2014/04/06 00:37//

>> Re sized and boom!  Works perfectly, thanks so much!  --- [[user>pearsonapollo|pearsonapollo]] //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. --- [[user>ach|Anika Henke]] //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? --- [[user>ach|Anika Henke]] //2015-03-22 00:58//

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

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

==== Compatible with Hogfather? ====

<del>Hi :) Is this compatible with Hogfather? I was using it on greebo but can't seem to make it work on Hogfather (the topbar is not displayed).</del>\\
<del>Tx</del>\\
<del>-a-</del>

EDIT: [[https://forum.dokuwiki.org/d/19658-topbar-in-hogfather|apparently it is]]. My bad.\\
-a-

==== IGRO  (2022/08/01) ====

Since the upgrade to IGRO, the font is different. What must be done here so that it looks "normal" again?

Self solution <code css>font-size: 100%;</code>


-----
==== Dumb Question: Is the top-bar fixed, non-scrolling? ====
<del>Many thanks for this plugin, I'm utterly incompetent with html, css and similar but I've managed to follow your instructions. \\
I find that the top-bar moves up and off the screen when I scroll down - is the expected behaviour? \\
Referring to ''./conf/userall.css'' the line ''position: absolute; /* "fixed" for sticky on top */'' made me think that the top-bar should remain visible even on scrolling. \\
TIA \\
a</del>


//__**answering myself:**__  \\
Oh the humiliation; but I leave this in case anyone in future stumbles across it. \\
I realised that I just needed to change ''position: absolute;'' to ''position: fixed;''\\
__**end humiliation**__//
-----

==== support in Jack Jackrum ====

Does this still work in JJ?
I get errors in the logs (reported [[https://forum.dokuwiki.org/d/21176-error-message/2|here]])

Thanks :)

-a-