Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Introduction

The purpose of this guide is to ease the understanding of the front-end configuration of Web Check-in and KIBE systems, through the CSS application.

The accesses to each module are divided into the following categories:

  • Backoffice: contains the general administration of each module to perform the tasks of maximum configuration
  • WebApp: access to applications

 

 

Kiu Static

 

Styles settings


The experience of navigation and ease offered by a site to be able to use it is as important as the one that the user experiences through the vision. Both factors influence positively or negatively on him and predispose him in the same way for the rest of the session. There are combinations of shapes and colors that allow the harmony between these elements and a consequent relaxation of the senses, without mentioning how important they are for the identity of the brand. KIU offers the opportunity to customize the typography and colors in the different sections of your page, accompanying the essential style of your product / service. To achieve this, KIU grouped the different sections and functionalities in a standard way to select the colors and fonts that best suit their style.

Access

 

Design

 

Allows you to select if the header or footer of the page (s) will contain a custom design or extracted from some URL, so we can load an image by selecting a file (Upload image), from a URL (Upload URL) or not upload nothing at all (Without Header). In the same way, we will proceed with the footer. In both cases, we can always see the file or image currently loaded by clicking on View Current Header or View Current Footer.

Also Cancel / Save: both buttons cancel or save the operation respectively.

Note: in case of loading a URL for header / footer, it must be HTTPS (ONLY FOR PRODUCTION ENVIRONMENT)


Styles

Styles allow you to modify the color and fonts of the different detailed sections by pressing the button

Title

They correspond to all texts that are titles, that is, those that indicate the content of the section.

  • Color: modifies the color tone on which the titles on the page will be displayed
  • Font-family: allows to indicate the type of typography on which the letter corresponding to the titles will be shown

NOTE: There can be several titles on one page.


Examples:

Backoffice:


Result on display:

Body

This will allow to change the style of the body of the page, its structure.

 The Body: also includes the section of booking summary placed on the right side of the screen

  • Color: modify the color tone on which the page source will be displayed
  • Font-family: allows to indicate the type of typography on which the letter corresponding to the titles will be shown


Example

Backoffice:


Result on display:

Header

The headers is the upper part of the charts and the navigation route.

This type of style will also apply for the sides on the search results, the one where the flight number is shown

  • Background-color: Change the tone of color of the background of the chart where the headers are placed.
  • Color: indicates the type of typography on which the header will be displayed


Example

Backoffice:

 


Result on display:

Flight selection

It corresponds to the modification of step two in the flow, that is, selection of flight in the rate section selected by the user.

  • Background-color:  changes the tone of the background of the fare chart selected by the user.
  • Color: modifies the color of the edge of the chart formed after the selection of the fare.


Example

Backoffice:


Result on display:

Informative Text

This option allows modifying the background color that corresponds to the descriptive text in which the conditions of the rate are indicated.

  • Background-color: modifies the background color with which the page content will be displayed
  • Color: indicates the color of the letter corresponding to the descriptive text in which the conditions of the rates are indicated


Example

Backoffice:


Result on display:

Navigation bar

Allows to modify the right edges on the section navigation route and in the information summary on the step two of flight selection.

  • Border-Left-Color:modify the tone of color of the figures on the example. 


    Example


Backoffice:

 


Result on the screen:

 Back Arrow Navigation bar


It allows the modification of the color in the navigation route located at the top of the screen.

  • Border-bottom-color: mofidies the tone of color in the bottom (posterior) part of the figures
  • Border-top-color: modifies the tone of color in the upper part (posterior) of the figures


Example


Result on display:

Button

This option allows the modification of the styles corresponding to the buttons that are in the flow of the KIBE.

Note: pop-up buttons are included in this section. An example is when the user presses the option to return from the browser.

  • Background-color: will permit the change of the background color of the buttons
  • Color: Allows the option of changing the color of the letters of each button


Example

Backoffice:


Result on the screen :

Over Button

Allows to modify the background of the button once the cursor (mouse) is positioned on it

  • Background-color:  modifiys the tone of color of the background of the button when the button is positioned on it


Example


Backoffice:


Result on display:

 

NOTE: in case of not being able to see correctly the changes, you must erase the cache of the web browser and try it again.

Next and Back - Flight Selection

Change of the background color scheme of the dates from the result of a flight search and its navigation options

 Example:

IBE

Backoffice

Summary Arrow

Change of the arrow background color used in the itinerary summary

IBE

Backoffice

 



 

Kiu Account Manager


Profile configuration

 

The permissions contained in the roles that will access the applications are available for administration in the Account Manager. These are assigned to users to enter the application with a certain profile or level of access.

As we have already mentioned, the administrator roles in the highest hierarchy are computer security users / systems that have this privilege from BackOffice.

We will use the WebApp button:

 

This will allow to access to:

  • User creation
  • Accounts 

User Creation


In this form, we can create the users that will acces the system that we choose 

By completing the fields and assigning each application a role, when creating that user he will obtain a role in those applications to be able to access and use it.

The visible roles and applications will be the same as the authenticated user has associated with their account.

We can delete, modify or consult the users created in the applications by accessing Accounts.

Accounts

 

Here we will see if the user is active or not and which role has assigned in a quick way.

Through this options we will consult , edit  or delete 

Consult

Edit

Its possible to edit all the visible users in Accounts, including your own. In case of editing an authenticated user, there is an additional option of modify the password

Here we see the additional option of CHANGE PASSWORD to edit the validated user


NOTE:each time that you modify a validated user, they will be logged off and must log in again on to the plattform


Log Out

In order to avoid wrong use of the tool, It is important to remember always log off the applications once you have finished your usual tasks. 

        

 

  • No labels