Header & Footers

This section explains the header and footer areas of the DocBrowser's HTML layout file.

Logo and Icon

DocBrowser's header bar has support for two logo/icon images. The icon image should be square shaped while the logo image should have an aspect ratio of approximately 6:1.

To set the images, adjust the #project-icon and #project-logo elements:

<!-- A small icon shown to the left of the main title -->
<div class="image-section" id="project-icon">
    <img src="/YOURICON.PNG"/ >
</div>

<!-- A wide icon/logo show to the left of the main title -->
<div class="image-section" id="project-logo">
    <img src="/YOURLOGO.PNG"/ >
</div>

Title Area

The main header bar content is contained in the element header div.inner element:

<!-- The main heading area -->
<div class="inner">
    <a href="/">DocBrowser</a> <small>v0.1</small>
</div>

Header Links Area

Header links appear at the right hand side of the main header bar:

<!-- Links shown in the top-right hand corner of the page -->    
<div id="header-links">
    <a href="https://www.toptensoftware.com">Topten Software</a>
    <a href="https://github.com/toptensoftware">GitHub</a>
</div>

Footer

The footer area appears at the bottom of the main article content and is sticky to the bottom of browser window:

<footer>
    <!-- Text/links on RHS of footer -->
    <div class="rhs">DocBrowser</div>

    <!-- Text/links on LHS of footer -->
    <a href="https://www.toptensoftware.com">Topten Software</a>
</footer>