# 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.
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.
| ### HTML Page with embedded the system Tags
Add HTML Code & Tags: | Add a full and valid <HTML>page</HTML> here. NOTE: 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 the system 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:
<html>
<head>
<title></title>
<meta_tags></meta_tags>
<stylesheet></stylesheet>
</head>
<body>
<menu>main-menu</menu>
<cregion>site-banner</cregion>
<pregion></pregion>
<system></system>
<pregion></pregion>
<cregion>site-footer</cregion>
</body>
</html>
That is all it takes to create an entire, full-featured, database-driven website!

## The Path Tag

The {path} 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 {path} 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/software and will need to move the system software to http://www.example.com/software 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/software/files/example.png or
/files/example.png
Then when the system software is moved later to another directory, this link would no longer work. So instead, be sure to link to the file using the {path} tag:
{path}files/example.png

The {path} 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 {path} 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 the system to another directory off of your webroot after installation, be sure to update your .htaccess file per the system'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 the system 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 dollar 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.
<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. 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.
<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. Alternatively, if you enter a Page Name in the System Region, then the interactive Page Type for that Page will be used instead. Pages with the following Page Types are allowed to be entered in the 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 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.
<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.
<translation></translation> | This tag will be replaced with the a drop-down list of languages for your Visitors to select. If selected, all Page views will be translated until the selection is changed back. The site will continue to function, no matter what language is selected. IMPORTANT: This feature must also be enabled in the Site Settings, and the additional translation service that makes it possible to translate the Pages is also required. NOTE: There should be no spaces or characters between the set of tags. You can only define this tag ONCE in each Page Style.
### </body> |

## Previewing a Page Style

To preview a Page Style simply click on the "Preview" button. This will open up the Page Style Preview window and display a Page that is using the HTML code that is in the editor.

NOTE: The "Preview" button does not save the changes you have made to the Page Style. However, all changes will be retained in the editor until the "Cancel" button is clicked.

While previewing a Page Style you can use the "Page to Preview" pick list to change the Page you are previewing to any Page within your site. This is helpful when building micro-sites.

NOTE: While previewing a Page Style, if you click on a link that is on the Page that you are previewing then it will take you out of the preview mode.

## Fixing a Broken Login Page

Since even the system 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.mywebsite.com/login/index.php?u=username&p=password
WE RECOMMEND YOU MAINTAIN A BOOKMARK USING YOUR OWN WEBSITE, USERNAME, AND 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, so you and your other Users can use the Login Page again!