Provided with the Alternative Website are two pages: Template1.html and template2.html. This is to enable you to generate your own pages while retaining the design of the website.

The Template.html page includes many of the available column layouts but little else. It is provided as a basic starting point for generating your own pages. infopage.html is similar but also includes a lot of extra information and demonstrates alternative styles that can be applied both to your own pages and the existing ones. This page is not really intended to be used it is more to give you ideas to customise the website for yourself. It shows a number of gradients and variations on the title bars that can be used.

It is now possible to have 7 column layouts. Columns are created using one of the following classes on a <div> element. .ax-column1, .ax-column2, .ax-column3, .ax-column4, .ax-column5, .ax-column6 or .ax-column7.

Open the template page in your chosen html editor and decide what columns are required. For example, you may want single and two columns only or perhaps, single and 6 columns.

Locate the <!– X column … –> sections for your desired layout and delete the ones you don't need. By default, columns will always expand to fill the whole site width when there are not sufficient panels. I.e., if there are three panels in a four column layout, they will all grow sideways to fill the full width. If you would prefer the panels to be distributed as four panels, then add the style ax-fixedwidth to the same div as the ax-columnX style.

One feature of this design is that you can still override the column widths for identified panels. I.e., have three panels in a four column layout with one of them spanning two panel widths. This is done by adding the style ax-growX2 to the required panel. There is also the option to add ax-growX3 or ax-growX4 but these will only work in columns with more than the grow factor used.

There is usually an html title above each one which you may also decide that you don't want - delete as required.

In each section, each panel has been identified. If you need more, this is the time to copy and paste them. There may be slight differences between each panel so choose the one that matches most closely with your requirements.

Each panel usually has a title in an 'ax-titleBar'. Title bars can take multiple elements as long as there is space in the panel for it. Edit as required. The class 'ax-expand' is used to force the background to cover the full width of the panel so is only required if a background colour is used for the title bar.

Each panel usually has a paragraph with the text Content in it - this can be replaced with your required content.

• Each panel has either the style ax-card or ax-container. They are the same except for the shadow on the ax-card.
• Each panel can accept a theme colour - ax-theme1 to ax-theme9 or a gradient ax-gradient-up, ax-gradient-down, ax-gradient-left or ax-gradient-right. If no colour is added then they are effectively transparent.
• Each panel can accept an animation: ax-animate-drop, ax-animate-menu, ax-animate-expand, ax-animate-fadeAcrossDown or ax-animate-fadeDown. Use with caution!
• Each panel has an order style of 1. Changing this will change the order in which they are displayed - its ascending numerical order or the coding order.

• If adding rows of data to a panel then use the class ax-dataBar. This provides the hover highlighting used on the site.
• Title Bars and Button Bars are not limited to being at the top of a panel - they can be used anywhere.
• If using buttons in a title bar or button bar, you can limit the width of the button using the style: max-width:xx<units>. I don't recommend setting an absolute width as this may not work on all screen sizes.