Customization (Skins) - SiteKiosk Help

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

SK-installation folder/Bitmaps/sitekiosk_title.ico
The SiteKiosk icon on the top left of the title bar of the new browser windows and in the window selection of the task bar can be replaced with your image. To do this create an icon file named sitekiosk_title.ico under ..\SiteKiosk\bitmaps.
SK-installation folder/Bitmaps/watchdog_bg.jpg
This is the background image of the SiteKiosk Software Watchdog. This can be seen, for example, if SiteKiosk restarts during run time.
SK-installation folder/Skins/public/default/naverror.htm or SK-installation folder/SiteKioskNG/assets/errorPages/error.html
SiteKiosk will display this page for navigation errors, i.e. "404 page not found". You can replace or edit this file to show personalized information or perform specific tasks on the page using a script (i.e. SiteKiosk Object Model).
SK-installation folder/SiteRemote/background.bmp
This is the background image used for the SiteRemote VNC maintenance lock screen.
SK-installation folder/SiteRemote/protect.bmp
This is the background image used for the optional maintenance lock screen when executing SiteRemote jobs. The file does not exist by default and only needs to be created if an alternative background image is desired.
C:\ProgramData\PROVISIO\SiteKiosk\files\apps\siteCasterCMS\player_default_img.png
Create a custom SiteCaster placeholder image at this location. The file will be displayed when no SiteCaster project is running. The image can also be changed by using the file upload job on a SiteRemote Server.

The default placeholder image for SiteCaster (player_default_img.png) is stored at:
C:\ProgramData\PROVISIO\SiteKiosk\files\apps\siteCasterCMS\app_0\player\assets\images
The default image is part of the SiteCaster app. If the SiteRemote Server is rolling out an updated app version the file will be replaced.
SK-installation folder/SiteRemote/background.bmp
This is the background image used for the SiteRemote VNC maintenance lock screen.
SK-installation folder/Skins/Chrome_NG_Skin/TrayWnd.html
In this file you can look for <span class="logo">SiteKiosk</span> to change the SiteKiosk writing from the start menu of the Chrome Browser task bar to something different.

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 Metro IE 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/Windows_8" and file "Skins/Windows_8.skskin".

Path to the Metro IE Skin: SK-Installation folder/Skins/Windows_8

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 Metro IE Skins (SK-Installation folder/Skins/Windows_8.skskin):

<preview>skins\Windows_8\Preview.jpg</preview>

<skindef>skins\Windows_8\Windows8Skindef.xml</skindef>

</browserskin>

</skin>

The applicable file for the Metro IE skin can be found here:

Path of the skskin file for the Metro IE skin: SK-Installation folder/Skins/Windows_8.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 Metro IE Skins: SK-Installation folder/Skins/Windows_8/Windows8Skindef.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 Metro IE Skin:

Path to the preview image of the Metro IE Skin: SK-Installlation folder/Skins/Windows_8/Preview.jpg

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: