Page Comparison

This is an example of modifying the appearance of Astro booking screen:
Image RemovedImage Added
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:

   Code Block
   language css
   .popup-big {

...

1. background: #000 !important;

...

1. background-color: #000 !important;

...

1. background-image: none !important;

...

1. }

...

1. 
   Image Added

2. 
   

   Change the colour of the background to

   green

   grey by changing 'background-color: #000;' to 'background-color:

   #0F0

   #666;':

   Code Block
   language css
   .popup-big {

...

1. background: #000 !important; background-color:

...

1. #666 !important;

...

1. background-image: none !important;

...

1. }

...

1. 
   Image Added

2. Click Save.

3. Review the effect of the changes by returning to the Resource List and click Image Modified

   in

    in the profile to preview the display.

   Image Removed

   Note
   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 . Anchor_Toc16427_Toc16427