Jumbo Template Development Basics

 

 

Before I go on explaining how to make Jumbo templates, it is important to understand what a Jumbo template is, so here it is:

A Jumbo template is simply a web page that holds as little content as possible. The template is simply a generic blueprint for creating web pages. The standard Jumbo download includes a sample template for you to have a look at - It may be helpful to look through it as you read through this article.

 

Jumbo templates consist of the following 3 parts:

  • A HTML file
  • A CSS file
  • Assets (images and media) which are used as part of the template

The first thing to do when creating a Jumbo template is to create a folder on your computer that will hold your template files - the name of that folder is not important but for the purposes of this tutorial, we will refer to this folder as the 'main folder'. 

Inside this main folder, you should create a folder called 'assets' - This folder will hold all the assets that you will use as part of your template's design.

 

Still within your main folder (next to the assets folder), you should create a .html and a .css file - The names of the files are not important.

 

A finished template's directory structure should look something like this:

 

+ main folder/

+ index.html

+ stylesheet.css

+ assets/

+ header.jpg

+ background.png

+ logo.png

...

 

Once you have this structure, you can start writing your template. Appart from the contraints mentioned above, there is no real limit as to what you can do...

Just make sure that all your assets go inside the assets folder, all your CSS goes into the .css file and your HTML code goes into the .html file.

You can start writing your template using a combination of regular HTML, CSS and JavaScript and you should end up with something that looks like an empty web page.

 

The template should be as generic as possible and shouldn't contain any page-specific content or navigation bars - Just leave empty DIVs where content and navigation links/buttons are going to go - These empty DIVs will act as placeholders for various types of content (this will be discussed later).

 

Once you have finished your basic template, you need to add a special attribute to each DIV to let Jumbo know how to handle them.

To do this, you just need to make a few changes to your .html file.

 

All special Jumbo DIV tags need an id and a class attribute. The id of each div can be set to anything you like (just make sure that each one is unique for that template). The value of the class attribute depends on what type of DIV you want - It should be set to one of the following depending on what functionality you want the DIV to carry-out:

 

Class Name Functionality
m_contentslice

DIVs that are set to this class will serve as containers for content.

This is the simplest type of slice in Jumbo; all it means is that the DIV will contain some text and will be editable by

the user.
m_globalcontentslice

This type of DIV is similar to the one above except that the content of this one will be shared between all

pages that are based on this template. This type of DIV is ideal if you want it to hold content that is the same

on all pages of your website - For example, the DIV that will contain the header of your website.
m_navslice

Nav slices are DIVs which hold special Jumbo navigation bars. In Jumbo, navigation bars are generated automatically -

This allows the user to add an unlimited number of pages to their website and then lets them drag and drop those

pages directly into the navbar area. You can specify the style of your Jumbo navigation bars using a combination of 

Jumbo Navstyle (more on that later), CSS and JavaScript.

 

Note that when a DIV is assigned one of the special class names above, Jumbo will remove all its content and replace it with whatever the user wants to put in there at edit-time. Also, you may want to set the CSS min-width and min-height properties of your DIVs so that they are always visible even when they are empty of content. 

 

Once you have labeled all your special DIVs with ids and class names, all that's left to do is specify the style of your navigation bars (if your template has any) - Navigation bars in Jumbo can be quite flexible and are really quick to implement. But to do it, you need to use a simple CSS-like language we call Navstyle.

 

To learn how to use Navstyle, click here.