BannerOS Quick Start Guide for Web Developers

In this document, we'll introduce a few of the main components of the BannerOS Platform to get you started. BannerOS is a marker based content management system that utilizes jQuery and Bootstrap 2.3, allowing a high degree of control for developers to build a website while providing user friendly interfaces so non-developers can maintain the website.

This document assumes that you already possess knowledge of HTML, CSS and content management systems. We also recommend familiarizing yourself with Bootstrap 2.3, particularly its 12 column responsive grid and the navbar component. BannerOS provides tools to help utilize these Bootstrap components, and we'll be covering these topics in more detail in upcoming videos. You can review the online documentation for Bootstrap at

Shell Templates

The Shell Template is where you specify your website's template HTML and head contents resources. Shell Templates are accessed via the Design menu.

When you create a new Shell Template or view the Default Shell Template (available upon initial installation), you'll notice that the Head Contents box is pre-filled with several CSS and Javascript references. These files are included with each BannerOS installation and are required in order to make the most of BannerOS's built-in components. These files include jQuery, Bootstrap, and default styles and javascript for front end website elements. Failure to include these required resources may result in lost functionality.

Head Contents

The Body Contents section of the Shell Template requires the {bodyContents} marker. This marker pulls in the actual page content for each page you create for your website. When you create website pages, you'll choose which Shell Template should be used for that page.

Body Contents

Its best practice not to include any actual content within the Shell Template, especially if the website will be maintained by non-developers. BannerOS offers several marker-based components that can be added to Shell Templates in order to make the content of these elements easier to edit by non-developers. These components include Site Navigation, Content Blocks, Sliders, and more. (See below for more info on these.)

Body Templates

Body Templates control the layout of the main content area for each website page. A single column Body Template is available in BannerOS upon initial install but you can create additional multi-column / multi-row Body Templates as needed. When you create website pages, you'll choose which Body Template should be used for that page.

Stylesheets and Scripts

BannerOS has built-in editors that allow you to create CSS and Javascript files without the need for FTP access. The Stylesheet and Script editors are accessed via the Design menu.

Stylesheet Editor

The contents of your stylesheets and scripts are automatically written to physical files on the server. You'll need to add references to these files to your Shell Templates or Pages as needed. You can find the file path for each stylesheet or script via the Options menu for each item by clicking the More Info... link.

Stylesheet Editor

Note that when adding or editing stylesheets and scripts, it can take up to one minute for the physical files on the server to reflect saved changes. Because of this limitation, the stylesheet and script contents can be accessed directly from the database by using the following paths in your head contents references. These paths should only be used during development. Production sites should reference the actual .css and .js files.

<link rel="stylesheet" href="/os/resources/stylesheets/">
<script src="/os/resources/scripts/"></script>

(Update the id parameter to match the ID of the stylesheet or script you'd like to reference.)

The contents of defaultBos.css can be referenced directly from the database using this path:

<link rel="stylesheet" href="/os/resources/stylesheets/"> (no id parameter)

In future videos, we'll explore the Stylesheet and Script editors in more detail.

Media Manager

This is where you can upload images, PDF's, videos, and other media files for use throughout your website. The Media manager is accessed via the Media menu.

The file path for each piece of Media is displayed after uploading, and can also be found by clicking the URL button from the main Media listing. Media can be added to Shell Templates or Pages via the Insert Dynamic Content drop down located near the WYSIWYG editor when editing a template or page.


The Pages manager is where you create the static pages of your website. The Pages manager is accessed via the Content menu.

Pages Manager

The Pages manager gives you control over all of a page's attributes including title, meta description, additional head contents, and of course, the actual page content itself.

Site Navigation

The Site Navigation manager provides a visual drag and drop list-style interface to create horizontal or vertical nav lists. These elements use Bootstrap's navbar and nav list markup. Note that when creating drop down menus, the top level link only triggers the menu and does not link to a page, as is the default behavior of Bootstrap 2.3 drop downs.

Site Navigation markers can be added to any Shell Template or Page.

Site Navigation

Content Blocks

Content Blocks are reusable, marker-based blocks of content that can be placed on any Shell Template or Page. Content Blocks are most often used for template elements that remain consistent from page to page, such as your website's logo or footer contents. Using Content Block markers on Shell Templates makes the site easier to maintain for non-developers, allowing them to edit the content of these elements without the risk of unintended changes to template code.

Content Block markers can be added to any Shell Template or Page via the Insert Dynamic Content drop down located near the WYSIWYG editor when editing a template or page.