Create web site design for Radria or Drag Drop Site Creator (DDSC).



====== Introduction ======

This tutorial will explain how to create web site designs - also called website templates - for Radria and Drag Drop Site Creator (DDSC).

It will use the **Design Builder** wizard.

If you do not want to use the wizard you can also [[howtos:createsitedesign|manually create web site designs]].

To get started, log into an end-user account with any template already installed on it. 

To create the design you will need the PageBuilder and Design Builder wizard.

Go in your Package Manager or Software Install & Update and check that the following packages are installed:


    template
    tiny_MCE
    pagebuilder
    contentadmin
    design_builder    


If not yet installed, install them by clicking on the **Install** button




====== Site Template Skeleton ======



Web site design for DDSC requires a number of files.

It includes a **Main** page that will be the future home page of the site, a **Design** page that will be the template for all the pages of the site and a cascading style sheet file.



The __Design Builder__ will help you in creating that skeleton.



Log into the content admin, if you haven't already set a username and password the default ones are admin / sqlfusion.

In the left menu click on **New Design** to generate the skeleton of your web site template.


{{howto:design_new.png|}}


Enter the name of your design in one word with only alpha numeric characters.



Press Continue and the skeleton of your site design will be generated.






====== Build your web site template ======
Once you have the skeleton of your web site template you can start building it using the PageBuilder.

The 3 important files that you will use are the **Main** file, the **Design** page and the **Styles**.

You will find the **Main** and **Design** pages in the drop down list of files in the PageBuilder toolbar.
To modify the **Styles** you can do it from the Style manager. (Advanced Version of PageBuilder).


The **Design** page name will look like this: design_yourdesignname.php
It is the most important page of your design template. It is the design that will be included in all the pages of the site.
It should include a Menu, a place for the logo or company name and everything else you may want.



The **Main** page name will look like this: yourdesignname_main.php 
It will become the home page of the site when installed on a web site. It usually contains samples of images and text to get the users started.

We strongly suggest that for all the text elements you uses styles from your design skeleton style sheet. They are prefixed with the name of your design.
You can add or modify the styles using the style manager in the PageBuilder tool bar.


If you want your web site design to have a skeleton of pages you can create new pages by doing a __Save As__ of the **Main** page (yourdesignname_main.php) or **Sub** page (yourdesignname_sub.php). If you want to add a background color to the pages of the template, you will need to do so in both the page **Main** and the page **Sub**.

Once you have completed the template, come back to the content admin and choose Package a design to generate an installable package of your design.




====== Generate an installable package ======

Once you have built your **Design** page and your **Main** you can generate an installable package of your web site template.
Open the content admin and click on __Package a design__. Select the design you want to package.

On the next screen:
{{howto:howto:design_select_file.png|}}

Select the files that are needed for you site template, images and pages. All the required files are automatically pre-selected by the wizard.
To select files check the box on the left of the file name.

When you're done, press __Continue__.

You will be taken to the package download page, where you can download your new web site template package. It will be in green.