DocBrowser v0.9

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"/ >

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

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>

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="">Topten Software</a>
    <a href="">GitHub</a>

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

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

    <!-- Text/links on LHS of footer -->
    <a href="">Topten Software</a>

Subscribe for more like this. No spam, just fun tech stuff :)

Or, find me on Twitter: @toptensoftware.