iOS Kiosk Customization

BEFORE YOU BEGIN

This guide is provided for instructional purposes only. Modification and/or troubleshooting of Cascading Style Sheets (CSS) is not supported by the FileWave Support team.

OVERVIEW

Beginning with FileWave 12.2.0 the App Portal Kiosk is fully customizable within the constraints of CSS and can be applied via a style sheet file. Existing devices that use the App Portal Kiosk Web Clip will be styled immediately. Devices with older versions of the App Portal mobile app before 12.2.0 will simply ignore the styling. Modifying elements, such as colors, icons, and layout, provides organizations with the option to style their Kiosk so that it is more consistent with their corporate branding.

Customizations to the FileWave Kiosk are implemented via the style_custom.css file. This file must be copied to the following location on your FileWave Server. Because it acts as an override file to the default style sheets, it only needs to contain the changes/modifications you want to make to the default style sheets.

FileWave Server 12.4.0 and below

Server PlatformFile Location
macOS / Linux/usr/local/filewave/django/static/kiosk/custom
Windows Server%ProgramFiles(x86)%\FileWave\django\static\kiosk\custom


You need to create the "custom" folder as it does not exist by default. You can always remove the customization at any time by deleting or moving all files from the "custom" folder.

FileWave Server 12.4.0 and above

Server PlatformFile Location
macOS / Linux/usr/local/filewave/django/user_templates/kiosk
Windows Server%ProgramFiles(x86)%\FileWave\django\user_templates\kiosk


You can always remove the customization at any time by deleting the "style_custom.css"

The basic instructions provided below can be used by anyone, including those unfamiliar with CSS. You can learn more about CSS and other customization possibilities by checking a CSS reference like this one.

BUILDING A STYLE_CUSTOM.CSS OVERRIDE FILE

To generate a style_custom.css file

  1. Install a copy of Firefox or Chrome. The instructions and screenshots below are based on Chrome but Firefox should be very similar.
  2. In the FileWave Admin console open the Client Info window for an enrolled iOS device.
  3. In the Device Details tab copy the udid for your device.
  4. In your favorite text editor create a new text file named style_custom.css.
  5. In Chrome browse to the following URL on your FileWave server, replacing with the actual address of your server and with the udid you copied from the Client Info window. You should see a page similar to the App Portal Kiosk on your iOS device.
    • https://:20443/ios/recommended_apps/
  6. Right click a desired object and pick Inspect to bring up the ElementsStyles, and Properties panes. The Elements pane will highlight the corresponding HTML element responsible for the selected page object.
  7. In the Properties pane click the disclosure triangle for the property you want to change and select the value to be changed. This will cause the desired property to be highlighted in yellow in the corresponding style in the Styles pane.


  8. Click the value for the property in the Styles pane to change it. The change will be previewed in the Web Page pane as the change is applied to the local copy of the web page. Do NOT refresh the page as you will lose all of your changes when the HTML and CSS for the page is re-downloaded from the FileWave server. If a property is crossed out or marked as inherit that means that another style is responsible for that property.
  9. Once you've verified that the property modifies the object as desired, copy the style for that object that includes property you just modified. Paste it into your style_custom.css file.
  10. Prefix your style with a comment in the form of /* My Comment */ to keep track of what page objects the custom style is modifying in case you want to make changes later.
  11. Once you've added all the customizations that you want to the style_custom.css file copy it to the following path on the FileWave server. The custom folder does not exist by default so you will have to create it. If your server is hosted on Linux use scp to upload from your Mac or use WinSCP if you are on a Windows PC.
    1. FileWave Server 12.4.0 and below: 
      1. macOS/Linux - /usr/local/filewave/django/static/kiosk/custom
      2. Windows - %ProgramFiles(x86)%\FileWave\django\static\kiosk\custom
    2. FileWave Server 12.4.0 and above:
      1. /usr/local/filewave/django/user_templates/kiosk
      2. %ProgramFiles(x86)%\FileWave\django\user_templates\kiosk
  12. Existing devices that use the App Portal Kiosk Web Clip will start to get styled immediately (the Kiosk Enterprise IPA must be closed and reopened for the changes to be applied). The Enterprise App Portal will only get styled if it's version 12.2.0 or higher. For previous versions, styling will not be applied until you deploy the newest Enterprise App Portal IPA to the device.

EXAMPLE MODIFICATIONS

Possible customization options are only limited by the capabilities of CSS. Below are a few basic examples of what’s possible. You can edit some lines below with your custom values for background colors, fonts, etc. Some styles use hex color codes while others use RGB color codes. Color codes can be converted here. A list of web safe font combinations are available here in case you decide to change the default fonts.

<code>
/* Application list background color */ 
.km-ios7, .km-ios7.km-pane .km-content { 
color: #000;
background-color: #fff;
 }
/* Application list text color */
.km-ios7 .km-list>li {
    color: #000;
    border-top-color: rgba(180,180,180,0.5);
    border-image: -webkit-linear-gradient(left,transparent 1em,rgba(180,180,180,0.5) 1em,rgba(180,180,180,0.5) 100%) 1 stretch;
    border-image: -moz-linear-gradient(left,transparent 1em,rgba(180,180,180,0.5) 1em,rgba(180,180,180,0.5) 100%) 1 stretch;
    border-image: -ms-linear-gradient(left,transparent 1em,rgba(180,180,180,0.5) 1em,rgba(180,180,180,0.5) 100%) 1 stretch;
}
/* Header and application list font */
.km-ios7 {
    font: normal 1em "HelveticaNeue Ultra Light","Roboto Light","Slate Light","Segoe WP",NokiaPureTextLight,sans-serif;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 1em;
    line-height: normal;
    font-family: "HelveticaNeue Ultra Light", "Roboto Light", "Slate Light", "Segoe WP", NokiaPureTextLight, sans-serif;
}
/* Header/footer text and selected icon color */
.km-ios7 .k-list, .km-ios7 .k-slider, .km-ios7 .km-widget {
    color: #007aff;
}
/* Header/footer background color */
.km-ios7 .km-navbar, .km-ios7 .k-toolbar, .km-ios7 .km-tabstrip {
    background-color: rgba(244,244,244,0.95);
}
/* Footer font */
.km-tabstrip .km-button {
    font-family: Arial,Helvetica,sans-serif;
    color: #a8a8a8;
    padding: .4em .8em;
    border-width: 0;
    border-color: transparent;
    background: 0;
    margin: 0;
    text-align: center;
}
/* Filter bar background color */
.km-ios7 .filter-bar {
    background-image: none;
    background-color: white;
    border-bottom: none;
}
/* Filter field background color*/
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
/* Filter field font */
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 11px system-ui;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 11px;
    line-height: normal;
    font-family: system-ui;
}
/* Item description text color */
.km-ios7, .km-ios7.km-pane .km-content {
    color: #000;
    background-color: #fff;
}

ADDING A CUSTOM LOGO

1.Move the menu icon and navigation text to the right side of the header with the following style.

/* Move menu button to the right */
.km-ios7 #apps .km-navbar .km-leftitem,
.km-ios7 #books .km-navbar .km-leftitem,
.km-ios7 #profiles .km-navbar .km-leftitem {
    left: auto;
    right: .5em;
}

2. If you want to hide the the navigation text in the header add the following style.

/* Hide Categories, Back and Close nav text */ 
.km-ios7 .nav-button .km-text { 
    display: none;
}

3. Copy your corporate logo in .png format into the same folder as the style_custom.css file and name it "logo.png".

4. Reference "logo.png" with the following style to position it on the left side of the header.

/* Place logo in top left corner */
.km-ios7 #apps .km-navbar,
.km-ios7 #books .km-navbar,
.km-ios7 #profiles .km-navbar,
.km-ios7 #infos .km-navbar {
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: .5em 50%;
}

If you would prefer to keep the menu icon and navigation text in their default locations on the left but move the logo to the right side of the header use the following style.

/* Place logo in top right corner */
.km-ios7 #apps .km-navbar,
.km-ios7 #books .km-navbar,
.km-ios7 #profiles .km-navbar,
.km-ios7 #infos .km-navbar {
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: right 50%;
}

For further reference, you can also see these steps in action in the following video: