Knowledge Base

Answers to Common liveSite Questions

Back to Knowledge Base

Site Design

How do I add my own web design?

If you decide not to start with one of the built-in design themes, you can port any HTML/CSS website design into liveSite. liveSite supports HTML created using any web authoring tool, such as Dreamweaver, FrontPage, and even Notepad for those hard-core web designers!  In a few minutes, you can create a dynamic, data-driven website from your own HTML designs.

To port your own designs to liveSite, you will need to create one or more liveSite Page Styles and then assign your liveSite Pages to use these "styles". Here is how you do it:

1) Design an HTML page with the look and feel you desire using your favorite web authoring tool and save it as an HTML file.

2) Create a ZIP file containing all the supporting files that are referenced in your HTML file (images, photos, flash and video objects, css files, javascript files, etc).

3) Login to liveSite and go to the [DESIGN] tab and click on 'Design Files' link, and then click [Upload File] to upload the ZIP file. liveSite will ask you if you want to automatically expand the ZIP file contents. Click [Yes].  Now all your supporting design files are now uploaded to your web server and ready to use in your designs.

4) Open your HTML file in a text editor like NotePad, and copy it to your computer's clipboard. Goto the [DESIGN] tab (You must have Designer Role in order to see this tab) and create a Custom Page Style and paste your clipboard into the empty Page Style.

5) Within your new Page Style, replace all relative or absolute pathname references to your supporting design files (images, css files, etc ) with /files/filename.  This is necessary since liveSite stores all files you upload in one secure location on the web server. You reference the alias of this secure location as /files/. Save the Page Style.

6) Check your work by going to the [PAGES] tab and creating a new page by clicking on [+Page].  Name the page and be sure to set the "Style" field to the Page Style your created and named in the previous step. If you have completed the steps correctly, your new liveSite page should display exactly like the original html page.

7) If the page your created looks right, you need to add liveSite interactivity to your new Page Style. Go to [DESIGN] again, and edit the Page Style.  Locate the areas of your original html that you wish to define as editable content areas.  There are usually a main content area and a sidebar area, a header area, and a footer area.

8) Once you have idenified these areas, you will need to add Page Region tags, Common Region tags, a Menu Regions tag, and a System Region tag to the Page Style by inserting the following liveSite tags within your html code.  See Page Styles in th Users Guide for more detail the tags available and how to insert them.

9) Once you have added the liveSite tags, you can create any number of pages using the Page Style, and the Page Properties on each page will dictate the interactivity of the page.  These pages will inherit the design and layout of the Page Style.  Any future changes to the Page Style will change the display of each page that is assigned to that Page Style.

10) Repeat this process to create as many Page Styles as you need for your website's design.  Most websites have at least two Page Styles: one for the home page and one for the interior pages.  Each Page Style can have a completely diffferent design and layout.


3 Feedbacks
Added by tafgraphics ELITE

I would like to add multiple "System Region" tags into my custom code. I notice that the system designer allows for mutiple but pulling from different system pieces, i.e. blog and calendar on the same page.

What code or workaround can I use to do the same thing in my custom code?
Added by Camelback Web Architects STAFF

Just add <system>PageName</system> to any Custom Page Style to pull in the System Region of the PageName.
Added by tafgraphics ELITE

Oh that is awesome! I will give that a try. Thanks. T ;)
Add Feedback:
Was this page helpful? Please let us know how we can improve it.
Please login or register to add your feedback.