Skip to content

Customizing Kiosk Theme

Supported display resolutions and orientations

The following display modes and resolutions are supported by the Smart Guest Check-In application:

  • Default theme
    • Landscape mode: 1920 x 1080 (Full HD)
    • Portrait mode:  1080 x 1920 (Full HD)
  • Low resolution theme
    • Landscape mode: 1024 x 768
    • Portrait mode not supported for low resolution theme

Changing Kiosk Images and Building Custom Themes

To build a custom theme, you will need Kiosk Client's default "styles.css" file which is located in the Kiosk Client installation directory under "Themes\Default" folder.

Copy the content of the default theme in to a separate folder, in the Custom folder, created at install time, in C:\ProgramData\NEC\kiosk\Custom (Ex: Themes\MyTheme) and modify the styles.css file to achieve the desired look & feel.

Media content used by the new theme should be put into separate folder, just like the images are put in the Images folder for the Default theme.

To tell the Kiosk app to use a specific theme, you modify the kioskconf.json file to have the theme under theme_options pointing to the desired theme.

"theme_options": {
    "theme": "MyTheme"
}

To have a visual feedback while making modifications, consult an NEC representative for steps to use the Dev Tools provided by the browser in which the Kiosk app runs.

Once an NEC representative provides instructions to open the Dev Tools, launch the Kiosk application, and press Ctrl + Shift + F12. To change a specific style for an element, click on the Elements tab to see the html content of the page.

Press the Inspect button (small rectangle with an arrow on it) or Ctrl + Shift + C. Hover with the mouse cursor over an element in the page, like the Check In button. You will see the element highlighted.

Select it by pressing the mouse button. In the Styles tab you will see all styles applied to the selected element. Modify the styles in your css to meet your needs. Ex: Set the background-color: red;  style to the .checkin-btn class. The button will turn red in the page. You can close the Dev Tools Console to see how the page looks in full screen. The changes will be preserved. Once you know what styles you want to change, modify the styles.css from the theme folder accordingly and reload the Kiosk app to see the changes.

Most html pages in the Kiosk app are simple list of elements with no positioning information and little or no hierarchy. This allows you to add the placement rules inside the style sheet by using grids and flex boxes. The default theme uses grids and flex boxes for the elements positioning inside the page.

Change default theme to use videos instead of images

For some of displayed pages, Kiosk Client default theme can be customized to display videos content instead of images/gifs.

To add support for video content, you need to use the following css classes in your custom css file. Since is not possible to have both videos and images for the same element, you need to remove the css classes used to display image elements.

Videos support Images support Comments
Passport page 
.passport-insert-video {
  @extend .passport-animation;
  content: "videos/insert.mp4";
}

.passport-remove-video {
  @extend .passport-animation;
  content: "videos/remove.mp4";
}

.passport-flip-video {
  @extend .passport-animation;
  content: "videos/flip.mp4";
}
 
.passport-gif-insert {
  @extend .passport-animation;
  content: url("images/generic/insert.gif");
}

.passport-gif-remove {
  @extend .passport-animation;
  content: url("images/generic/remove.gif");
}

.passport-gif-flip {
  @extend .passport-animation;
  content: url("images/generic/flip.gif");
}
  • displays different images/videos for each scanner document state (insert/flip/remove)
  • videos folder must contain insert.mp4, remove.mp4 and flip.mp4 media files.
Add Credit Card page 
.add-credit-card-video {
  @extend .add-credit-card-animation;
  content: "videos/ccswipe.mp4";
}
 
.add-credit-card-gif {
  @extend .add-credit-card-animation;
  content: url("images/generic/ccswipe.gif");
}
 videos folder must contain ccswipe.mp4 media file.
Keycard page 
.keycard-video {
  @extend .keycard-animation;
  content: "videos/keycard.mp4";
}
 
.keycard-img {
  @extend .keycard-animation;
  content: url("images/generic/keycard.png");
}
 videos folder must contain keycard.mp4 media file.
Keycard Return page 
.keycard-return-video {
  @extend .keycard-animation;
  content: "videos/keycard-return.mp4";
}
 
.keycard-return-img {
  @extend .keycard-animation;
  content: url("images/generic/keycard-return.png");
}
 videos folder must contain keycard-return.mp4 media file.

Change background image

To change the background image, select an image of the appropriate size and place the new image in the Custom folder in C:\ProgramData\NEC\kiosk\Custom\Themes\MyTheme\Images ensuring the name of the .png file remains appbackground.png.

//

Change NEC logo and other images

The logo seen in the top left corner of the screen can be replaced by replacing the logo.png file with a new image of the appropriate size. The logo.png file can be found in the "\Themes\MyTheme\Images\generic" folder.  Other images seen throughout the Kiosk Client can be replaced in the same manner and are also located under the "generic" folder. Any of these images can be replaced in order to achieve a custom look.

When creating a new theme or using a new set of images, you should follow these rules:

  • File extension should match the existing one.
  • Aspect ratio of the custom image should match the image being replaced.
Image name Recommended image size (px) for a 1920x1080 display
appbackground.png 1920x1080
welcome.png 1920x1080
en-uk.png, en-us.png, es-mx-png, ja-jp.pngm ms-my.png, zh-cn.png 760x400 min height: 66px
logo.png 400x110 min height: 60px
hotel.png 1920x1080
disconnected.png 460x460
keycard.png 750x660
keycard-return.png 750x660
ccswipe.gif 280x500
flip.gif 600x190
insert.gif 275x500
remove.gif 275x500

Swap language images

Language images are available in the flags folder.

//

There are two methods for changing the image displayed for a language:

Method 1 - Modify file name on disk: Navigate to the flags folder in the desired theme "\Themes\MyTheme\Images\flags". Swap the name of the image file for the name of the image to be seen with the name of the current active image for the desired language.

Example

To show the Great Britain flag for English language instead of the United States flag, rename the image called "en-us.png" to be "en-us_flag.png" and then rename "en-uk.png" to be "en-us.png".  Now when the English flag is displayed in the Kiosk Client, the Great Britain flag will be seen instead of the US flag.

Example

To show the Spanish language image instead of the flag of Mexico, rename "es-mx.png" flag image to be "es-mx_flag.png" and then rename "es-mx_text.png" to be "es-mx.png". Now the Spanish language text image will be seen in the Kiosk Client instead of the Flag for Mexico.

Method 2 - Modify name of file to load: Navigate to the root theme folder for the desired theme "\Themes\MyTheme". Open the "styles.css" in an editor. Locate the file name to change by searching for the comment section called /*Custom images for the language buttons*/. Modify the content url file name for the language image that you wish to change to be the name of the image that you wan to be seen.

Example

To change the image from the US flag image to the English language name image, locate #enImg in the styles.css file

#enImg {
    content: url("images/flags/en-us.png");
}

and change the url file name to:

#enImg {
    content: url("images/flags/en-us\_text.png");
}

The English language name image will now be seen instead of the US flag image.

Hide language description under language image

The language description can be hidden for individual language images or all language images. This

//

To hide the language description for all language images do the following:

Navigate to the root theme folder for the desired theme "\Themes\MyTheme". Open the "styles.css" in an editor and locate the comment section /*Language button text selected*/ and /*Language button text unselected*/ and insert the property display: none; as seen in this example.

Example

The section after modification:

/*Language button text selected*/
.div-lang-selected {
  font-weight: bold;
  font-size: 20px;
  color: #002b62;
  display: none;
}

/*Language button text unselected*/
.div-lang-unselected {
  font-size: 18px;
  color: #000;
  display: none;
}

To hide the language description for a single language images do the following:

Example

Navigate to the root theme folder for the desired theme "\Themes\MyTheme". Open the "styles.css" in an editor. Locate the tag for the language description to hide (for example, ptImg). Below it add the following new property as seen in this example. Repeat for each language description that needs to be hidden.

ptImg {
  content: url("images/flags/pt-br.png");
}

#ptLang > div (
  display: none;
}

The page footer can be customized or removed by changing the ===== Footer Component ===== section from the styles.css file.

//

To update the footer text, change the "content" field for each of the footer sections. To update each section, search for the following:

  • Address: ".footer-address:after"
  • Phone: ".footer-phone:after"
  • Email: "footer-email:after"
  • Copyright: "footer-copyright:after"

To remove a single field and allow the spacing to auto adjust, comment out the section with comments of this style /* .... */.

Example

To remove the Copyright and shrink the footer, the commented section would look like this:

/*
.footer-copyright {
  padding: 1vh;
  padding-bottom: 2vh;
}

.footer-copyright:after {
  content: "Copyright © NEC Corporation of America 2019. All Rights Reserved.";
  font-size: 2vh;
  color: #002b62;
  padding-left: 1vw;
  padding-right: 1vw;
}
*/

//

To hide the whole footer, search for "app-footer".  Change the "display" field from "flex" to "none".

Change Font-Family

The Kiosk Client installation does not deploy and install any specific fonts. The default font-family used in the default theme is "Verdana".

Any font-family installed on the Kiosk's Windows machine can be used in the styles.css file to customize the font.

To change a font, locate the "font-family:" property in a desire element to change. The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

An example line with multiple names will look like this where if Noto Sans is installed on the Windows machine, it will be used else Arial will be used otherwise the sans-serif family.

font-family: "Noto Sans", "Arial", sans-serif;

Warning

DO NOT change any locations that have "FontAwesome" listed. "FontAwesome" is a custom control, and it inherits the fonts from the main font section. If "FontAwesome" font family is removed, the layout and controls will break.

Change button and text color

First, you need to identify the css class of the element you want to change.

Launch the Kiosk Clint, and press Ctrl + Shift + F12 to open DevTools

Click on the Elements tab to see the html content of the page and press the Inspect button (small rectangle with an arrow on it). Then, drag the mouse cursor over the element in the page, let's say CheckIn button. As you can see, .checkin-btn is the css class of this element.

//

Now, open styles.css from MyTheme folder and modify the current colors with the new ones.

Note

Changing a button's style is not an easy task. You must pay attention to hover, focus and disable states of the button, because they need to be overwritten as well. Take for instance .checkin-btn css class:

.checkin-btn {
  background-color: #002b62;
  color: #fff;
}

.checkin-btn:hover {
  background-color: #002049;
  border-color: white;
  color: #fff;
}
.checkin-btn:hover::before {
  background-color: #002049;
  border-color: white;
  color: #fff;
}

.checkin-btn:disabled {
  background-color: #00367c;
  border-color: white;
  color: #fff;
}
.checkin-btn:focus {
  box-shadow: 0 0 0 0.2rem #002049;
  outline: none;
}
.checkin-btn:not(:disabled):not(.disabled):active {
  background-color: #002049;
  border-color: white;
  color: #fff;
}
.checkin-btn:not(:disabled):not(.disabled):active:focus {
  background-color: #002049;
  border-color: white;
  color: #fff;
}