Custom CSS Styling & Zoom Level Settings

Supported in:

Kiosk Pro Plus and Enterprise versions

Customize how a webpage is displayed using your own custom CSS. This feature can be used for third-party sites where you wouldn't otherwise have the ability to add your own CSS directly to the page or to present a custom version of your own website specifically for kiosk use.

If you use this feature with a third-party site, you will want to check your kiosks on a regular basis to make sure that the underlying page has not changed and that your CSS styles are being applied as expected.

Enable Custom CSS

Custom CSS is added at the end of the head tag. If the page defines specific styles inline within their HTML tags using style= or places a style tag within the body of the page, those styles will take precedence over any custom styles added through Kiosk Pro.

Values for Remote Settings Control & Managed App Configuration

Key injectCSSSnippetForSpecificURLEnabled
Key Type boolean
Default Value false

Matched URLs

Define one or more URLs (web addresses) where custom CSS will be inserted.

This setting can accept multiple URLs, which should be separated by semicolons. It also supports wildcard characters so you can match multiple or dynamic URLs in that way as well:

  • ? - matches any character zero or one time, matching only one time
  • * - match any character zero or more times, matching as many times as possible
Wildcard examples:
  • '1' is matched by: '*' or '?'
  • '12' is matched by: '*' or '**' or '*?' or '*2' or '1*' or '??' or '1?' or '?2'
  • '123' is matched by: '*' or '???' and so on

For example, if you were using a URL that appended a dynamic parameter like where ‘term’ could be any value, you could use a wildcard match.

Setting the Matched URL setting to* would mean that any URL that matched the part of the string preceding the ‘*’ character would have custom CSS applied.

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 specificURLPattern1ForCSSFileName1
Key for Group 2 specificURLPattern1ForCSSFileName2
Key for Group 3 specificURLPattern1ForCSSFileName3
Key for Group 4 specificURLPattern1ForCSSFileName4
Key for Group 5 specificURLPattern1ForCSSFileName5
Key for Group 6 specificURLPattern1ForCSSFileName6
Key for Group 7 specificURLPattern1ForCSSFileName7
Key for Group 8 specificURLPattern1ForCSSFileName8
Key for Group 9 specificURLPattern1ForCSSFileName9
Key for Group 10 specificURLPattern1ForCSSFileName10
Key Type string
Default Value (blank)


Apply custom CSS styling and/or zoom levels in a more targeted way by excluding specific URLs from a customization rule set. Custom CSS and zoom levels will not be applied to these URLs. 

Includes support for wildcard characters - see Matched URLs above for more detail.

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 specificExclusionsURLPattern1ForCSSFileName1
Key for Group 2 specificExclusionsURLPattern1ForCSSFileName2
Key for Group 3 specificExclusionsURLPattern1ForCSSFileName3
Key for Group 4 specificExclusionsURLPattern1ForCSSFileName4
Key for Group 5 specificExclusionsURLPattern1ForCSSFileName5
Key for Group 6 specificExclusionsURLPattern1ForCSSFileName6
Key for Group 7 specificExclusionsURLPattern1ForCSSFileName7
Key for Group 8 specificExclusionsURLPattern1ForCSSFileName8
Key for Group 9 specificExclusionsURLPattern1ForCSSFileName9
Key for Group 10 specificExclusionsURLPattern1ForCSSFileName10
Key Type string
Default Value (blank)

Local File Path for Custom CSS

Define the local file path for the custom CSS file to be inserted.

Custom CSS files must be stored locally in the Kiosk Pro documents folder. Instructions on moving files to the device are available here.

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 specificCSSFileName1ForURLPattern1
Key for Group 2 specificCSSFileName1ForURLPattern2
Key for Group 3 specificCSSFileName1ForURLPattern3
Key for Group 4 specificCSSFileName1ForURLPattern4
Key for Group 5 specificCSSFileName1ForURLPattern5
Key for Group 6 specificCSSFileName1ForURLPattern6
Key for Group 7 specificCSSFileName1ForURLPattern7
Key for Group 8 specificCSSFileName1ForURLPattern8
Key for Group 9 specificCSSFileName1ForURLPattern9
Key for Group 10 specificCSSFileName1ForURLPattern10
Key Type string
Default Value (blank)

Zoom Level

Define the Page Auto Zoom level to be applied to any matched URLs.  This value overrides the main Page Auto Zoom setting for these URLs.  It can be overridden in turn by a specific URL parameter - see Page Auto Zoom for details. 

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 specificZoomLevel1ForURLPattern1
Key for Group 2 specificZoomLevel1ForURLPattern2
Key for Group 3 specificZoomLevel1ForURLPattern3
Key for Group 4 specificZoomLevel1ForURLPattern4
Key for Group 5 specificZoomLevel1ForURLPattern5
Key for Group 6 specificZoomLevel1ForURLPattern6
Key for Group 7 specificZoomLevel1ForURLPattern7
Key for Group 8 specificZoomLevel1ForURLPattern8
Key for Group 9 specificZoomLevel1ForURLPattern9
Key for Group 10 specificZoomLevel1ForURLPattern10
Key Type integer
Default Value 100

Sample Code

  • This sample code relies on the Custom CSS settings built into Kiosk Pro and will not run successfully in other browsers or within our in-app help interface.
  • To view sample code, go to and follow the instructions to download and store the sample CSS files and configure the app.
  • A shortcut to download and configure the app is provided for proof of concept testing at the same URL and requires a fresh app install.

Change Log

  • Added in version 7.6. Added the ability to define zoom levels and exclusions in version 11.2.

Related Articles

Still stuck? How can we help? How can we help?