Custom CSS

Custom CSS allows you to further customize Kiosk’s appearance beyond the built-in themes and settings.

To use custom CSS:

Create a file named custom.css in the same directory as your docker-compose.yml file.
Add your custom CSS rules to this file.
Mount the custom.css file in your container by adding the following line to the volumes section of your docker-compose.yml:
```
volumes:
  - ./config:/config
  - ./custom.css:/custom.css
```
Restart your Kiosk container for the changes to take effect.

The custom CSS will apply to all devices connected to Kiosk by default.

To disable custom CSS for a specific device, add custom_css=false to the URL parameters e.g. http://{URL}?custom_css=false

Custom CSS class

This enables you to target specific devices in your CSS.

Settings

Key	Value
CONFIG	`custom_css_class`
ENV	`KIOSK_CUSTOM_CSS_CLASS`
URL	`custom_css_class`
VALUE	`string`
DEFAULT	`""`

Using with config.yaml file

custom_css_class: ""

Using with ENV in your docker-compose file

environment:
  KIOSK_CUSTOM_CSS_CLASS: ""

Using with url queries

http://{URL}?custom_css_class=""

To add a class to the <body> tag add custom_css_class=CUSTOM-CLASS to the URL parameters e.g. http://{URL}?custom_css_class=foo

e.g.

/* applied to all */
#clock,
#weather,
.image--metadata {
    padding: 4rem;
}

/* applied to devices with `custom_css_class=foo` */
.foo #clock,
.foo #weather,
.image--metadata {
    padding: 2rem;
}