Customising Kiosk

This section of the guide will cover a few basics for modifying the Kiosk style.

The style rules for the Kiosk work slightly differently to the room screen, with the room screen the assigned Stylesheet is the only design rules applied to the UI.

For Kiosk, however, the Stylesheet is used to modify the default style, this means that the stylesheet can have no properties and the Kiosk will display its default style, this allows new rules to be added that will overwrite the default.

The home screen is the landing page for the Kiosk, below are the core ID’s and Classes that make up the structure of the home screen.

In this example, we will show you how to change the default Kiosk (left) to look like the modified Kiosk (right). The full CSS for this change is available at the bottom of this section.

Firstly, to change the background colour modify or add the #homeMenuContainer element to the Kiosk Stylesheet. If using the pre-installed Kiosk Stylesheet this element may already exist.

Default blue background

#homeMenuContainer {
  background: #1976D2; /* default home screen blue*/
}

Change the colour value from #1976D2 to #119977.

Green background

#homeMenuContainer {
  background: #119977; /* overwrite home screen blue with green */
}

Next, we will change the style of the navigation buttons using .homeIcon.

This will involve adjusting the shape and colour of the button as well as moving and resizing the icon and text displayed using pseudo elements.

Modify or add the .homeIcon class into the stylesheet and apply the below rules, see inline comments for what each rule is changing.

Home screen button

/* home screen button */
.homeIcon {
  background: #fff; /* change background from transparent to white */
  color: #555; /* overwrite text & icon colour from white to dark grey */
  height: calc(120px - 20px); /* set height to locked 120px, minus 10px padding */
  width: 120px; /* set width to locked 120px */
  margin: 0 15px; /* add space between each button */
  border-radius: 50%; /* change button to circle */
  font-size: 2.5em; /* modify text & icon size */
}

In this example the height value is set to calc(120px - 20px) this is done because there is default padding applied to the top and bottom of these buttons of 10px which makes the element taller than it is wide, this value could be set to just 100px for the same result.

The next step is to adjust the icon and text location, these are pseudo-elements which are contained within the .homeIcon, add or modify the below elements to the Stylesheet.

Button icon CSS

The final change is to adjust the position of the lock icon for My Events so its not cut off by the edge of the circle button.

Add or modify the .mini-lock element.

Mini lock CSS

Here is the full CSS (without comments), this can be copied directly into the Kiosk Stylesheet to get this modification.

Full home screen CSS

The Find, Free Rooms and Free Desks pages share a lot of elements, this allows style modifications to be made once and applied to all aspects of the Kiosk, there are some specific references that can be used to alter the visual style depending on which page is open.

An example of this is the default grey banner across the top of the screen, this can be modified globally using the ID #title or the class .title-panel, however, specific changes can be made to Search, Free Rooms and Free Desks screens using the classes .title-panel.search-page, .title-panel.freeRooms-page and .title-panel.freeDesks-page respectively.

Custom Title Banner Colours

Here is an example of a modification to the page banners for the three Kiosk views.

To achieve this look add or modify the three elements shown below in the Kiosk Stylesheet.

Top Banner Style

Results list UI

The results list view in Kiosk can also be modified globally using the class .element.
To achieve the list UI style shown above follow the steps below.

Firstly, each result element will need to curve at the ends as well as applying a drop shadow.

Resource element CSS

To match the curve of the element using the below CSS to apply a similar style to the action buttons found on the right of the screen.

Action buttons CSS

For the action buttons :hover needs to be defined also, this is the state of the button when the mouse has hovered over the element.

In this example, the bookings list under each resource is slightly narrower.
Using the below CSS will reduce the width and keep the element correctly aligned as well as adding a matching drop shadow.

Bookings list element CSS

Here is the full CSS (without comments), this can be copied directly into the Kiosk Stylesheet to get this modification.

Full list CSS

The text shown for the Kiosk home screen buttons can be modified using the style sheet.

Default text values

Custom text values

Below is the CSS that can be used to achieve this modification, add or modify the below sections in the Stylesheet.

The “ \a “ is required before any text to be displayed, otherwise, this will happen.