Modifying the Appearance of Astro Booking Screen

This is an example of modifying the appearance of Astro booking screen:

The stylesheet to be changed will be the same as the associated room profile (see Chapter 1).
Reference to the diagram above will indicate which class or ID needs to be altered to achieve the desired effect. In this example, we will change the colour of the Astro booking screen body.

1. Locate the '.popup-big' class in the stylesheet content:

.popup-big {
background: #000 !important;
background-color: #000 !important;
background-image: none !important;
…
}

1. Change the colour of the background to green by changing 'background-color: #000; to 'background-color: #0F0;':

.popup-big {
background: #000 !important; background-color: #0F0 !important;
background-image: none !important;
…
}

1. Click Save.
2. Review the effect of the changes by returning to the Resource List and click in the profile to preview the display.

   Changes made to existing stylesheets will affect the Astro booking screens for all room profiles. If you only want to change the appearance of the Astro booking screen for one room only, you must create a new stylesheet and refer to it in your room profile. See page .