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:
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:
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.
You can enter a search term in the box on this screen and search for any Style by it's properties.
To create a Page Style, click on "Create Page Style".
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 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.
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.
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!
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.
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.
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!
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.
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).
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 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 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:
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 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 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 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 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.
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 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 / 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.
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.
These tags must be placed between the <head></head> tags in your Page Style.
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.These tags must be placed between the <body></body> tags in your Page Style.
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.
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.
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.
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:
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.
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> If you want files to be automatically refreshed when they are updated, so a visitor does not have to clear their cache, then you can reference the files with the Smart Cache feature. Below is an example of how to reference a JS file. Simply update the file name in bold with your file name.
<script src="/<?=smart_cache('example.js')?>"></script>
This feature can also be used with other types of files, like CSS files.
<link rel="stylesheet" href="/<?=smart_cache('example.css')?>">
Smart Cache is automatically enabled for your theme when you load your theme via the <stylesheet></stylesheet> tag.
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
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.
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!
The ghost feature allows a user to complete an order without having his/her info autofilled and saved to his/her account. This is useful for when a user needs to complete an order for someone else but can't simply logout, because the user needs to be logged in to access a private page or allow offline payment during the order process.
In order to enable the ghost feature, add the following to a page style or designer region that appears at the start of the order process for the user.
<?php $_SESSION['software']['ghost'] = true ?>
If a user needs to exit ghost mode, see options below.
<?php $_SESSION['software']['ghost'] = false ?>
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.
You can enter a search term in the box on this screen and search for any Menu by it's properties.
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.
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.
This screen displays the Menu properties:
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.
This screen displays the properties of this Menu Item.
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.
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.
This screen displays the Common Region properties:
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.
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.
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 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.
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.
This screen displays the Designer Region Properties.
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.
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 / 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.
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.
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.
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:
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.
You can enter a search term in the box on this screen and search for any Dynamic Region by it's properties and content.
This screen displays the Dynamic Region Properties:
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!!!
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.
You can enter a search term in the box on this screen and search for any Login Region by it's properties and content.
This screen displays the Login Region Properties:
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.
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 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.
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.
You can enter a search term in the box on this screen and search for any Theme by it's properties.
To create a new Theme, click on "Create Theme".
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 a CSS Theme file to design and style the look of your HTML pages.
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:
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).
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.
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.
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.
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.
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.
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.
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' 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.
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> */
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.
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.
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.
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.
This will save your changes to the theme file back onto the server.
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.
This will not save any of your changes and exit the Theme Designer.
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.
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.
You can view and edit any File you have access to by selecting the File from any of the All Design Files screen.
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.
You can enter a search term in the box on this screen and search for any Design File by it's properties.
To create a File, click on "Upload 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.
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 one or more Design Files to the web server from your local computer.
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 a Design File to the web server. Here are the Design File Properties:
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.
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.
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.
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)
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.
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.
The Import Zip File feature will scan a compressed (zip) file and import (create) any files it finds within the compressed 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).
NOTE: If you have an existing website online and that you'd like to import it, use the Import My Site feature instead.
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 25 years.
Company