Scroll

Customise the askiavista 6.x interface

Customise the askiavista 6.x interface

Follow
Summary This article describes how to customize the askiavista 6.x interface.
Applies to askiavista
Written for Data processor
Keywords interface; customize; vista; askiavista

Table of contents:

Pre-requisites

  1. In order to customise askiavista's log in page, you will need to be running version 6.0.1.1 minimum. In-app customisation is available to version 6.0.2.1 and higher.
  2. You need to have good knowledge of web technologies, such as HTML, CSS & JavaScript

The log in page



In the AskiaVista6/build folder, there are 3 files you should copy and paste into the AskiaVista6/custom folder (so future updates won't overwrite your custom login page):

  • Login.html
  • Login.css
  • BrowserCompatibility.html

Both html pages use JavaScript injection with <% %>, you can keep or remove it if you want.
Everything is customisable but you have to keep the following elements:

  • <div> tag with the askia-account-element class
    This element must encapsulate the entire login page.
  • <form> tag with the askia-account-form ID
    This element must encapsulate all inputs and the submit button.
  • <input> element with the askia-account-user ID
    This element is use for the user login
  • <input> element with the askia-account-password ID
    This element is use for the user password (must be password field)
  • <div> element with the validation-summary-errors class
    Container of error messages
  • A submit button
    The submit event will try to log the user in.


At the bottom of the page, there is a link which displays the list of all compatible browsers.
To trigger the modal window which displays this list (can be skipped), you may keep the link with the id askia-account-modern-browser.
In that case the page displayed will be the BrowserCompatibility.html.



The login.css is entirely customisable.

The application logo

Users can also customise the Application logo that is displayed in all applications Views. The Application logo is used as a visual cue so users can identify the module which they are using; it also triggers the application's About modal1.

To do so, browse your askiavista server to wwwroot > AskiaVista6 > build > img >.

There are two files for the Application logo:

  • the base logo image
  • the logo image hovered by the user


Both files are exactly 54px wide by 49px high, so whatever image files you decide to customise your askiavista environment with, they must have exactly the same size and name.

And of course, the image files you use must also be .PNG files (with or without alpha transparency). We also advise you to optimise both .PNGs in order improve HTTP requests. To do so, you can use:

Primary accent color

askiavista's interface makes use of a primary accent color, a shade of blue (#0073EA) that is used on all primary / call-to-action elements within the application (e.g Save, New, Open, View buttons, ...).

We will soon open this variable to be modified by users.

Secondary accent color

askiavista's interface makes use of a secondary accent color, fuchsia (#FF0084) that is used on all secondary / call-to-action elements within the application (e.g Remove, No, Delete, ...).

We will soon open this variable to be modified by users.

Element highlight color

askiavista's interface uses the above primary accent color (#0073EA) to highlight selected elements  (e.g questions in the treeview, questions or responses in Rows / Columns or Edges, ...).

We will soon open this variable to be modified by users.

Disclaimer

Except when specifically authorized in the above points, askiavista's components and system files, such as .DLL, .EXE, .JS, .LESS, .CSS and .ASPX files, are not to be modified or tampered with.
Any change or modification made on such askiavista components which are not covered and authorised in the above points, whether these pertain to the application's system files, database and/or components, can lead to display problems and/or even application reliability & stability issues. By undertaking such unauthorised changes the client forfeits his or her right to obtain technical assistance on askiavista from Askia's support team.

1 the application's About modal cannot be modified or tampered with in any way.

Have more questions? Submit a request

Comments