04 Different sidebars and footers

4Different sidebars and footers

It was mentioned earlier (section 3.3 ) that the PS Wiki pages require the ability for each Wiki page to have its own sidebar and footer (rather than using the default sidebar and footer created using GitHub). It turns out that this is remarkably easy, the only problem being that it has to be done on a local machine and then pushed to GitHub. It can’t be done via the GitHub website directly.

To make a sidebar and footer unique to a page, or to a group of pages, simply put the page in a subfolder and then create the files _Sidebar.md and _Footer.md within that same subfolder and the these will be used in place of the default sidebar and footer files in the root directory.

It can be seen here for the PracticalSeries PAL Software Wiki:

^{Figure 4.1 — Individual sidebars and footers for different pages}

GitHub Wikis always use the _Sidebar.md and _Footer.md files in the subfolder containing the page being displayed in preference to those in the root folder.

In the image above, both the CaseNotes.md and Licence.md pages have the same sidebar and footer, this is because they are both in the same subfolder 00-0000.

It really is that simple.

If there is no _Sidebar.md or _Footer.md files in the current subdirectory, GitHub will use the default _Sidebar.md or _Footer.md file in the root directory (containing the Home.md file) instead.

⬆️ Top

4.1How sidebars work

Sidebars are just an area that appears at the top-right side of the page, the PAL Software side bar for the home page looks like this:

^{Figure 4.2 — Sidebar arrangement}

By default, the sidebar is 296 pixels wide (it won’t get any wider than this irrespective of the browser window size) and has a usable area that is 262 pixels wide.

If the browser window width contracts to less than 996 pixels wide, the sidebar is reduced in width to 256 pixels with a usable area that is 233 pixels wide (see below):

^{Figure 4.3 — Reduced with sidebar for smaller browser windows}

The main content window also begins to narrow at this browser width.

If the browser window width drops below 752 pixels, the sidebar is moved from the side to the bottom of the page (ironically, it appears after the footer).

Sidebars are generally used to provide a user configurable table of contents, and this is exactly what the PracticalSeries Wikis do:

⬆️ Top

4.1.1The PracticalSeries sidebar

The PracticalSeries Wiki sidebar shows the contents of the Wiki with the section applicable to the current page expanded and all other sections collapsed to just the chapter number.

The sidebar also provides a fairly simple navigation bar, both are highlighted below:

^{Figure 4.4 — Components of the PracticalSeries sidebar}

Everything in the sidebar is user configurable (by default, the sidebar is entirely empty). In the case of the PracticalSeries Wiki sidebar, the title (of every sidebar) is always ${\large \color{#1F883D}\text{Wiki\ contents}}$. The identifier shows the associated folder number in abbreviated form (see section 15.2 and section 16.6.2 for details of how to produce these images).

The navigation bar is a simple tool for navigating between previous and next pages, the home screen and previous and next chapters, the icons are as follows:

^{Figure 4.5 — Navigation bar}

Section 15.1 contains full detail of how this navigation bar is built.

Below the navigation bar is a table of contents, this shows the sections applicable to the current chapter expanded and all other chapters collapsed to just the chapter number. Any section can be expanded or collapsed by clicking the little black arrow next to the chapter number. Section 12 explains how the table of contents is constructed and how the collapsing arrangement works.

⬆️ Top

4.2How footers work

Footers are just an area that appears at the bottom of the page (same width as the main page content), the PAL Software footer like this:

^{Figure 4.5 — Footer arrangement}

By default, the footer is 897 pixels wide (it won’t get any wider than this irrespective of the browser window size) and has a usable width of 850 pixels.

If the browser window width contracts to less than 996 pixels wide, the footer is reduced in width in line with the main contents area.

Footers are generally used to provide copyright, licence and colophonic information.

⬆️ Top

4.2.1The PracticalSeries footer

The PracticalSeries Wiki footer (see figure above) shows the same navigation bar that is used in the sidebar (see section 4.1. Full detail of how this navigation bar is constructed is given in section 15.1).

The footer also contains copyright and contact details (these are common to all footers).

Finally, like the sidebar, there is an identifier that shows the associated folder number in abbreviated form (see section 15.2 and section 16.6.1 for details of how to produce these imag-es).