In theory you can create any type of files and web sites templates and just package them to make them available to there customers. But we have setup a few guideline and structure to enable a better compatibility and auto installation of the design packages.

To create the design you will need the PageBuilder and a File Manager.

Go in your Package Manager or Software Install / Update and install:

  filemanager 
  template
  tiny_mce
  pagebuilder

A web site design will needs the following files:

 yourdesignname_main.php
 yourdesignname_sub.php
 design_yourdesignname.php
 includes/design_yourdesignname.css
 includes/design_yourdesignname_header.inc.php
 includes/pb_defaultnewpage.tpl

in each of these files you replace, yourdesignname by the name of your design. For maximum compatibility we suggest that the name of your design doesn't include any special caracters or spaces. Also all lower cases names are prefered.

The naming is important because it is what enable a lot of the automation for your Users.

The files in the includes directory need to be created from the File Manager. Open the File Manager if you are not user admin log out and log back in with

Username: admin
Password: sqlfusion (default password, change it)

The pages that will contain your design.

The home page of your site, is the first page users will see when they arrive on site. The files is called: yourdesignname_main.php And it will be automatically renamed index.php when installed by the drag drop sitecreator and the first design.

This page is optional, if you dont want the home page to be different than the other pages of the site, then this page will just be a exact copy of the your design_sub.php page.

Create this page in the PageBuilder.

You can add anything you want, text, images, scripts…. We suggest to add in it an Auto Create Menu, you will find it in the Tools, Menus.

This is the most important page for your design package. The design page is required it contains elements general to the entire web site. Its a page included in all the other ones. In general it contains, Company name, logo and a menu. Everything that you want to have in all the pages of the site.

Create this page in the PageBuilder with the name: design_yourdesignname.php

For the menu we suggest the Auto Create Menu , you will find it in Tools, Menus.

This is the default Page, for all the pages in the site. Very often this page doesn't contains elements and just include the design_yourdesignname.php page To include the design_yourdesignname.php page, open the include manager and in the last drop down select layers/design_yourdesignname.php.

The includes files are used to automate and set a default header and style sheet for your design.

Go in the includes directory and in the File menu select Create cascading style sheet. Give it its name: design_yourdesignname.css And past the sample code bellow, this is just a sample, you can set any style sheet information you want.

 
.yourdesignname_title {
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: 666666;
    border-style: solid;
    border-width: 1;
    padding: 4px;
    background-color: cccc66;
}
 
.yourdesignname_text {
    font-family: Arial;
    font-size: 12px;
    text-align: left;
    color: 000000;
    line-height: 16px;
}

To include css or javascripts files in the header of the site create a file with a .header.inc.php extension at the end of the file name. In that file you can directly type the HTML includes:

<link rel="stylesheet" type="text/css" href="includes/design_yourdesignname.css">

The template page is a template used for any new created page.

When the users will create a new web page in the PageBuilder the content of that page will be used to create the default content. In general its very similare to your yourdesignname_sub.php page, and include the design_yourdesignname.php and the includes/design_yourdesignname_header.inc.php

This page is the same for the entire site.

Create a text file called : pb_defaultnewpage.tpl

 
<?php 
  $pageTitle = "Page Title";
  $Author = "Your name";
  $Keywords = "Pagebuilder web site creator";
  $Description = "Webpage content summary";
  $background_color = "white";
  $background_image = "images/background_yourdesignname.gif";
  include_once("config.php");
  include_once("includes/header.inc.php");
  include_once("layers/design_yourdesignname.php");  
  include_once("includes/footer.inc.php");
?>