Custom pages

Availability

XS version 24 or later

Related articles

Infradox XS tags, functions and conditions

Adding Custom CSS

Adding Javascript to your pages

Infradox XS Widgets

Building a custom header and menu (26)

Building a custom footer

Building a custom home page

Custom rewrite rules

XS URL's explained

Introduction

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

Prerequisites

You must have a solid understanding of javascript, HTML and CSS if you want to build a custom home page. You can of course hire a web developer (us or any other developer) to this for you. 

Before you start building a custom page, you should have read the following articles: 

Simple custom pages with editable text

The simple 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 (if you are logged in with an admin account).

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)

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 simple custom pages explained above, you can create up to five separate custom pages with the Code editor. Or up to 10 pages starting with XS version 26.

If you have 26.4 or later, 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 custom page 2 and so on, up to 5 for the 5th custom page that you have made.
  • 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)

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

Building your page

Use a browser with developers tools installed so that you can inspect the elements on the page. We recommend Google Chrome.

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 <?xs text('textid') ?>  (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.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk