WRS - Colours and Fonts Customization

Modified on: Wed, 11 Jan, 2023 at 12:25 PM


The Web Reservation System of Clock PMS+ can be customized to match the colour scheme of your website and conform to your marketing constants.

1. Colour selection

To set up the colour scheme of your WRS you need to select four colours. (See the sample scheme):

A. Background. (In the sample: black)

B. Font colour (in the sample: white)

C. Panel font colour (in the sample: light grey)

D. Panel title bar and frame colour (in the sample: dark grey).

The colour format must be:

HEX. For example: #000000 for black, #FFFFFF for white.


RGB. For example: rgb(0,0,0) for black, rgb(255,255,255) for white.

After you have chosen your colours, you can move on to the next step

2. Generating CSS files

Go to https://www.bootstrap-live-customizer.com/version/3.3.2/

Enter your colours in the fields below:

А. Background

Enter your background colour in these 3 fields:

  1. Section "Scaffolding", field "@body-bg"
  2. Section "Modals", field "@modal-content-bg"
  3. Section "Panels", field "@panel-bg"

B. Font colour

Enter your font colour in these 2 fields:

  1. Section "Scaffolding", field "@text-color"
  2. Section "Scaffolding", field "@link-color"

C. Panel title bar and frame colour

Enter your colour in these 4 fields

  1. Section "Panels", field "@panel-default-heading-bg"
  2. Section "Type", field "@hr-border"
  3. Section "Panels", field "@panel-default-border"
  4. Section "Tables", field "@table-border-color"

D. Panel font colour

Enter your colour in the field below

  1. Section "Panels", field "@panel-default-text"

When you fill all the above fields, click the button "Download" in the navigation bar at the top of the screen and click 'bootstrap.min.css'.

Save the file.

3. Uploading the CSS file into WRS

Find the downloaded file, "theme.min"

  1. Log into Clock PMS+
  2. If you manage more than one hotel, select the desired hotel
  3. In the main menu strip select "Web" - "Settings - Web Reservation System"
  4. Find setting "Customize CSS"
  5. Click "Upload bootstrap.min.css" and select the file "theme.min".


Open your Web Reservation System and check if everything is as it should be.

4. Cancelling or modifying custom colour schemes

To cancel a custom colour scheme:

  1. Select "Web" - "Settings - Web Reservation System"
  2. Find setting "Customize CSS"
  3. Click the 'Remove' buttons for each file

5. Change a custom colour scheme

To change a custom colour scheme, remove it and then generate and upload new files as described above. Please make sure to change the name of the new CSS file, if needed, so that it doesn't match the name of the old one. If the old and the new CSS files have the same name, the system will continue using the old one, despite the upload of a new CSS file.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

On this page