Adding custom pages

XS websites support simple dynamic custom pages with editable text, and you can create completely custom-built pages with the code editor.

Important: Although the below functions are still supported for Flex websites, it is recommended to use the pages function instead. You’ll find this function in your admin dashboard.

Recommended reading: Infradox URL’s explained, URL rewrites, Infradox XS customisation, Loading custom HTML with Ajax.

URL’s for your pages

You can create URL rewrites if you want to use different URL’s to access your new page. This is possible for the dynamic pages as well as for the custom-built pages (explained further down).

For example, if you have created a page with information about your prices:

http://www.mywebsite.com/pricing-information.html
instead of
http://www.mywebsite.com/c/1/20/somecustomname.html

Simple custom pages with editable text

The dynamic database pages use a standard template with a database text area. You do not need to learn about the Code editor to use this function. The text areas can be edited by administrators with such permissions while browsing the client facing pages. To access such a page, use the following URL structure:

/c/0/[pageid]/[pagename]

Replace [pageid] width a number between 4000 and 4999
Replace [pagename] with the page title that you want to use (can be anything and may end with .html but that’s not required)

For example:
http://www.mywebsite.com/c/0/4030/mycustompage.html

If the database doesn’t contain editable text for the specified id yet (in this example 4030) – then it will create it on-the-fly (requires you to be logged in with an admin account with appropriate permissions).

If you want to highlight a menu item, the you must include the menu item id on the url:

/c/0/[pageid]/[menuid]/[pagename]

Replace [pageid] with a number between 4000 and 4999
Replace [menuid] with the id of the menu item that you want to highlight
Replace [pagename] with the page title that you want to use (can be anything and may end with .html but that’s not required)

The pagename part may contain only letters a to z, numbers, dashes and underscores.

For example:
http://www.mywebsite.com/c/0/4030/20/mycustompage.html

Localisation

The text that will be displayed depends on the active locale (the user interface language). To edit other locales, select the language first and then go to the same URL.

Building custom pages with the code editor

In addition to the dynamic custom pages explained above, you can create custom pages with the Code editor. You can name the custom templates so that it is easier to see what you are using the custom pages for. The custom pages can be accessed with the following URL structure:

/c/[custompageid]/[menuid]/[pagename]

Replace [custompageid] with 1 for custom page 1, 2 for page 2 and so on (the maximum is 20).
Replace [menuid] with the id of the menu item that you want to highlight
Replace [pagename] with the page title that you want to use and make sure to add .html to the “pagename” part.

The pagename part may contain only letters a to z, numbers, dashes and underscores, and it must end with .html

For example:
http://www.mywebsite.com/c/1/0/somecustomname.html

Building a custom page with the editor

Recommended reading: Using the code editor, Infradox XS customisation.

The custom pages need the following divs, both for styling and for the Infradox Javascript that’s included in your page.

<div id="pagewrapper">
     <div id="contentwrapper">
          <div class="centeredcontent">
          </div>
     </div>
</div>

With just the above HTML you will have a blank custom page.

As described in the article about building a custom home page, you can now add the masthead html and footer html to your page so that your code will look something like this:

<div id="pagewrapper">
      <?xs html('mainmenutop.inc') ?>
     <div id="contentwrapper">
          <div class="centeredcontent">
          </div>
     </div>
</div>
<?xs html('pagefooterblock.inc') ?>

Save your page and go to the URL to make sure that it works as expected. Next, you can add additional HTML, CSS, editable text blocks, XS widgets and so on.

Editable text blocks on the custom pages

You can use the tag (where textid must be replaced with a number) to add a text block that can be edited on the client facing pages. The textid must either be one of the predefined ids or you can use a number between 4000 and 4999 to dynamically create a record in the database.

Highlighting an item in the main menu

You can use the tag <?xs menu(‘id’) ?> to highlight a menu item (show as active menu). ‘id’ must be replaced by a valid menu id between apostrophes. You can use a code inspector to find out the id of an element in the menu.
Adding your custom pages to your menu

When you are done, you can add the url to your custom page to the menu via Site configuration, Pages and menu. You can of course also embed the urls to your custom pages in your footer HTML and editable text blocks anywhere on your website.