Custom CSS Sample

Requires

Kiosk Pro Plus or Enterprise, version 7.6 or later
Locally Stored CSS Files
- Files for this sample must be downloaded on a desktop computer at https://docs.kioskgroup.com/api/custom-css-files.zip,
- unzipped,
- and then transferred to the app's Documents folder by following the instructions here.
App Settings
- Homepage = https://docs.kioskgroup.com/api/custom-css.html
- Custom CSS Settings:
  - Enable Custom CSS = ON
  - Group 1 > Matched URLs = https://docs.kioskgroup.com/api/custom-css.html
  - Group 1 > Local File Path for Custom CSS = background-color.css OR background-image.css

Reference

Proof of Concept

For proof of concept testing, install a fresh download of Kiosk Pro Plus or Kiosk Pro Enterprise and configure the following under Remote Management & Notifications > Remote Settings Control:

Enable Remote Settings Control = ON
Settings XML File Location = https://docs.kioskgroup.com/api/custom-css.xml

then tap 'Run Kiosk Presentation' to apply the settings and local files required. We recommend deleting and reinstalling the app after this proof of concept testing is complete.

Result

Custom CSS files referenced above have not been applied. Please recheck your app settings and the app's Local File Directory setting to confirm that the required CSS files are stored directly in the app's Documents folder.

The CSS file 'background-color.css' has been applied successfully. You should see an aqua background color applied to this page and this paragraph shown as a result. You can see the original version of the page by viewing the page on your desktop computer or by disabling Custom CSS in Kiosk Pro's settings.

The CSS file 'background-image.css' has been applied successfully. You should see a patterned tile background image applied to this page and this paragraph shown as a result. You can see the original version of the page by viewing the page on your desktop computer or by disabling Custom CSS in Kiosk Pro's settings.