Customising Ava Web:

From the outset Ava web has been designed to be both secure and easily customisable.

Ava web can combine with your existing static pages (php, html or aspx etc.) without excessive or expensive modification.

At its simplest, all that is required on your static pages is an additional link or links to "login", "Customers register" and or "Employees register"

We have used an edition of the Ava web site as an example:

If the above image is not suffiently clear, click on it to have a full scale version open.

How it works:

For web site styling, each customer has their own "client key". The client key is just a name that is used to uniquely refer to each Ava web site the customer has installed. This is normally the web site URL for internet facing sites and the customer's name and the database name for intranet facing sites. The client key specifies the css file to use, the icons and images to use and the html for the left and right sides of a dynamic menu. It also points to the html (template) files for email messages that the active site will generate with specific user actions.

The basic configuration of the active web pages is a (small) banner with a menu beneath. Below this there is content. The reason for this layout is that on active web pages: active content is the most important part of the page.   This is unlike the main page of a web site or static pages, where design and impact to new users is of the highest importance. On static pages design is used to capture attention, call to action and retain interest. On active pages, the user has logged on and wants the service of easily accessible information. The active page layout can be similar to the main Ava.co.uk site. We encourage customers to make the banner as small as possible. In the simplest case it may just have a company logo, name and contact numbers.

There are three examples below:

There are three parts to the Ava web menu. The example below is taken from the middle screen shot example above. These allow links back to your static pages from the Ava web active content.

The code required is standard xml of the form:

• The middle: this is active and its items dynamically change depending on the current user's log in status.

• The right hand side:  this is static and links to any static part of your current web site.
• File name: MainSiteMenuRight.xml

The code required is standard xml of the form:

 The code can be highlighted and copied from the text at the bottom of this article.

What we need from you:

Ava should be supplied with:

• A single (optionally jpg) full screen shot of how you would like your active pages to look, as per the three examples above. (You may want to have multiple levels of you menu in which case you may need to supply screen grabs of collapsed and expanded menus.)
• A single (optionally jpg) full screen shot of how you would like your blog pages to look (if you require blog pages).
  
• In addition Ava should be supplied with full quality png copies of any and all artwork to be incorporated.
• The code for the static part of the menu as per the two examples above with titles and URLs.
  
• Specification of all colours: the various colours for menus, backgrounds, foregrounds and hover effects etc. All these should be specified using the standard #rrggbb  colour notation numeric definitions.
• Specification of any fonts to be used and their default replacements if not available on the local browser.

Links you might find helpful:

• What are the installation options for Ava web?

Free Microsoft XML Notepad editor

Greenshot: a good free screen grab tool which allows capture of expanded menus, tool tips etc.

The xml code snippets:

MainSiteMenuLeft.xml

<ul id="treemenu1">
  <li>
    <a href='https://swbhweb/'>Home</a>
  </li>
    <li>
      <a href='https://NurseBank/'>Nurses Home</a>
    </li>
</ul>

MainSiteMenuRight.xml

<ul id="treemenu2">
    <li>
      <a href='https://www.ava.co.uk/search.aspx'>Locums</a>
    </li>
    <li>
      <a href='https://www.ava.co.uk/contact-us.aspx'>Admin and clerical</a>
    </li>
</ul>