Custom CSS 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)

Local File Path for Custom CSS

Define the local file path for custom CSS 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)

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.

Related Articles

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