Custom CSS Styling & Zoom Level Settings

Supported in:

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.

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 http://www.example.com/?search=term where ‘term’ could be any value, you could use a wildcard match.

Setting the Matched URL setting to http://www.example.com/?search=* would mean that any URL that matched the part of the string preceding the ‘*’ character would have custom CSS applied.

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.