Home > Customization (Skins)

Customize SiteKiosk

The browser layout, start page layout and on-screen keyboards can be individualized in ANY possible way.

The SiteSkin technology is based on open Internet standards, such as HTML, Javascript, XML, etc. and is similar to setting up a website.

1. Browser Layout

The browser layout or skin is shown in a separate browser. In this browser is a second browser that the surfing window is embedded in. Communication between these two browser windows is possible. The design of the skin is mostly implemented in HTML, and has special functions that can be controlled with the proprietary javascript extension called the SiteKiosk Object Model. Detailed documentation of the SiteKiosk Object Model can be found here.



2. Start Page Layout

A special form of the browser layout is the start page layout. The skin is used as a start page in the SiteKiosk browser. Depending on the structure of the start page layout this is always visible as the main window of SiteKiosk or is switched to call a URL in a normal browser layout.



3. On-screen Keyboard Layout

The on-screen keyboard layout consists essentially of at least two .jpg images. One shows the keys pressed, the other raised. These images are used, similar to a client side image map as used in websites, to define areas that can be clicked. It is defined in an xml-based file.



4. Configuration Tool

The configuration tool of SiteKiosk is HTML based and can be completely redesigned. If you have questions, please contact us.



5. Keyboard Remapping

In the kiosk industry, public terminals often use special hardware keyboards with extra features which can be executed.
It is, for example, possible to implement a keyboard that in contrast to a conventional keyboards has an "http://" key or additional scroll buttons. SiteKiosk allows you to, for example, allocate the F4 key with a "scroll down" function. It is also possible to assign keys to link to the websites of advertisers etc.


6. Customizable files

Please note:
To create a new browser or keyboard layout some fundamental knowledge is necessary. For understandable reasons, we cannot offer free support (except for the detailed documentation found here and the documentation of the SiteKiosk Object Model) to assist in the creation of your own skins.



7. Manually Configurable Options

Some configuration options of SiteKiosk cannot be edited via the graphical configuration tool interface of SiteKiosk. These are certain options that do not normally need to be changed. A summary of these options can be found on this page.


8. Required components for the creation of individual browsers, start pages and keyboard layouts

8.1 Template
Please use an existing browser or keyboard layout as a template.

When creating a browser layout, the SiteKiosk IE7 skin can be used as a template since this skin already contains all the necessary components and it will be easier to customize an existing skin to meet your requirements. Before testing your customizations, please make a backup copy of the folder "Skins/IE7" and file "Skins/IE7.skskin".

  • Path to the IE7 Skin: SK-Installation folder/Skins/IE7

Follow the same rules when you create a keyboard layout. Use, for example, the International layout as the basis for your custom keyboard. In this case, create a backup copy of the folder "skins/Provisio/lightweight_int" and file "skins/provisio_lightweight_int.skskin".
  • Path to the International keyboard layout: SK-Installation folder/Skins/Provisio/lightweight_int
8.2 skskin File
This XML file ensures that the layout is displayed in the SiteKiosk configuration. The name of the skin and also the preview image for the configuration tool is defined in this file. Below an example of the skskin file of IE7 Skins (SK-Installation folder/Skins/IE7.skskin):

<skin name="IE7 Skin" filename="IE7.skskin">
          <browserskin name="IE7 Skin">
                    <preview>skins\IE7\Img\Config\Preview.png</preview>
                    <skindef>skins\IE7\IE7Skindef.xml</skindef>
          </browserskin>
</skin>

The applicable file for the IE7 skin can be found here:
  • Path of the skskin file for the IE7 skin: SK-Installation folder/Skins/IE7.skskin
The skskin file of the International keyboard layout can be found here:
  • Path to the skskin file for the International keyboard layout: SK-Installation folder/Skins/provisio_lightweight_int.skskin
Detailed documentation for the skskin file can be found here.
8.3 Definition File
This XML file contains all the definitions that determine the basic layout of the browser or the on-screen keyboard and points to other files that are required for correct display.

For a comprehensive description of the definition file for browser layouts click here.
  • Path to the definition file of the IE7 Skins: SK-Installation folder/Skins/IE7/IE7Skindef.xml
For a comprehensive description of the definition file for keyboard layouts click here.
  • Path to the definition file for the International layout: SK-Installation folder/Skins/Provisio\lightweight_int/lightweight_int.xml
8.4 String Table (Browser skin language elements)
Theoretically you can make SiteKiosk available in as many languages as you need. In the definition file of the browser skins, the available languages for a skin are defined ​​and linked to a corresponding stringtable.xml file that refers to the translation. The documentation for this file can be found here.
  • Default stringtable.xml: SK-Installation folder/Language/Browserskins/stringtable.xml

 

When pressing the Logout button or when the screensaver activates, the display language is automatically reset to the default system language.

Keyboard layouts and start page layouts do not have a separate stringtable.xml. The start page layouts generally fall back to the translation files of the browser layout. The relevant language definitions for a keyboard layout can be found directly in the definition file of the layout.
8.5 Skin Preview
To display a preview of the browser layout in the configuration tool, SiteKiosk will need a preview image of the skin. This must be the file format .png (in 24 bit color depth) and of the image dimensions 256 pixels wide by 92 pixels high. Popular image editing programs offer the creation of this format.

Corresponding file of the IE7 Skin:
  • Path to the preview image of the IE7 Skin: SK-Installlation folder/Skins/IE7/Img/Config/Preview.png
And of the International keyboard layout:
  • Path to the preview image of the International Layout: SK-Installation folder/Skins/Provisio/lightweight_int/preview.png
8.6 Skin Files
A wide variety of files like HTML, Javascript, XML, CSS and image files etc form a skin. These files make up the actual skin. Some of these files are explicitly referenced in the definition file of the layout. These are then used by SiteKiosk to directly represent the layout of the skin. The other files like images in HTML files are in turn linked and make up the visual elements of a skin. The contents of these files are too diverse to be covered here. As already mentioned, we recommend the introduction to the subject with the files of an existing skins to get an idea of the possibilities.

More information:

See also

Welcome
New Features
Scope of Supply/Installation
Support
System Requirements
Demo Version Restrictions
Registering SiteKiosk
PROVISIO Contact Information
Remote Monitoring (SiteRemote)
Guide for First-Time Users
Basic
Plus
System Security Manager
OpenSource Components
About


Back to top