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>