Select Plan

Docs

All Page Styles

This screen displays all of the Page Styles defined for the website, and whether or not they are being used by any Page or Folder.

Page Styles account for the "look and feel" of each Page, and can be defined at the Page level or the Folder level, so you can create one look for the entire website, or make each area of your website look different.

Page Styles control the overall layout of each Page, so it will define the number and location of the Menu Region, Common Regions, and Page Regions that are editable by your Site Managers and Content Managers.

Page Styles also define the location of any additional Designer Regions, Dynamic Regions, and Login Regions that only your Site Designers have access too.

Page Styles are the containers that hold the complete HTML page (HTML, javascript, CSS, images, etc.) that surround each Page and it's content.

To better understand Page Styles, consider this example: A print magazine might have the follow page layouts:

  • Cover
  • Table of Contents
  • Articles
  • Feature Story
  • Advertisements

Even through there are only five layouts, an entire 120 page magazine can be built with them. This provides consistency in the design, and simplifies the printing process.

Page Styles work the same way, only for your website. So even if you have a 1,000 page website to build, you may only need four Page Styles:

  • Home Page Style
  • Interior Page Style
  • Pop Up Page Style
  • Contact Us Page Style

You can also create Mobile Page Styles so you can display any design or layout that best fits a mobile phone screens and liveSite will automatically detect the device and switch Page Styles. Two Page Styles can be made available for a Page to use. One for desktop (computers and tablets) visitors and one for mobile (phone) visitors. The system will automatically detect and switch Page Styles based on the device that accesses any web page on the site. We recommend that your Site Designer add a Mobile Switch Region to all Page Styles so any site visitors can choose which Page Style they wish to view regardless of the outcome of the automatic detection.

Of course, you can add as many Page Styles are you need for your website.

Searching Styles

You can enter a search term in the box on this screen and search for any Style by it's properties.

Creating Page Styles

To create a Page Style, click on "Create Page Style".

Modifying & Deleting Page Styles

You can modify or delete any Page Style that is not being used by a Folder or Page. For safely sake, liveSite will not allow you to delete a Page Style that is in use by a Folder or Page.

NOTE: It may be important to know that some javascript code snippets may be inserted into Page Styles dynamically as they render Pages. These code snippets provide support for built-in features including Who's Online, Chat, and Google Analytics. These snippets are designed to be compact and not interfere with any other valid code you decide to include in your Page Styles. However, no code snippets are included for Pages when they are sent as E-mail Campaigns as they can cause delivery or viewing issues for recipients.

Create Page Style

The screen allow you to create new Page Styles to be used to define new content layouts for your website (it's the HTML framework essentially). "System" Page Styles can be easily manipulated with the built-in Style Designer without coding. If you are an HTML coder, or you wish to create your website using fully-responsive frameworks like Bootstrap, you can also create your own "Custom" Page Styles from scratch so there are no limits to the layout of the site you can create. You can even mix these two Page Styles if you have complex website requirements or integration needs with third-party web services.

 
What type of Page Style do you want to create?
System
System Page Styles are based on popular web page layouts and are created for you. That is to say, liveSite will generate and store the HTML for all System Page Styles.

System Page Styles were designed so you don't have to know any HTML coding, and enjoy error-free HTML pages.

To create a System Page Style, simply pick the layout of the System Page style you wish to start with and Continue. The Style Designer will be launched and you can begin adding your content regions within the layout you selected. System Page Styles can then be edited at any time.

IMPORTANT: If you want to define a System Page Style that will be used to display it's associated Page automatically whenever a mobile (phone) visitor is detected, you MUST select the "1 column, Mobile" Page Style Layout. All other Page Style Layouts will only be visible to Desktop (computers and tablets) site visitors.
Custom
Custom Page Styles allow you complete freedom to add your own HTML, creating your own unique content layouts. You can import any existing website design or a website template into Custom Page Styles. You will be required to add system tags to identify where you wish content and interactive features to be placed.

To create a Custom Page Style, simply select Custom and Continue. The HTML editor will be launched and you can begin adding your HTML and adding your content tags. Custom Page Styles can be edited at any time.

 

TIP: You would use more Page Styles if you are creating not only a public site, but a staff intranet site, a members-only portal site, or an extranet for your clients, each with their own menus and common content - and all within the same website!

Take care when modifying or deleting Page Styles, Theme files, and Designer Files. Making a mistake could cause your website to be unusable. There is no undo!

Style Designer

The Style Designer has been replaced in more recent versions of liveSite with the combination of the Page Designer + Custom Page Styles + Custom Themes to allow for other popular responsive HTML grid systems such as Bootstrap and Foundation to be used.

The Style Designer is used to create and edit System Page Styles, which are pre-built HTML grid layouts for Pages. You don't actually add your text and photos here. Instead, you add placeholders for liveSite Regions which will be replaced with your content and built-in features when a Page is displayed that uses the Page Style.

Page Style Name

Name:

Enter the unique name for this Page Style.

TIP: Create a naming system for your Page Styles so you can remember how many columns each Page Style has and add something descriptive to help you remember the important content regions that are unique to this Page Style.

 
Add or Remove Cells and Regions in the Page Layout below

Social Networking Position:

Select the position around the Primary System Region ("Use Page") where you would like the Social Networking features to appear. You can also select "Disable" to hide the display of the Social Networking features for this Page Style.

NOTE: The Social Networking features are enabled and configured in the Site Settings.

Empty Cell Width:

You can define the width of any emtpy cells in your Page Style, by setting the Empty Cell Width field value. You can use empty cells to create spacing between other cells. (You can leave this field blank if you want the width of empty cells to be the same as other cells in the same row which is the default.)

Page Layout:

Each Page Style is associated with a single layout when it is created. Layouts are designed for common page structures for 1 column pages, or 2 column pages with a sidebar, mobile pages, and emailer pages, for example. You cannot change a Page Style's layout after it is created, but you can create an unlimited number of Page Styles, one for every single Page if you need too!

Page Style Areas

Within all Page Style layouts, there is are certain areas that have been predefined and consistent across all System Page Styles. These areas, like Site Border, Site Header, Site Top, etc., are indicated with a solid line surrounding their area of influence. These "wrappers" give the Theme Designer the "hooks" it needs to attach graphical styling elements to these areas within all Page Styles so all Pages on the site can share common graphical elements using a single Theme.

Adding Content

To add content regions to your Page Style, simply add rows and columns to any of the predefined content areas within the layout. You do this just as you would if you were creating a table with cells in a document.

You'll notice that you can't change the rows height or the columns width. This is not necessary here. Only each region's location and relation to other regions around it is important to the Page Style. You see, the height will be determined by the amount of content you add, ever-expanding to contain whatever is placed within the regions. The width of each column, or area of the layout, is dictated by the number of cells in a row, and can be overriden by any Theme used to display the Page Style.

Mobile Page Styles are displayed with a lime-green border for easy identification. Mobile Page Styles are limited to one-column layouts since sidebars would be unusable when viewed from a mobile phone. The only difference between Mobile Page Styles and all other (desktop) Page Styles is the Site Border area has been replaced by the Mobile Border area. The Mobile Border is used by the Mobile Themes to "float" the Page content to the entire width of the device displaying it.

NOTE: You don't have to assign a content region in each area or cell. Empty areas and cells will contain nothing on the Pages that display them, however, but the space it occupies will still contain spacing and styling if defined in the Theme).

Regions

There are a number of types of "regions" you can assign to any cell in your Page Style layout. Each region replaces the cell with content when a Page is displayed that uses the Page Style. The following is a list of the regions available:

Page Regions

Page Regions are replaced with content (text and photos) you add through the Rich-text Editor. Even though you are creating and adding them on the Page Style, they are actually created for each Page when that Page is assigned to the Page Style. Page Regions are referenced in the order they are added to the Page Style, from top left to bottom right. So if you remove a Page Region from your Page Style, the remaining Page Regions will be renumbered. Since Page Regions are created within each Page, removing Page Regions from a Page Style does not delete the Page Region or it's content, it only hides it from view. (If you delete a Page Region from a Page Style, you can add it back anywhere in any Page Style and your content will reappear!)

System Regions

System Regions are replaced with the interactive features (Login Pages, Custom Forms, Calendars, Form Views, Product Catalogs, Photo Galleries, Order Forms, etc.) from the Page being displayed itself, or another Page. If a Page name is specified in the System Region, then the interactive feature (Page Type) for that Page will be inserted into that location. Alternatively, if "Use Page" is specified, then the interactive feature for any Page itself will be inserted into the location. Each Page Style must include at least one "Use Page" System Region (even if its not used).

Pages with the following Page Types are allowed to be selected for a System Region:

  • Calendar View
  • Catalog
  • Custom Form
  • Express Order
  • Folder View
  • Form List View
  • Form View Directory
  • Order Form
  • Photo Gallery
  • Search Results
  • Shopping Cart
Common Regions

Common Regions are replaced with content (text and photos) you add through the Rich-text Editor. Common Regions allow you to create content that can be shared across one or more Pages throughout your website. Common regions must be created first, and then can be added to any Page Style.

Designer Regions

Designer Regions are replaced with HTML content (javascript, etc). Designer Regions allow you to create and place code widgets that can be shared across one or more Pages throughout your website. Designer Regions must be created first, and then can be added to any Page Style.

You can embed other Regions in Designer Regions. For example, if you want to embed a Common Region in a Designer Region, simply enter "<cregion>example</cregion>" into the code of the Designer Region. This is similar to how you embed Regions in Page Styles. You can even embed Designer Regions inside other Designer Regions (only one level of embedding is supported though).

Dynamic Regions

Dynamic Regions are replaced with PHP code that will be executed by the web server. Dynamic Regions allow you to create and place PHP code that can be shared across one or more Pages throughout your website. Dynamic Regions must be created first, and then can be added to any Page Style. For security reasons, your Site Administrator must enable Dynamic Regions before they can be used.

You can have Dynamic Regions output other Regions. For example, if you want a Dynamic Region to output a Common Region, simply code the Dynamic Region to output "<cregion>example</cregion>". This is similar to how you embed Regions in Page Styles. Please be aware that Dynamic Regions cannot output Designer Regions.

Menu Regions

Menu Regions are replaced with the animated drop-down or accordion style menus you can add items to from the Edit Page screen. Menu Regions must be defined first before you can add them to your Page Styles. (See the IMPORTANT note below.)

Ad Regions

Ad Regions are replaced with the animated sliding or fading ads (text and/or photos) you can create from the Ads tab. Ad Regions must be defined first before you can add them to your Page Styles. Ad Regions are the only regions that must have a predefined width and height for it's animation to work. (See the IMPORTANT note below.)

IMPORTANT: Menu Regions and Ad Regions require an extra step after you add or even move them from cell to cell within your Page Style. Once you have added or moved a Menu Region or Ad Region within your Page Style and saved it, you need to navigate to a Page that uses your new Page Style. Then go into "Theme Preview" mode and edit your site's Theme within the Theme Designer and just resave the Theme. By resaving the Theme, the Theme Designer will generate the proper code to make the animation for your Menu Region or Ad Region work. If it is a new region, the animation may not still work, so you will need to reedit the Theme and find the fold that contains the new region and update it's dimensions until it works to your liking and save the Theme.

Chat Region

The Chat Region will be replaced by the online/offline chat buttons from the Site Settings and the built-in chat code to allow your site visitors to chat with your chat operators. This feature is a purchased upgrade. If you do not sign up for the a chat plan, the Chat Regions will display nothing and have no affect on your Page Styles. See the Who's Online feature for more information.

PDF Region beta

PDF Regions will be replaced with a PDF icon that will allow Visitors to view any Page as a PDF (e.g. to save or print). This is a beta feature that might not work for your site. This feature requires the wkhtmltopdf utility which your server administrator may install. Your server administrator may read the installation guide for more information.

Mobile Switch Regions

Mobile Switch regions are replaced with either a "Full Site" link or a "Mobile Site" link. These links are dynamic toggle the Visitor between Mobile Mode and Desktop Mode. So, for example, if the current Visitor or User is viewing the site in Mobile Mode and clicks the link, the Page will be display in the new mode and vice versa. This allows your Users and Visitors to change their mode of display at any time regardless of the device detection features of liveSite. Keep in mind that each mode displays the Page with the associated Page Style and Theme defined for that mode.

Please be aware that the mobile site setting must be enabled in order for the mobile switch to appear.

Override the activated Theme

Theme:

Select a Theme if you want this Page Style to always use a specific Theme instead of the Theme that is activated for the site. This feature is useful if you are building out an area of the site that has a different design than the rest of the site or if you are working on a new site design. You may leave this field unselected if you want this Page Style to use the activated Theme for the site.

If you select a Theme for this field then the rich-text editor will load that Theme instead of the activated Theme, when editing a Page.

If you are previewing a Theme then that Theme will be used instead of this Page Style's Theme or the activated Theme for the site.

Add Additional Classes to the Body of this Page Style

Additional Body Classes:

Enter one or more CSS classes that will be included in the body tag (e.g. home dark large). You should separate multiple classes with a space, and you should not include a period before the class name. The layout and Page Style name classes will still be included in the body tag if you choose to add additional body classes. You can use this feature to add the same class to multiple Page Styles, so that you can affect all of them in a certain way.

Collection:

Select the Page Style Collection (A or B) you wish for this Page Style to display. Each Page contains two independent collections of Page Regions, and other Page Properties so when a new page design requires different content and layouts, two version of the same Page can be handled by liveSite, controlled by the Page Style assigned to the active and previewed Themes.

In addition to Page Regions, the Collection also controls which content is displayed for several Collection Fields for Form List Views & Form Item Views. v2017.1

Other fields that are not listed above (e.g. "Enable Search" for Form List Views) are not affected by the Collection. This means that the setting for non-collection fields will affect both Collections.

When a User is previewing a Page Style that has a different Collection than the activated Page Style's Collection, then when the User edits the Form List/Item View, he/she will be able to edit the Collection Fields for the appropriate Collection. A notice will appear to the User on the Edit Form List/Item View screen that explains this.

NOTE: Changing Collection does not delete or remove any Page Regions or Collection Field content so you can switch back and forth between Collections without losing any content.

View Source

Page Styles are nothing more than the simple HTML page structure that will contain your content and interactivity. Click 'View Source' to take a look under the hood and the HTML code that is generated. It includes CSS classes for the Theme Designer and coders alike to "hook" their own custom CSS into to manipulate and style just about everything displayed! You can also add your own code to the Page Style's HTML <head></head> tag.

View Source

For Designers that want to look under the hood, this screen is helpful by displaying the underlying HTML page* that is created by the Style Designer*, and optionally append HTML code to the <head></head> tag.

Additional Head Content

Although the Source needs to remain unaltered for liveSite to work well, System Page Styles can be expanded with additional functionality by placing code in the <head></head> tag of the Page Style. This is ideal if you need to add third-party widgets, javascript functions and libraries, or including CSS files to override all or part of the active System Theme's CSS.

You can enter any valid HTML into the Additional Head Content area. Click 'Save & Preview' to update the Source and view your changes in the Sourve window. Click 'Save & Return' to add your head content and return to the System Page Style. Click 'Cancel' to abort you most recent 'Save' operation.

The / tag can be inserted anywhere in your HTML and is replaced automatically with the absolute URL to the location where your system software was installed. You should always use the / tag if you need to reference any uploaded files within your HTML. This makes your links portable, so if you ever need to move the software system to another directory within your web server, your hand-coded links will still work.

Let's look at a typical example.

Say you want to link to a CSS file (example.css) that you uploaded through the Design Files within the Control Panel. However, you want to be sure that the link is portable because your web server administrator originally installed liveSite software into a temporary directory that looked something like this: http://192.168.0.1/~example/ and will need to move liveSite software to http://www.example.com/ once you have setup your domain and are ready to launch the site.

So if you hard-code your link to example.png file like this:

http://192.168.0.1/~example/example.css or
/~example/example.css

Then when liveSite software is moved later to another directory, this link would no longer work. So instead, be sure to link to the file using the / tag:

/example.css

The / tag is only necessary within your custom HTML such as Custom Page Styles, Editable Head Content in System Page Styles, Designer Regions, and within custom CSS files. The / tag is not necessary when adding links through the Rich-text Editor. These links will be converted automatically for you when the content region is saved.

NOTE: If you are the web server administrator and move liveSite to another directory off of your webroot after installation, be sure to update your .htaccess file per liveSite's installation / update instructions.

Source (read-only)

The Source is a read-only copy the currently saved System Page Style. This HTML code has been designed to work specifically with the active Theme (CSS file generated by the Theme Designer) and to be as compact as possible, and render well on all popular browsers and web devices.

TIP: View Source makes it even easier to create special function Custom Page Styles within your website, even if the rest of your site is using System Page Styles and the active Theme. Paste the entire Source into a new Custom Page Style, add your own additional HTML code to it, and create specialized pages within your site that still inherit their design from your active Theme!

TIP: The System Page Style Name and Page Style Layout is added to the <body></body> tag of all System Page Styles to provide more flexibility and control over styling. Couple this with the ability to add your own CSS advanced styling within the Theme Designer and you can code some highly custom designs using only System Page Styles and System Themes!

* It may be important to know that not all HTML code is displayed within View Source. Additional javascript snippets are included when a Page is rendered if any of the built-in features including Who's Online, Chat, Social Networking, or Google Analytics are enabled. These code snippets are completely invisible and will not alter content or design in any way. These code snippets are NOT included when Pages are e-mailed through the E-mail Campaign feature. See Site Settings for more information. In addition, the JQuery javascript library is also included if any animated Menu Regions or Ad Regions are found in the Page Style.

Create / Edit Custom Page Style

This screen displays a Page Style and it's properties.

Page Styles are created and modified by your Web Designer because it requires HTML programming experience.

Page Style can include any valid HTML code, so you can include Flash, DHTML, Javascript, images, CSS Style Sheets, and any other typical HTML web page elements.

Page Styles can be created using any popular web authoring tool such as Dreamweaver, GoLive, Coda, Coffee Cup, or any other web authoring tool or text editor that you prefer.

Code Editor

The Code Editor colorizes your code and adds line numbers to make it easier to read and debug. The Code Editor may take a while to "read" through your code and colorize it. This process is particularly slow on Internet Explorer browsers. We recommend the Firefox browser for faster editing throughout the website. It is free to download, and works on most desktop computers.

Page Style Properties

Page Style Name
Name:
Name of this Page Style.

It will be displayed in the Page Style selection field when editing a Page's Properties or a Folder's Properties. For security reasons, it is only visible to Site Managers.
 
HTML Page with embedded liveSite Tags
 
Add a complete and valid HTML page here. See below for an explanation of all the available Tags and how to use them.

Adding Tags to your HTML

One of the most powerful features of liveSite lies in the fact that you only have to add a handful of tags to your HTML page and you have done everything necessary to build an entire searchable website, complete with "my account" login privileges, membership management, e-commerce, custom forms, protected areas, calendars, photo galleries, blogs, forums, ticketing systems, and on, and on.

Here is a typical HTML page showing only the tags for clarity and not all tags are used:

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title></title>
          <meta_tags></meta_tags>
          <stylesheet></stylesheet>
     </head>
     <body>
          <pregion></pregion>
          <system></system>
          <pregion></pregion>
      </body>
</html>

That is all the HTML that is required to create a full-featured, database-driven website! Read on to learn more about additional tags you can add to create unique and powerful page layouts.

The Path Tag

The / tag can be inserted anywhere in your HTML and is replaced automatically with the absolute URL to the location where your system software was installed. You should always use the / tag if you need to reference any uploaded files within your HTML. This makes your links portable, so if you ever need to move the software system to another directory within your web server, your links will still work.

Let's look at a typical example.

Say you want to link to a background image file (example.png) that you uploaded through the Design Files within the Control Panel. However, you want to be sure that the link is portable because your web server administrator originally installed liveSite software into a temporary directory that looked something like this: http://192.168.0.1/~example/ and will need to move liveSite software to http://www.example.com/ once you have setup your domain and are ready to launch the site.

So if you hard-code your link to example.png file like this:

http://192.168.0.1/~example/example.png or
/~example/example.png

Then when liveSite software is moved later to another directory, this link would no longer work. So instead, be sure to link to the file using the / tag:

/example.png

The / tag is only necessary within your custom HTML such as Custom Page Styles, Editable Head Content in System Page Styles, Designer Regions, and within custom CSS files. The / tag is not necessary when adding links through the Rich-text Editor. These links will be converted automatically for you when the content region is saved.

NOTE: If you are the web server administrator and move liveSite to another directory off of your webroot after installation, be sure to update your .htaccess file per liveSite's installation / update instructions.

The System Tags

When you create a new Page Style, you'll notice that we already prefill your HTML Code with a valid HTML page to get you started.  Here is a listing of all liveSite tags that you can embed within your Page Styles.

<head>

These tags must be placed between the <head></head> tags in your Page Style.

<meta_tags></meta_tags>
This tag will be replaced with the <meta> tags and the contents of the Page's Description and Keyword fields (or, if blank, the defaults in the Site Settings). These are typically referred to as a "meta tags" and Search Engines use this information to help classify Pages.

NOTE: There should be no spaces or characters between the set of tags.  You can only define this tag ONCE in each Page Style.
<stylesheet></stylesheet>

This tag will be replaced with a <stylesheet> statement and link to a style sheet file (CSS). This tag is is ideal for Site Designers of seasonal shopping sites to easily change the entire website look and feel using a single CSS style sheet.

NOTE: There should be no spaces or characters between the set of tags. You can only define this tag ONCE in each Page Style.

IMPORTANT: You must include this tag if you are using Themes, they rely on this tag to be present in the Page Style to function.
<title></title>
This tag will be replaced with the content of the Page's Title field (or, if blank, the default Title in the Site Settings). It will display in the Visitor's browser window (title bar area). This is typically referred to as a "meta tag" and Search Engines use this information to help classify Pages.

NOTE: There should be no spaces or characters between the set of tags.  You can only define this tag ONCE in each Page Style.
</head>
<body>

These tags must be placed between the <body></body> tags in your Page Style.

<ad>name</ad>
This tag will be replaced by the contents of any rotating Ads assigned to the Ad Region called name.

NOTE: There should only be the name and no spaces between the set of tags. You can define this tag as many times as necessary within each Page Style. The name must exist or this tag is ignored.

TIP: We recommend that each <ad> tag should be contained within a <div> tag that defines the Ad Region's absolute height and width to restrict Ad content from compromising Page layout.
<cart></cart>
This tag will be replaced with the number of items and the subtotal of any active Shopping Cart present in the Visitor's current browser session. If there are no items in the Visitor's Shopping Cart, then nothing will be outputted. The number of items and subtotal will be linked to the last Shopping Cart or Express Order Page that the Visitor visited, if one exists.
<cregion>name</cregion>
This tag will be replaced with the shared contents of the Common Region or Designer Region called name.

Common Regions should be reserved for basic word processor content and can be edited from within any Page (that is assigned the Page Style) using the Rich-text Editor by a Site Manager.

Designer Regions should be reserved for HTML and code snippets and are can be edited from within any Page (that is assigned the Page Style) by a Site Designer.

NOTE: There should only be the name and no spaces between the set of tags. You can define this tag as many times as necessary within each Page Style. The name must exist or this tag is ignored.

NOTE: You can embed other Regions in Designer Regions. For example, if you want to embed a Common Region in a Designer Region, simply enter "<cregion>example</cregion>" into the code of the Designer Region. This is similar to how you embed Regions in Page Styles. You can even embed Designer Regions inside other Designer Regions (only one level of embedding is supported though).
<dregion>name</dregion>
This tag will be replaced by the contents of the shared Dynamic Region called name.

Dynamic Regions are reserved for PHP code, required integrating third-party applications and databases into your website.  

Dynamic Regions can only be edited from within the [DESIGN] area by a Site Designer.

NOTE: There should only be the name and no spaces between the set of tags. You can define this tag as many times as necessary within each Page Style. The name must exist or this tag is ignored.

NOTE: You can have Dynamic Regions output other Regions. For example, if you want a Dynamic Region to output a Common Region, simply code the Dynamic Region to output "<cregion>example</cregion>". This is similar to how you embed Regions in Page Styles. Please be aware that Dynamic Regions cannot output Designer Regions.

IMPORTANT: For security reasons, this feature is disabled and requires server authorization to enable. Please contact your Site Administrator for more information.
<?php code ?>
This tag, known as a PHP Region, will allow you to insert PHP code into the Page Style. You can define this tag as many times as necessary within each Page Style.

IMPORTANT: For security reasons, this feature is disabled and requires server authorization to enable. Please contact your Site Administrator for more information.

 

<if view-access folder-id="123">
    Content if visitor has access.
</if>
<else>
    Content if visitor does not have access.
</else>

 

This if tag allows you to only display content if the Visitor has view access to a certain Folder. Simply update the Folder ID in quotes and enter your content. To find a Folder ID, you may edit a Folder and look in the address bar of your browser. The Folder ID will be a number like "123".

If you only want to output content if the Visitor has view access, then you may omit the else tags, like the example below.

 

<if view-access folder-id="123">
    Content if visitor has access.
</if>

 

The else tags allow you to output different content if the Visitor does not have view access to the Folder. If you choose to use the else tags, they must appear directly after the if tag. There may only be white-space between the closing if tag and opening else tag.

If you only want to output content if the Visitor does not have view access, then you may use an empty if tag, like the example below.

 

<if view-access folder-id="123"></if>
<else>
    Content if visitor does not have access.
</else>

 

You may include other regions and tags in the content.

This feature works for all of the different types of Folder access control, including Guest, Registration, Membership, and Private. If a User has edit access to a Folder, then the User also has view access.

<login>name</login>
This tag will be replaced with the Login Region called name. Login Regions allow you to integrate the Login Page functionality into any Page.  This is useful if you have a Membership site and want to provide quick access for your Members to login from your home page.

Login Regions can only be edited from within the [DESIGN] area by a Site Designer.

NOTE: There should only be the name and no spaces between the set of tags. You can define this tag as many times as necessary within each Page Style. The name must exist or this tag is ignored.
<menu>name</menu>
This tag will be replaced with the shared contents of the Menu called name.

Menus allow you to create single and multi-level, javascript-animated menus for your website areas as necessary.

Menus can be edited from within any Page (that is assigned the Page Style) by a Site Manager.

NOTE: There should only be the name and no spaces between the set of tags. You can define this tag as many times as necessary within each Page Style. The name must exist or this tag is ignored.
<menu_sequence>name</menu_sequence>
This tag will be replaced with "previous" and "next" arrows that allow the viewer to navigate between the Pages of your website. The navigation arrows correlate with the Menu Items for the Menu called name, and the sequence is based on the ordering of the Menu Items. This is useful if you want your site viewers to be able to navigate your website in a sequential fashion.

NOTE: If you have more than one Menu Item linking to the same Page, then only the first Menu Item that links to the Page will be in the sequence.
<pdf></pdf> beta
This tag will be replaced with a PDF icon that will allow Visitors to view any Page as a PDF (e.g. to save or print). This is a beta feature that might not work for your site. This feature requires the wkhtmltopdf utility which your server administrator may install. Your server administrator may read the installation guide for more information.
<pregion></pregion>
This tag will be replaced with the contents of the next Page Region found within the Page.

Page Regions are reserved for basic word processor content and can be edited from within any Page (that is assigned the Page Style) using the Rich-text Editor by any Content Manager with "edit" access to the Folder where the Page resides.

NOTE: There should be no spaces or characters between the set of tags. You can define this tag as many times as necessary within each Page Style.

IMPORTANT: Unlike all other regions, you do not create Page Regions manually. They are created automatically when a Page is created, and the number of Page Regions created is determined by the number of Page Region tags found in the Page's selected Page Style.  If you change the Page's Page Style later, the number of Page Regions will grow if necessary, but never shrink. Page Regions are never deleted until the Page itself is deleted.
<system>page name</system>

This tag will be replaced with the dynamic system content for the Page's interactive Page Type (like a Custom Form, Photo Gallery, Calendar View, Order Form, Cart, etc).

If a Page name is not specified in the System Region, then the interactive Page Type for the Page the viewer is currently viewing will be used. This is known as a Primary System Region.

Alternatively, if you enter a Page Name in the System Region, then the interactive Page Type for that Page will be used instead. This is known as a Secondary System Region. Pages with the following Page Types are allowed to be entered in Secondary System Regions:

  • Calendar View
  • Catalog
  • Custom Form
  • Express Order
  • Folder View
  • Form List View
  • Form View Directory
  • Order Form
  • Photo Gallery
  • Search Results
  • Shopping Cart

There is no limit to the number of System Regions you can have on a Page.

The properties of the Page Type can be edited from within the Page by any Content Manager with "edit" access to the Folder where the Page resides.

TIP: It is a good idea to add this tag in all Page Styles since it is so important to the function of your interactivity and ignored if not necessary.

IMPORTANT: This tag is required within any Page Style in order to enable the Comments feature for it's Pages.

Controlling System Regions

The info that appears in System Regions is often controlled by query string parameters in the URL. For example, let's say that you have setup a Form List View of contacts at a school. If a Visitor searches for "athletics" on that Page, the URL will appear like the example below, where "123" is the ID for the contacts Page.

http://example.com/contacts?123_query=athletics

This will result in only contacts appearing that match "athletics".

Query string parameters affect both Primary & Secondary System Regions. You can use this to your advantage. For example, let's say that you have an athletics Page that describes the Athletics department at your school, and you want to embed a list of people/contacts, in the athletics department, at the bottom of that page. You could enter the contact info manually in a Page Region, but then you would have an extra area of contact info that you would have to manage. A better solution would be to add a Secondary System Region for the contacts Page like the example below.

<system>contacts</system>

Then, if you link to the athletics page, like the example below, where "123" is the ID for the contacts Page, only the athletics contacts will be shown.

http://example.com/athletics?123_query=athletics

The problem with this solution is that the URL is long and dirty. You would probably prefer a clean URL like the example below.

http://example.com/athletics

Fortunately, there is an even better solution. You can use a PHP region in the athletics Page Style to set query string parameters, without the parameters having to appear in the URL.

<?php $_REQUEST['123_query'] = 'athletics'; ?>
<system>contacts</system>

Now, you can simply link to the URL below and only athletics contacts will be shown.

http://example.com/athletics

You can also use this solution for other types of query string parameters. For example, if you want to set an advanced search filter on a Form List View, instead of the simple search query, for more precise filtering, you can use a solution like the example below, where "123" is the ID for the contacts Page, and "department" is the advanced search field name.

<?php
    $_REQUEST['123_advanced'] = 'true';
    $_REQUEST['123_department'] = 'athletics';
?>
<system>contacts</system>

You can find the ID of a Page in the address bar, when editing the Page properties.

Often, when you are controlling System Regions via the solution described above, you don't want to show various UI elements (e.g. simple search field, advanced search area), because you don't want to allow the Visitor to change them. Fortunately, you can hide UI elements with CSS, like the example below, for a Form List View.

<style>
    .browse_and_search_form,
    .number_of_results_message,
    .software_rss_link {
        display: none;
    }
</style>
<tcloud>search results page name</tcloud>
This tag will be replaced by a Tag Cloud. A Tag Cloud is a list of Common Keywords or "Tags" in your site. When a Tag is clicked then the user will be sent to the Search Results page that was entered between the <tcloud></tcloud> tags.

Web Browser Keywords for Pages will be included in Tag Clouds for Search Results Pages that do not search Products. Search Keywords for Products and Product Groups will be included in Tag Clouds for Search Results Pages that search Products.

NOTE: If a Search Results page name was not entered between the tags then the first Search Results page that is found will be used for the tag.

NOTE: Anytime a Page that has "Include in Site Search" enabled is modified then it's Web Browser Keywords, if any, will be added to the Tag Cloud.

NOTE: Anytime a Product or Product Group that is being searched by a Search Results page is modified then it's Search Keywords, if any, will be added to the Tag Cloud.
 
</body>
 
Additional Options
Collection:

Select the Page Style Collection (A or B) you wish for this Page Style to display. Each Page contains two independent collections of Page Regions, and other Page Properties so when a new page design requires different content and layouts, two version of the same Page can be handled by liveSite, controlled by the Page Style assigned to the active and previewed Themes.

In addition to Page Regions, the Collection also controls which content is displayed for several Collection Fields for Form List Views & Form Item Views. You can find the Collection Fields below. v2017.1

Form List View
  • Header
  • Layout
  • Footer
  • Advanced Search Layout
Form Item View
  • Layout

Other fields that are not listed above (e.g. "Enable Search" for Form List Views) are not affected by the Collection. This means that the setting for non-collection fields will affect both Collections.

When a User is previewing a Page Style that has a different Collection than the activated Page Style's Collection, then when the User edits the Form List/Item View, he/she will be able to edit the Collection Fields for the appropriate Collection. A notice will appear to the User on the Edit Form List/Item View screen that explains this.

NOTE: Changing Collection does not delete or remove any Page Regions or Collection Field content so you can switch back and forth between Collections without losing any content.

Override Layout Type:

Each Page has a Page Property for the Page Layout Type (System or Custom). You can use this option to override the selection in each Page's Page Property. When you are creating a new look for your site pages, you may want to change the Layout Type to Custom for your existing Pages if they are set to System. Using this override in combination with Theme Preview Mode, you can effectively create and test your new design cross your existing Pages without affecting what other site visitors see.

NOTE: Selecting the System or Custom Override Layout Type will not delete or remove any Layout data so you can go back and forth. However, each Page only has one System Layout and one Custom Layout, so this option will have no effect if you try to override a Custom Layout with another Custom Layout or a System Layout with another System Layout for the same Page.

Social Networking Position:

Select the position around the Primary System Region ("Use Page") where you would like the Social Networking features to appear. You can also select "Disable" to hide the display of the Social Networking features for this Page Style.

NOTE: The Social Networking features are enabled and configured in the Site Settings.

Fixing a Broken Login Page

Since even liveSite itself uses a Page Style to define the Login Page for Site Administrators and Designers, if you accidentally remove the <system></system> tag from the Login Page's Page Style, you will not be able to login to your website!

If this happens, you can use the login URL shortcut to login:

http://www.example.com/livesite/index.php?u=username&p=password

Be sure the first thing you do once you have logging is add the <system></system> tag back into the Login Page's Page Style anywhere in the <body>, so you and your other Users can use the Login Page again!

Site Designers can create and place interactive Menus into Page Styles.

By using Menus, your Site Managers (and selected Content Managers) will be able to maintain the website navigation systems themselves, just like Page content, without the need to edit any of the underlying programming that make the Menus work.

You can create as many Menus as you wish, so you can use Menus to create site-wide Menus, portal area Menus, and even dynamic site maps.

Searching Menus

You can enter a search term in the box on this screen and search for any Menu by it's properties.

Creating Menus

Click "Create Menu" to create a Menu. You can add an effect to a menu in order to enable pop-up or accordion features without including complex JavaScript libraries. The effect will add sleek animation to the user interface for multi-level menus.

Once you have created the Menu, add a <menu> tag to one, some, or all of your Pages Styles to specify the location and scope of your Menu across your website's Pages.  At that point, your Site Managers and some Content Managers will be able to edit the Menu and add items to it right from the Edit Page screen.

Editing Menus

Site Managers (and selected Content Managers) can simply click on "Edit" on the Menu when editing a Page in order to add/remove Menu items and link them to Pages or other websites.  Menus are "safe" because Content Managers and Site Managers cannot modify or delete the underlying Menu Region and its Properties, which could cause a problem when rendering a Page.

Create/Edit Menu

This screen displays the Menu properties:

 
 
 
Menu Name
Menu Name:
The new menu's name.
 
Submenu Effect
Pop-up:
This creates a pop-up effect for submenus. The submenus can "drop-down", "fly-out", and "fly-up", based on the pop-up properties that are selected below.

IMPORTANT: CSS styling is required for setting the styling and structure of the menu.
Accordion:
This creates an accordion effect for submenus. This effect features sleek animation to expand menu items.

IMPORTANT: CSS styling is required for setting the styling and structure of the menu.
None:
This will create a menu with no effects applied to it.

TIP: This is ideal for site maps.
 
Pop-up Properties
First Expand Menu:
Select the direction of the first menu level.

For example: If you select "Bottom", then when the Visitor places their cursor over the top-level Menu item, any children Menu items will "fly-down" from the bottom of the top-level Menu item.
Then Expand Menu:
Select the direction of the second menu level.

For example: If you select "Right", then when the Visitor places their cursor over the first-level Menu item, any second level children Menu items will "fly-out" from the right side of the first-level Menu item.

 

Planning your Pop-up Menus

If you want your website's pop-up menu to be horizontal, along the top of the Page, you would specify "Bottom", "Right".

If you want your website's pop-up menu to be vertical, along the left margin of the Page, you would specify "Right", "Right".

If you want your website's pop-up menu to be horizontal, along the bottom of the Page, you would select "Top", "Right".

This screen displays all the Menu Items for this Menu.

Each Menu Item will be added to the Menu on all Pages that share this Menu.

If this is a multi-level Menu, then you can organize Menu Item together in parent/child relationships. You can create as many levels as you need, however, we recommend that you limit your levels to 3 or 4 for better usability.

To create a new Menu Item, click on "Create Menu Item".

NOTE: Content Managers who have edit access to specific Menu Regions and Site Managers can only edit the Menu Items for those Menus. Site Designers and Site Administrators can also edit the underlying Menu Region Properties.

If you are a Site Designer, you can also click "Edit Menu Properties" to edit the Menu properties themselves from this screen.

Create / Edit Menu Item

This screen displays the properties of this Menu Item.

 
 
 
Menu Item Name
Menu Item Name:
The name of the menu item that will appear as the label on the Menu that your website Visitors will either hover over or click into.
 
Link Menu Item To
Page:
The Page on your website that the Menu item will link too.

TIP: Be sure this is a Page in a Folder with the appropriate access for all Visitors that view the Menu.

Enable Security:

Check this if you only want this Menu Item to appear if the Visitor has access to view the Page you have selected above. For example, if you want to add a staff link to the main Menu for your site, but you only want the link to appear for staff members, then check this feature.

Even though you may generally want to hide Menu Items from Visitors who do not have access to them, there are some situations where you might want the Visitor to see the Menu Item. For example, you might have a members link that allows Visitors to access the members area or register as a Member. A members link might also allow you to show off your membership features to all Visitors in order to encourage them to become Members. Please be aware that even if you leave security disabled for the Menu Item, the access control on the Page still remains intact. In other words, once the Visitor clicks to the Page, the normal access control checks will be done at that time (e.g. Visitor must login/register to become a Member).

You should only enable this feature if you are sure you need it, because it requires extra processing during each page view. For example, don't enable this feature for Pages with public access control, because all Visitors have access to that.

If you enable this feature for a Page with registration or guest access control, then the Menu Item will not appear for a Visitor until he/she logs in, registers, or continues as a guest.

If you enable this feature and the Menu Item does not appear, then its child Menu Items will also not appear. This means that you do not have to check this feature for all child Menu Items.

This feature only works if you have selected a Page from the pick list. It will not work if you enter a URL, even if the URL is a local URL to this website (e.g. /example). Also, this feature does not currently work for links to Files.

URL:
Any fully-qualified URL, like: http://www.MyOtherWebsite.com.

TIP: If you want to create a link to a downloadable File on your website, view the File and place the link to the File here, like: http://www.MyWebsite.com/MyFile.pdf. Be sure this is a File in a Folder with the appropriate access for all Visitors that view the Menu.
 
Target Window for Menu Item Link
Link Target:
This is where liveSite will launch the link to the Page or URL.

Same Window means that the link will open in the Visitor's current browser window.

New Window means that the link will open in the Visitor's browser as a new window or tab.
 
Parent Menu Item
Parent Menu Item:
If this Menu Item is in a multi-level menu, then specify what other Menu Item will be it's parent.

NOTE: This value is ignored if this Menu Item is not in a multi-level Menu.

All Common Regions

Common Regions are shared content areas that you can create for your Site Managers to maintain directly from a Page using the Rich-text Editor.

Common Regions typically contain word processor type information like text, tables, photo, and event videos.

Common Regions are considered "safe", meaning your Site Managers and Content Managers can edit them, but cannot delete them from your Page Styles inadvertently.

Since Common Regions are placed into Page Styles, they become shared content that can be displayed on one, some, or all of your website Pages.

TIP: Common Regions are ideal for website headers and footers. They are also good for creating different departmental website area content shared only among Pages in a certain area.

Unlike Page Regions, Common Regions must be created manually by the Site Designer before they can be edited.

Once you have created the Common Region, add a <cregion> tag to one, some, or all of your Pages Styles to specify the location and scope of your Common Region across your website's Pages.

Create / Edit Common Region

This screen displays the Common Region properties:

 
 
 
Common Region Name
Common Region Name:
This is the unique Common Region name.  This is the name that will be inserted into any Page Style between the <cregion></cregion> tags.

NOTE: If you change this Name, be sure to update the tag's name in the Page Styles.
 
Shared Content to appear on associated Pages
Content:
This is the content that will be displayed in any Page that shares the same Page Style where this Common Region's tag is placed. This content can be edited directly from the Page using the Rich-text Editor by any Site Manager, Site Designer, Site Administrator, or any User who has edit access to a Common Region.

NOTE: Only Site Designers can delete Common Regions. Also, for security reasons, you cannot add PHP code to Common Regions.
 
Change Region Type
Region Type:
This allows you to switch a Common Region to a Designer Region and vice versa.

All Designer Regions

Designer Regions are shared content areas that you can create for only your Site Designers to maintain directly from a Page.  These areas are better for widget coding, javascript, etc., where you don't want someone without HTML programming knowledge to accidentally edit it.

Designer Regions typically contain javascript, HTML widgets, embedded Flash objects, etc.

Since Designer Regions are placed into Page Styles, they become shared content that can be displayed on one, some, or all of your website Pages.

TIP: Designer Regions are ideal for adding news feeds and other third-party widgets to your website.

Unlike Page Regions, Designer Regions must be created manually by the Site Designer before they can be edited.

NOTE: Designer Regions are not editable using the Rich-text Editor because it strips out non-HTML/CSS tags in an attempt to "clean" the content before it is saved. It does this to help the Content Managers from adding bad tags to their Page content and breaking the Page's layout and functionality.

Embedding Regions

You can embed other Regions in Designer Regions. For example, if you want to embed a Common Region in a Designer Region, simply enter "<cregion>example</cregion>" into the code of the Designer Region. This is similar to how you embed Regions in Page Styles. You can even embed Designer Regions inside other Designer Regions (only one level of embedding is supported though).

This feature is often used in order to consolidate code so you have less code to update when you need to make a change to a common block of code for a website. For example, you might have a block of code that needs to appear in many Page Styles. You can place that block of code which includes tags for other Regions in a Designer Region and then add that Designer Region to the necessary Page Styles. In the future, when you need to update that block of code, you can simply update the Designer Region, without having to update all of the Page Styles.

Searching Designer Regions

You can enter a search term in the box on this screen and search for any Designer Region by it's properties and content.

Site Search Widget

Site Search Widget is a PHP script that you can embed in any Designer Region or Page Style that will allow your Visitors to search Pages for content and return the results on the Search Results Page.  You can place the Site Search Widget anywhere on your site.

All "searchable" Pages will be searched by the Site Search Widget.  If you don't want some Pages found, even if the Visitor or User has access to it's Folder, disable "Include in Search" in those Pages and they will not be found.

Site Search will only display the search results for Pages that the Visitor or User has "view" access to.  So, website Visitor will only see search results from Pages that are in Public Folders, and Members will see both results from Public Folder Pages and Membership Folder Pages, and so on.

To add the Site Search Widget to your website, simply cut and paste the HTML below into any Designer Region or directly into a Page Style. Be sure to replace the "[search results page name]" with the appropriate page name:

<form action="/[search results page name]" style="margin: 0px">
<input type="text" name="query" class="search-query" /><input type="submit" value="Search" class="search-submit" />
</form>

NOTE:  Site Search Widget only searches Page Regions and not Common Regions or Menus.  This is necessary of else the search results would return duplicate information for all Page that share content from Common Regions.

IMPORTANT: Be sure that all Pages that should be searched have "Include in Search" Page Property selected, and that you have a Search Results Page created that is in a Public Folder.

Embedded Media

Adding media objects to your Designer Region is easy.  However, we have found some issues with their use on some client computers.  If you are having problems rendering your embedded media that has been uploaded to your website, edit the media's Properties and use the actual URL

(e.g. /[dir]/get_file.php?name=example.wmv) instead of the virtual URL (e.g. /example.wmv). We are not sure why the rewriting

of the URLs matters, but it appears that a small percentage of client computers don't like the virtual URLs, probably because of some unrelated compatibility issue that has not been indentified.

If that does not work, you should also consider adding a URL parameter to your media's Properties as follows, since there seems to be an issue for some versions of the Internet Explorer browser:

<object>...<param name="url" value="/example.wmv" />...</object>

Be sure to also replace the virtual URL with the actual URL as described above.

Create / Edit Designer Region

This screen displays the Designer Region Properties.

 
 
 
Designer Region Name
Name:
This is the unique Designer (Common) Region name.  This is the name that will be inserted into any Page Style between the <cregion></cregion> tags.

NOTE: If you change this Name, be sure to update the tag's name in the Page Styles.
 
Shared HTML Content to appear on associated Pages
Content:
This is the content that will be displayed in any Page that shares the same Page Style where this Common Region's tag is placed. This content can be edited directly from the Page by any Site Designer.

NOTE: Only Site Designers can delete Designer Regions. Also, for security reasons, you cannot add PHP code to Designer Regions.
 
Change Region Type
Region Type:
This allows you to switch a Designer Region to a Common Region and vice versa.

TIP: The Code Editor colorizes your code and adds line numbers to make it easier to read and debug. The Code Editor may take a while to "read" through your code and colorize it. This process is particularly slow on Internet Explorer browsers. We recommend the Firefox browser for faster editing throughout the website. It is free to download, and works on most desktop computers.

Embedding Regions

You can embed other Regions in Designer Regions. For example, if you want to embed a Common Region in a Designer Region, simply enter "<cregion>example</cregion>" into the code of the Designer Region. This is similar to how you embed Regions in Page Styles. You can even embed Designer Regions inside other Designer Regions (only one level of embedding is supported though).

This feature is often used in order to consolidate code so you have less code to update when you need to make a change to a common block of code for a website. For example, you might have a block of code that needs to appear in many Page Styles. You can place that block of code which includes tags for other Regions in a Designer Region and then add that Designer Region to the necessary Page Styles. In the future, when you need to update that block of code, you can simply update the Designer Region, without having to update all of the Page Styles.

The Path Tag

The / tag can be inserted anywhere in your HTML and is replaced automatically with the absolute URL to the location where your system software was installed. You should always use the / tag if you need to reference any uploaded files within your HTML. This makes your links portable, so if you ever need to move the software system to another directory within your web server, your hand-coded links will still work.

Let's look at a typical example.

Say you want to link to a background image file (example.png) that you uploaded through the Design Files within the Control Panel. However, you want to be sure that the link is portable because your web server administrator originally installed the system software into a temporary directory that looked something like this: http://192.168.0.1/~example/ and will need to move liveSite software to http://www.example.com/ once you have setup your domain and are ready to launch the site.

So if you hard-code your link to example.png file like this:

http://192.168.0.1/~example/example.png or
/~example/example.png

Then when liveSite software is moved later to another directory, this link would no longer work. So instead, be sure to link to the file using the / tag:

/example.png

The / tag is only necessary within your custom HTML such as Custom Page Styles, Editable Head Content in System Page Styles, Designer Regions, and within custom CSS files. The / tag is not necessary when adding links through the Rich-text Editor. These links will be converted automatically for you when the content region is saved.

NOTE: If you are the web server administrator and move liveSite to another directory off of your webroot after installation, be sure to update your .htaccess file per liveSite's installation / update instructions.

All Ad Regions

Ad Regions are shared content areas that you can create for your Site Managers and some Content Managers to maintain directly from a Page using the Rich-text Editor.

Ad Regions are ideal for rotating home page announcements, product tour slideshows, or traditional rotating graphical ad banners.

Ad Regions are "safe", meaning your Site Managers and some Content Managers cannot edit or delete them, but they can add edit, reorder, label, or delete the Ads that appear within the Ad Regions.

Since Ad Regions are placed into Page Styles, they become shared content that can be displayed on one, some, or all of your website Pages.

Like Common Regions, Ad Regions must be created manually by the Site Designer before Ads can be created for them.

Once you have created the Ad Region, add an <ad> tag to one, some, or all of your Pages Styles to specify the location and scope of your Ad Region across your website's Pages.

If a dynamic Ad Region contains more than one Ad, then previous & next buttons can appear which allow Visitors to browse through the Ads. Site Designers can enable/disable and position these buttons via the Theme Designer for System Themes or enable/disable, position, and style these buttons in the CSS for Custom Themes.

Searching Ad Regions

You can enter a search term in the box on this screen and search for any Ad Region by it's properties.

NOTE: Ads must be enabled in the Site Settings in order to use Ad Regions.

Create / Edit Ad Region

Ad Regions control the nature of ads within them. The dimensions of an Ad Region are defined, by the Site Designer, using CSS (Theme). However, Ad Region function is controlled by the Ad Region's properties. Using these properties, you can create "Static" Ad Regions that rotate ads randomly each time a page is loaded, or create "Dynamic" Ad Regions that will display each ad in succession without the need to reload the page.

Dynamic Ad Regions can also create interesting presentation-style areas within a page using the built-in transition effects.

Here are the Ad Region Properties:

 
Ad Region Name
Ad Region Name:
This is the unique Ad Region name.  This is the name that will be inserted into any Page Style between the <ad></ad> tags.

NOTE: If you change this Name, be sure to update the tag's name in the Page Styles.
 
Ad Region Behavior
Display Type:
This determines the Ad Regions display behavior.

Static: Select this Display Type if you would like each Ad to change only when the Page is reloaded by the Visitor's browser.  This Display Type is typically used for traditional advertising banner images.

Dynamic: Select this Display Type if you would like multiple Ads to be displayed each time the Page is reloaded by the Visitor's browser.  This Display Type is typically used for slideshow-style banners and to animate information panels.

NOTE: Only Site Designers and Administrators can create, delete and rename Ad Regions. Site Managers and Users who have access to an Ad Region can edit it's properties.
Transition Type:
This determines the type of animation that is used for the Ad Region.
Transition Duration:
This determines how long the transition will take to complete.
Enable Autoplay:
This will enable/disable the Autoplay feature. When the Autoplay feature is enabled, the animation will start automatically. This feature is similar to an automatic slideshow.
Interval:
This is how long the Ad Region will wait before switching to the next Ad.
Play Continuously:
Check this if you do not want the animation to stop. In other words, once the last Ad is reached, then it will loop back around to the first Ad and continue the animation. If you uncheck this, then when the last Ad is reached, it will loop back around to the first Ad and stop the animation.

All Dynamic Regions

Dynamic Regions are shared programming code areas that you can create for only your Site Designers to maintain directly from a Page.

For security and reliability reasons, only Dynamic Regions are allowed to contain PHP code.

Since Dynamic Regions are placed into Page Styles, they become shared content that can be displayed on one, some, or all of your website Pages.

TIP: Dynamic Regions are ideal for integrating your website with other applications or databases.

Unlike Page Regions, Dynamic Regions must be create manually by a Site Designer before they can be edited.

Searching Dynamic Regions

You can enter a search term in the box on this screen and search for any Dynamic Region by it's properties and content.

Create / Edit Dynamic Region

This screen displays the Dynamic Region Properties:

 
Dynamic Region Name
Dynamic Region Name:
This is the unique Dynamic Region name.  This is the name that will be inserted into any Page Style between the <dregion></dregion> tags.

NOTE: If you change this Name, be sure to update the tag's name in the Page Styles.
 
PHP Code to appear on associated Pages
PHP Code Snippet:
This is the HTML and PHP code that will be passed to the web server's PHP processor and interpreted. This content that will be displayed in any Page that shares the same Page Style where this Dynamic Region's tag is placed. This content can only be edited by a Site Designer.

NOTE: Only Site Designers can delete Dynamic Regions.

NOTE: The opening <?php tag and closing ?> tag may be included in the code, however they are not required.


DISCLAIMER: Dynamic Regions can create security and stability issues for your website. We are not responsible in any way for the results of any code that is executed within your web space. Be extremely careful with this feature. You can accidentally destroy your website database, software, files, and configuration!!!

All Login Regions

Login Regions allow you to integrate the Login Page functionality into any Page.

Since Login Regions are placed into Page Styles, they become shared content that can be displayed on one, some, or all of your website Pages.

TIP: Login Regions are ideal if you have a Membership site and want to provide quick access for your Members to login from your home page.

Login Regions must be create manually by the Site Designer.

Searching Login Regions

You can enter a search term in the box on this screen and search for any Login Region by it's properties and content.

Create / Edit Login Region

This screen displays the Login Region Properties:

 
 
 
Login Region Name
Login Region Name:
This is the unique Login Region name. This is the name that will be inserted into any Page Style between the <login></login> tags.

NOTE: If you change this Name, be sure to update the tag's name in the Page Styles.
 
Header content to display when User is not logged in
Not Logged In Header:
Enter the content you want to display above the login fields that liveSite will display in the Login Region when the User has not logged in yet.
Show Login Form:
Check this field if you want to show the login form between the header and footer when the Visitor is not logged in.

TIP: If you are placing the Login Region in a small area, then you might want to hide the login form and add a link to a login Page in the header.
 
Footer content to display when User is not logged in
Not Logged In Footer:
Enter the content you want to display below the login fields that liveSite will display in the Login Region when the User has not logged in yet.
 
Header content to display when User is logged in
Logged In Header:
Enter the content you want to display above the login fields that liveSite will display in the Login Region when the User is logged in.
 
Footer content to display when User is logged in
Logged In Footer:
Enter the content you want to display below the login fields that liveSite will display in the Login Region when the User is logged in.

NOTE: The above content areas that will be displayed in any Page that shares the same Page Style where this Login Region's tag is placed.

All Themes

This screen displays all the Cascaded Style Sheet (CSS) files created by the Theme Designer or simply marked as "Theme" files that you can use to define the look and feel of your entire website. Themes allow your Site Designers to maintain control of the consistency of the design and content of the website.

System Themes

System Themes has been replaced in more recent versions of liveSite with the combination of the Page Designer + Custom Page Styles + Custom Themes to allow for other popular responsive HTML grid systems such as Bootstrap and Foundation to be used.

A System Theme is a Theme that was created using the Theme Designer. They are created to work with the System Page Styles generated by the Style Designer.

In order to edit a System Theme, click on the System Theme you want to edit, and then click on the "Edit Theme" button. This will open the Theme you are viewing in the Theme Designer.

To export a System Theme click on the System Theme you want to edit, and then click on the "Export" button. You will then be prompted to download the Theme CSV file.

If you need to backup, or transport a Theme to a different site, then when you export the Theme you will also need to download all of the Design Files that are associated with the Theme.

Custom Themes

You can also upload your own CSS files and add them to the head tag area of your HTML and bypass the Theme Designer/Style Designer features completely for ultimate flexibility. We encourage you to start with the System Page Styles and System Themes because they can be manipulated to create almost any site design and layout you can dream up.

To include your own Custom Theme, you can upload it as a Theme / Design File (make sure it has the .css file extension) and add the <stylesheet></stylesheet> tag to either a System Page Style (View Source Button), or to a Custom Page Style's <head> tag.

Searching Themes

You can enter a search term in the box on this screen and search for any Theme by it's properties.

Creating Themes

To create a new Theme, click on "Create Theme".

Activated Themes

Two Themes can be "active" at any one time on the website. One for desktop (computers and tablets) visitors and one for mobile (phone) visitors. liveSite will automatically detect and switch Themes based on the device that accesses any web page on the site. We recommend that your Site Designer add a Mobile Switch Region to all Page Styles so any site visitors can choose which Theme they wish to view regardless of the outcome of the automatic detection. Also, you will need to enable the mobile site setting in order for the mobile Theme to be used for mobile Visitors.

You can override the activated Theme for a specific Page, by editing the appropriate System Page Style and selecting a Theme.

Create Theme

Create a CSS Theme file to design and style the look of your HTML pages.

 
What type of Theme do you want to create?
System
Selecting this option will allow you to either use the Theme Designer to create your new System Theme or Import a System Theme from a CSV file.
Custom
Selecting this option will allow you to upload your own CSS file to be used for your new Custom Theme. This method requires that you have a knowledge of CSS and HTML.

NOTE: You can use Custom Themes with System Page Styles, you just need to look at the source of the System Page Styles created by the Style Designer and have a good knowledge of CSS and HTML.
How would you like to create the System Theme?:
This is the method in which you will create your new System Theme.

"Create a new System Theme with the Theme Designer" will allow you to use the Theme Designer to create your new Theme.

"Import a System Theme." will allow you to import a System Theme CSV file. You can get a System Theme CSV file by first exporting a System Theme from the system. After importing a System Theme, you use the Theme Designer to modify the Theme.

NOTE: When importing a Theme CSV file, if the CSV file name matches the name of an existing Theme CSS file, then a confirmation will appear that will allow you to overwrite the existing Theme.
 
New Theme File Name
Name:
This will be the name of your new Theme, and the name must contain ".CSS" to be valid. The name must be unique among other Pages, Files, and Short Links. The name is not case-sensitive.
 
Select New System Theme CSV File to Import
Local CSV File:
Choose the .csv file to upload. This can be done by either typing in the directory path or by clicking "browse" and then browsing to the desired file location on your local computer. A CSV file can be generated by exporting a System Theme from a different website.
 
Select New CSS File to Upload
Local CSS File:
Choose the .css stylesheet file to upload. This can be done by either typing in the directory path or by clicking "browse" and then browsing to the desired file location on your local computer.
 
Theme File Access Control
Folder:
This is the Folder that the file will be placed in.  The Folder's access control will dictate who can view or download the File.

IMPORTANT: Be sure you select a Public Folder if you want all site Visitors to be able to see the website using this Theme.
 
Theme File Description
File Description:
Enter a description for this File that can be viewed by any Site Designer.

Edit Theme

Edit the CSS File to the web server. Themes are CSS files that are created by the Theme Designer (System Themes) or by uploading a CSS file into liveSite (Custom Themes). Here are the properties:

 
Theme File Name
Name:
You can change the name of this Theme file on the web server. The name must be unique among other Pages, Files, and Short Links. The name is not case-sensitive.

WARNING: Be sure that the filename extension is .css or else the Theme will no work correctly.
 
Theme File Access Control
Folder:
This is the Folder that the Theme file will be placed in.  The Folder's access control will dictate who can view the Theme.

IMPORTANT: Be sure you select a Public Folder if you want all site Visitors to be able to see the website using this Theme.
 
Theme File Description
Description:
Enter a description for this file that can be viewed by any Site Designer.
 
Activate Theme to Make it Live
 
When a Theme is active, it is inserted automatically into every System Page Style (and every Custom Page Style that has the <stylesheet></stylesheet> tag defined within it). Themes allow you can instantly change the look and feel of you entire website with a click of a button by activating a Theme from this screen.

WARNING: If you activate a Theme that doesn't work with your HTML Page Styles correctly, you could render your website unreadable. If this happens, activate another Theme until you can fix the problematic Theme.
Activate for Desktop:
Check this box if you wish to set this Theme as the active Theme viewed by all desktop (computer / tablet) visitors.
Activate for Mobile:
Check this box if you wish to set this Theme as the active Theme viewed by all mobile (phone) visitors.

 

Previewing Themes

You can apply any Theme to you website without activating it first. This means that you can browse your actual website Pages through the new Theme, without any other website Visitor being affected. All other Visitors will see the active Theme. This "Theme Preview Mode" is enabled until you exit Theme Preview Mode, or close your browser (end your session).

Deleting Themes

To delete a Theme from the web server, click on the Theme you wish to delete and click "Delete".

WARNING: Take care when deleting Theme files, there is no undo. Don't delete an active Theme or you will render your website unreadable (if you are using Themes in your Page Styles. If this happens, activate another Theme.

TIP: Use Theme Preview Mode to help you develop and test new Themes and Page Styles without affecting your "live" website.

Custom Format Feature

To further control the consistency of the content added by Content Managers, we have created a number of Custom Formats that are made available to your Content Managers when editing content using the Rich-text Editor's "Format" selections.

If are using the built-in stylesheet-driven website themes, then you have access to a series of styling for different types of content we have created for you. Each style becomes a Custom Format that you can apply them to your content. (However, you can still override any Custom Formats by adding your own CSS to the Advanced Styling area through the Theme Designer).

So that your content would be portable from one Theme to another, we devised a system based on a two-tone color scheme. In a two-tone color scheme, there is a "primary" and "secondary" color. We have taken that concept to develop primary and secondary buttons, boxes, links, and other common website styles. This allows you to extend this concept to your own website designs and style guides so that all content will work across all themes!

TIP: You should use these custom formats instead of "Fonts", "Font Styles", and "Font Sizes" which are disabled by default and are not compatible with liveSite themes and web content standards.

NOTE: We have included several custom formats within liveSite provided themes to help you add more pazazz to your content. We have also added a Tag Picker to help you more easily "grab" content to style.

Adding Custom Formats to Custom Themes

If you uploaded your own CSS Theme, then you can add Custom Formats to the Rich-text Editor by adding the <custom_formats></custom_formats> tags within CSS comments in your Custom Theme files, like this:

/* <custom_formats>*/

define your CSS custom formats here...

/* </custom_formats> */

NOTE: Be sure that the <custom format> and </custom_format> comments are spelled correctly and appear around the styles you want to make available to the Rich-text Editor or they will be ignored. (For an example, look at the CSS generated with every System Theme.)

NOTE: If you want the rich-text editor to apply the custom format to a specific element, then you can declare the custom format like the following example: td.example {}. In this example, the rich-text editor will apply the "example" custom format to td elements (i.e. table cells), instead of the default span element.

TIP: Once you have defined all necessary Custom Formats in your Theme, we recommend that you disable the Rich-text Editor menu buttons from within the Site Settings to prevent your Content Managers from using fonts, colors, and styling that is inconsistent with the website's intended design.

Edit CSS

This screen allows you to edit your own CSS files directly on the server, and replaces the tedious task of downloading, making changes, and re-uploading design files again and again during the site design process. It is also a great way to make quick edits to your Custom Theme and previewing the results before activating your newly modified Theme.

NOTE: You cannot edit a System Theme's CSS file directly so liveSite will only let you edit the CSS file if it is not a System Theme.

Code Editor

The Code Editor colorizes your code and adds line numbers to make it easier to read and debug. The Code Editor may take a while to "read" through your code and colorize it. This process is particularly slow on Internet Explorer browsers. We recommend the Firefox browser for faster editing throughout the website. It is free to download, and works on most desktop computers.

Saving Your Changes

There are two ways to save your changes when editing. "Save" will save your edits into the same CSS file that you are editing, as you would expect.

"Duplicate" will save your edits into a new CSS file, thus preserving your original CSS file unaltered. After the new file is created, you will be editing the new copy. You can use this method to create new versions of your CSS file so that you can back up to any version that you desire.

Theme Designer

The Theme Designer has been replaced in more recent versions of liveSite with the combination of the Page Designer + Custom Page Styles + Custom Themes to allow for other popular responsive HTML grid systems such as Bootstrap and Foundation to be used.

The Theme Designer allows you to style all elements and content areas created by the Style Designer. The Theme Designer contains thousands of options, and creates a single CSS file. It's impossible to fully document every field, and you'll learn the most by selecting different options and seeing how it affects your designs.

The Theme Designer has two panes. The one to the left holds all the current CSS settings and you can drill in and out of the folds to make changes to the Theme. Each fold represents areas and regions from within the Style Designer and the Page Style represented in the Preview pane to the right. The Pane to the right is the Preview Pane and displays any Page from your site that uses a System Page Style.

IMPORTANT: There is no UNDO once you 'Save' your Theme, so we recommend that you 'Duplicate' to hold on to the original before you start playing around with your Themes.

Theme Name

If the Theme name displays [ACTIVE] next to it, then you are editing the "live" Theme that is currently being used to style all Pages using this Page Style to your current site visitors. We recommend that you edit a copy of the active Theme instead of editing the active Theme itself.

View Source

If you are a coder, or just interested in looking at the CSS generated by the Theme Designer, you can click 'View Source' and see exactly what code the Theme Designer is using to display the Page in the Preview Pane at the moment.

Preview Page

The 'Preview Page' displays the current Page being displayed in the Preview Pane. When you press 'Update Preview Pane', the current CSS settings from the left pane are used to style the Page in the right pane. Your Theme is not saved at this point. The pane to the left holds all the current Theme style settings within "folds", making it easy to drill up and down within the folds to make changes to the Theme you are editing. Nothing is saved until you press 'Save' or 'Duplicate'.

If you want to preview another Page, you will need to save your Theme (if you want to keep any changes) and navigate to another Page you wish to preview and enter the Theme Designer again from that Page's Theme Preview Mode. Remember, Themes style Page Styles, NOT Pages.

Page Style

The 'Page Style' displays the current Page Style being styled to display the Page in the Preview Pane. If you want to preview another Page Style, you will need to save your Theme (if you want to keep any changes) and navigate to another Page that uses the Page Style you wish to preview and enter the Theme Designer again from that Page's Theme Preview Mode.

NOTE: If you are a CSS coder, you will also see the CSS class names for the Page Style are listed for reference in case you want to make CSS changes that affect the Page Style or similar Page Styles.

Folds

'Folds' refer to the accordion menus found in the left pane of the Theme Designer. Folds can contain folds, and styling changes in the parent folds will be inherited by children folds. For this reason, we recommend that you start with the Site Wide Settings and preview your changes as you go to understand how your changes affect the styling created by the Theme. So for example, if you set the font size in the Site Wide fold, there is no need to set the font size in any other fold, unless you want to override the font size for that specific fold. Less is always more when it comes to editing Themes.

The top most folds are always present in the Theme Designer (Site Wide, Site Border or Mobile Border, Site Top, Site Header, etc.). These fold correspond to the areas within the Style Designer. The Style Designer sets up the layout and the content, and the Theme Designer styles it.

TIP: You can see what area the fold options affect by hovering your mouse over the fold to highlight the area of the Preview Page that is affected by the fold's options.

Site Wide

This is the most important fold. It contains the most dramatic styling changes that you will most likely want to change first. Peek inside the 'General' fold within this fold. It is the fold where you can set your Primary and Secondary Colors that will affect all of your Custom Formats. If you are a CSS coder, you will access this fold the most if you are adding your own CSS styling.

Pre Styling

If you know CSS and you want to include your own custom font files and include other CSS files, these elements typically must be at the top of your CSS Theme file to function correctly. This is also where you will find default CSS styling for all Themes that provide a baseline for cross-browser compatibility of your Themes. To access Pre Styling, under the top fold Site Wide > General, click on the "CSS" logo next to Pre Styling.

Primary & Secondary Colors

The most important aspect of the Theme Designer is the concept of Primary and Secondary colors. This concept is similar to a school's colors, the 2-tone paint job on a car, or the colors that make up your organization's logo or brand. By giving you access to set these within your Theme at a top level, all styling (like buttons, etc.) can be created automatically, based on these colors, maintaining design consistency across the entire website. You can set your Primary and Secondary colors in the Site Wide > General fold.

Based on the Primary and Secondary Colors and font styles, the Theme Designer will automatically output a few dozen content formatting selections that are available within the Rich-text Editor for your Content Managers to use to style their content. We call these "Custom Formats" and you can also tweak or completely override these style definitions with your own CSS using the Advanced Styling area.

Advanced Styling

If you know CSS, you can override any styling that is created by the Theme Designer by adding the appropriate CSS elements and inheritance to the Advanced Styling. To access Advanced Styling, click the "CSS" button in the button bar. You can also access the Advanced Styling under Site Wide > General.

Custom formats appear in a pick list in the rich-text editor that allows Users to applying styling to text. For System Themes, a default list of custom formats are automatically included for you, so you don't need to worry about including them. However, if you want to add your own to the default list, you can do so by adding code like the example below to the advanced styling.

/* <add_custom_formats> */

p.my_paragraph_style {}
td.my_table_cell_style {}
.my_span_style {}


/* </add_custom_formats> */

NOTE: If you want the rich-text editor to apply the custom format to a specific element, then you can declare the custom format like the following example: td.example {}. In this example, the rich-text editor will apply the "example" custom format to td elements (i.e. table cells), instead of the default span element.

If you want to remove some of the default custom formats, you can do so by adding code like the example below to the advanced styling.

/* <remove_custom_formats> */

.background-primary {}
.background-secondary {}


/* </remove_custom_formats> */

Site Border

The Site Border defines the area outside all your content areas out to the edges of the desktop browser screen that is displaying the Page. For most websites, you typically want this to be centered and a fixed width. However, setting it to "100%" will float all the content from screen edge to screen edge when displaying the Page. The Site Border is present in Desktop Mode and replaced by the Mobile Border whenever the Page is viewed in Mobile Mode. This allows you to define a Desktop width for Pages and a Mobile width for your Pages, all within the same Theme, if desired.

Mobile Border

The Mobile Border defines the area outside all your content areas out to the edges of the mobile browser screen that is displaying the Page. For most websites, you typically want this to be "100%" so your page content will float from screen edge to screen edge and fill up the small mobile phone screen when displaying the Page. The Mobile Border is present in Mobile Mode and replaced by the Site Border whenever the Page is viewed in Desktop Mode. This allows you to define a Desktop width for Pages and a Mobile width for your Pages, all within the same Theme, if desired.

Other Folds

The remaining children folds will be "pulled into" the Theme Designer by the Page Style itself. For example, you might have placed a Common Region into a specific row and column in the Page Style using the Style Designer, so a fold for that row and column will be displayed in the Theme Designer along with a label (which will be the Common Region's name for identification purposes). Now, understand that you are not actually styling the Common Region itself, by it's location within the Page Style (e.g. row and column). So, for example, if you move the Common Region to another location within it's Page Style, any Theme styling you may have added will NOT follow it.

TIP: You should start with the top level folds and make changes there first and let them cascade down into lower folds since folds are designed to inherit from parent folds. Keep in mind, you are styling the System Page Style specified in the left pane and it's content regions, not the actual Page being previewed.

Saving Themes

Themes are not saved back to the web server until your either select 'Save' or 'Duplicate'. If you don't want to keep your changes, you can click 'Cancel' and your Theme will remain unchanged.

Save

This will save your changes to the theme file back onto the server.

Duplicate

We recommend that you start with Site Wide Settings and Preview your changes as you go to understand how your changes affect the styling of your Pages.

Cancel

This will not save any of your changes and exit the Theme Designer.

Adding your own CSS

If you need to override any Custom Formats, or add other CSS that is not available within any of the folds, you can add it easily to the Pre Styling Area (CSS to run before the theme's own CSS) and to the Advanced Styling area (CSS to override the theme's CSS). For the most part, you will typically add your CSS to the Advanced Styling area.

You'll notice that the Page Style has a few CSS classes displayed beneath the Page Style's name (e.g. .one_column), and each fold has an equivalent CSS ID value (e.g. #site_header), and each content row and column has it's own CSS class (e.g. .r1c1). These values can be used in conjunction to add any CSS to your Themes. For example, if you want to style the first row and column in the Site Header or all One Column Page Styles using CSS, you would add this to the Advanced Styling area:

.one_column #site_header .r1c1 {css code here}

We recommend you open a code viewer like Firebug plug-in for the Firefox browser and make changes to the Preview Page's CSS using Firebug. When satisfied with the style changes, find the corresponding fold on the left pane to make your changes, and then and click 'Update Preview' to verify your changes. Repeating this process you will quickly learn how to style your own Themes.

NOTE: The Theme Designer allows you to create rounded corners and shadowing without images, but this is a CSS3 feature that works with Mozilla (Firefox) browsers, Chrome, Safari, Mobile Safari, Android, and IE9. Before IE9, these features will be ignored but you can still use them.

NOTE: The Theme Designer can only preview Pages that use System Page Styles. If you attempt to launch the Theme Designer and preview a Page that uses a Custom Page Style, the Theme Designer will instead preview the first Page it finds in the database that uses a System Page Style.

WARNING: The Theme Designer runs in the memory of your browser, so do not open the Theme Designer in two browser tabs (or windows) at the same time or liveSite can get confused and save one Theme over the top of the other one! You can open it in two different browsers, but be careful to only save the theme in one of the browsers.

WARNING: There is no UNDO once you 'Save' your Theme, so we recommend that you 'Duplicate' to hold on to the original before you start playing around with your Themes.

All Design Files

This screen displays all the Design Files that have been uploaded into liveSite.  Design files are typically image files, javascript files, flash files, site banners, or any other file that you might need to use in your site design.

Design Files are stored in the same Folders as other Files, but they are not accessible to Content Managers so they don't clutter File selection in the Rich-text Editor, and cannot be modified or deleted by Content Managers or Site Managers accidentally.

Design Files share the same access control of the Folder they are placed into.

Viewing & Editing Design Files

You can view and edit any File you have access to by selecting the File from any of the All Design Files screen.

Modifying Design Files

You can modify the Folder and design property for one or more Design Files by selecting the Design Files you wish to modify and clicking "Modify Selected".

WARNING: Since changing a Design File's Folder affects its access control, you can accidentally make a Private Design File accessible or a Public Design File inaccessible to others attempting to view the Design File. Keep this in mind when moving Design Files among Folders.

Searching Design Files

You can enter a search term in the box on this screen and search for any Design File by it's properties.

Creating Design Files

To create a File, click on "Upload Design Files".

Deleting Design Files

To delete a File from the web server, select the File you wish to delete and click "Delete Selected".

NOTE: If you delete a File, any links or references to the File will need to be updated.

WARNING: Take care when deleting Design Files, there is no undo.  If you are using the Theme feature, and the Design File you delete is referenced by the currently active Theme, then your website may not be displayed correctly.

Adding a Favicon

A favicon is the name for the tiny graphical image that appears within the address bar of your web browser when viewing some websites. Favicons are typically a tiny version of your logo and help visitors to identify that they are viewing your website and can help to increase your brand. You can prepare a favicon by creating a square image and saving it as a .png or .gif file. Then visit one of the many free favicon generator websites which will create a special favicon.ico file from your image. Then simply upload the favicon.ico file as a Design File (be sure it is placed in a Public Folder) and liveSite will automatically use it as the favicon for your website.

NOTE: Files that have been archived are italicized.

Upload Design Files

Upload one or more Design Files to the web server from your local computer.

 
 
 
Design File Access Control
Folder:
This is the Folder that the Design File will be placed in.  The Folder's access control will dictate who can view or download the Design File.

IMPORTANT: Be sure you select a Public Folder if you want all site Visitors to be able to see this Design File.
 
Design File Description
File Description:
Enter a description for this Design File.


Clicking "Upload" to send the Design File from your local computer up to the web server. Please be patient, large Design Files may take a few minutes.

NOTE: There is no maximum file size that can be uploaded, however, success will depend on your own Internet connection speed at the time of the upload, and any file size limitation that your hosting provider sets on your hosting account. If you receive an error, we recommend trying the upload at a less busy time of day or trying the upload with a smaller file.

Edit Design File

Edit a Design File to the web server.  Here are the Design File Properties:

 
 
 
Design File Name
File Name:
You can change the name of the Design File on the web server. The name must be unique among other Pages, Files, and Short Links. The name is not case-sensitive.

WARNING: If you change the Design File's name, any links or references to the Design File will need to be updated, so take great care in renaming Design Files.
 
Design File Access Control
Folder:
This is the Folder that the Design File will be placed in.  The Folder's access control will dictate who can view or download the Design File.
 
Check if File is a Design File that is Managed by Site Designers
Design:
You can use this property to set whether this File is a Design File or not. Design Files may only be edited or deleted by Site Designers in order to prevent the design of a website from being accidentally altered.
 
Check if Design File should be included on All Themes screen and in Theme preview
Theme:
You can use this property to set that a CSS Design File should be included on the All Themes screen and in the Theme preview feature. This is useful because you might want to add miscellaneous CSS Design Files for various purposes but you don't want to preview them as Themes. In that case, you may leave the check box unchecked.

This check box will only appear if the Design File is a CSS File. Also, the check box will only be editable if the CSS Design File is not a System Theme. System Themes are always considered to be Themes.
 
Design File Description
File Description:
Enter a description for this Design File.

Edit JavaScript

This screen allows you to edit your JavaScript files directly on the server, so you don't have to download them, make your changes, and re-upload them again during site design. This is a great way to make quick edits to your website's JavaScript files.

Code Editor

The Code Editor colorizes your code and adds line numbers to make it easier to read and debug. The Code Editor may take a while to "read" through your code and colorize it. This process is particularly slow on Internet Explorer browsers. We recommend the Firefox browser for faster editing throughout the website. It is free to download, and works on most desktop computers.

Saving Your Changes

There are two ways to save your changes when editing. "Save" will save your edits into the same JavaScript file that you are editing, as you would expect.

"Duplicate" will save your edits into a new JavaScript file, thus preserving your original JavaScript file unaltered. After the new file is created, you will be editing the new copy. You can use this method to create new versions of your JavaScript file so that you can back up to any version that you desire.

NOTE: When you load your site to test your updates you will need to make sure to press CTRL-F5 (Command-R on Mac) to tell your browser to re-download the JavaScript file.

Import My Site

The Import My Site feature will scan a publicly-accessible website and retrieve all the HTML web page(s) and embedded file(s) that it finds and creates the appropriate objects within liveSite. Import My Site is a way of pulling in all your existing website assets for the purpose of converting your current website to use this system's backend functionality. You can import your entire website, or just a single web page at a time.

Importing My Site will not magically make an imported website editable or connect it to the back-end functions like login access, custom forms, e-commerce, so more work is required to connect the newly imported Pages into a working website application. But what it will do is grab all the necessary HTML and associated files, import them, and relink them so that they are all working together within liveSite instantly. From there you would simply add system region tags like <system></system> and <pregion></pregion> to your new Page Styles and begin the process of turning your new static Pages into dynamic Pages. (See help for Create / Edit Custom Page Style)

So What Does It Do?
  • A Folder will be created that contains all the imported items.
  • For each web page scanned, a Page and a Custom Page Style is created and named using the original page name (and optional Tag).
  • For each web page scanned, all referenced files are created as Files (images, videos, etc) and Design Files (css, javascript, favicons, etc) and named using the original filename (and optional Tag).
  • All links to Pages and Files are updated with the new imported names so all Pages and Files are linked together correctly.
  • No duplicate Pages or Files are created and no existing Pages or Files are replaced (non-destructive).
How Do I Use It?
  • Enter the URL, optional but highly-recommended Tag, and the Follow Depth and press "Scan".
  • You will see the scan working and collecting all the items it finds. Nothing is created yet, it is simply showing you what it found and what it will be importing.
  • Once the scan is complete, you can review the items it found. If you are happy with the scanned items, you can click "Import" and all the items will be imported. You can also choose "Restart" to change the parameters of the scan and start a new scan.
 
 
URL:
This is the URL to the publicly-accessible web page where you want the scan to start.
Tag:
This is an optional but highly-recommended text value that will be used to uniquely name all the Pages, Page Styles, and Files that are created. So for example, if your tag is "first", all of your imported items will have "-first" appended to their names. This makes it easy to find all the items that were imported together.
Follow Depth:
This is how many web pages from the URL are found and scanned. Enter "0" if you want only the URL page scanned. Enter "1" if you want the URL page scanned, and all pages it is linked too to also be scanned as well. You can continue to increment this value to deepen the depth of scanning.

TIP: We recommend you start with a shallow Follow Depth and use the optional Tag and give it a try. You can see the results of the scan before making the final decision to actually import the objects in case it is not what you want to do. Importing will not affect your current site design, pages, or files in any way so give it a try! We highly recommended tagging your imports so you can quickly find all imported objects (and quickly edit or remove them as necessary).

NOTE: If you have purchased a website template in compressed (zip) format for a third-party vendor to use as your front-end design, use the Import Zip File feature instead.

Name Conflicts

For Files, if a File already exists in liveSite with the same name, and no tag was entered, then the new imported File will be a given a new, unique name with a number in brackets on the end of the name (e.g. example[1].png). However, if a tag was entered, then the old File in liveSite will be renamed with "-backup" on the end of the name (e.g. example-tag-backup.png), and the new imported File will be set to use the conflicting name. This means that if existing items reference the File by name (e.g. Page Style), then those items will automatically load the new imported File. Also, in this case, the new imported File will have various properties copied from the old File properties (e.g. folder, description, design).

For Pages & Page Styles, the new imported item will always be given a new unique name with a number in brackets on the end of the name (e.g. example[1]), regardless of whether a tag was entered or not.

Import Zip File

The Import Zip File feature will scan a compressed (zip) file and import (create) any files it finds within the compressed file.

Importing a Website / Design Template from a File

Not only can you use this feature to import many files together, you can also use this feature to import a website or a front-end website design template that may have been packaged in a zip file. If this feature encounters code files (html, css, or js, among others) it will import the html pages as a Custom Page Styles and a Page, import the code files, and update all links within these files so that the Pages created will function instantly. This is similar to the Import My Site feature but is useful for importing web pages even if they are not online. This feature is an excellent way of importing a website template or theme files for the purpose of connecting them to use this system's backend functionality (See Import My Site).

So What Does It Do?
  • A Folder will be created that contains all the imported items.
  • For each html file found, a Page and a Custom Page Style is created and named using the original page name (and optional Tag).
  • For each html file found, all referenced files are created as Files (images, videos, etc) and Design Files (css, javascript, favicons, etc) and named using the original filename (and optional Tag).
  • All links to Pages and code Files are updated with the new imported names so all Pages and Files are linked together correctly.
  • No duplicate Pages or Files are created and no existing Pages or Files are replaced (non-destructive).
 
 
Zip File:
This is the location on your local computer of the compressed file that will be processed.
Tag:
This is an optional but highly-recommended text value that will be used to uniquely name all the Pages, Page Styles, and Files that are created. So for example, if your tag is "first", all of your imported items will have "-first" appended to their names. This makes it easy to find all the items that were imported together.

NOTE: If you have an existing website online and that you'd like to import it, use the Import My Site feature instead.

Name Conflicts

For Files, if a File already exists in liveSite with the same name, and no tag was entered, then the new imported File will be a given a new, unique name with a number in brackets on the end of the name (e.g. example[1].png). However, if a tag was entered, then the old File in liveSite will be renamed with "-backup" on the end of the name (e.g. example-tag-backup.png), and the new imported File will be set to use the conflicting name. This means that if existing items reference the File by name (e.g. Page Style), then those items will automatically load the new imported File. Also, in this case, the new imported File will have various properties copied from the old File properties (e.g. folder, description, design).

For Pages & Page Styles, the new imported item will always be given a new unique name with a number in brackets on the end of the name (e.g. example[1]), regardless of whether a tag was entered or not.

Building custom website solutions for organizations of all sizes for over 20 years.