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, 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, particularly its 12 column responsive grid and the navbar component. BannerOS provides tools to help utilize these Bootstrap components. You can review the online documentation for Bootstrap at http://getbootstrap.com/
Shell Templates Setups
Shell Template Setup Preferences allows you to define which extra bundled resources are enabled on your shell templates.
Options include Doctype, Viewport Meta, Jquery, and Bootstrap (2, 3, or 4). You can also include Font Awesome, Nivo Lightbox or Nivo Sliders.
You can opt to exclude those resources and manually specify links to your own resources directly within the shell template.
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 will be able to add additional head contents to add support for more custom styling or more Javascript/jQuery components.
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.
It's 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.
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.
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.
(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:
(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.
Pages
The Pages manager is where you create the static pages of your website. The Pages manager is accessed via the Content menu.
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.
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.