Modifying the Appearance of Astro Room Screen with Custom Background

A background image file must be added to the either the Page Background Image field in System Settings > Display tab, this is for a global background image on all screens, or for each Resource Display Profile in the Screen Background Image field.

This will by default set the green/red background to 50% opacity allowing the image to be visible behind it.

This can be modified using the stylesheet:

1. Add a new section to the stylesheet for the class '.child-bg'.
   The opacity can be adjusted by setting the opacity value:

   • 0.5 would indicate 50% opacity.

   • 1 is fully opaque.

   • 0 would be completely transparent.
     The following example changes the opacity to 40%:

     .child-bg { opacity: 0.4 ! important; }

2. To move the red and green background to the left side of the screen add 'left: 20px;' and 'width: 280px;':

   .child-bg { opacity: 0.4 ! important; left: 20px; width: 280px; }

3. To modify the different colour backgrounds independently use '.red-bg' or '.green-bg' instead of '.child-bg'.

1. Locate the '#clock' ID in the stylesheet content. If '#clock' is not found, then one can be created at the end of the existing content:

   Open

   
   #clock { top: 240px; position: absolute; left: 20px; font-size: 80px; }

2. Move the clock to centre by adding 'width: 280px' and 'text-align: center':

   #clock { top: 240px; position: absolute; left: 20px; font-size: 80px; width: 280px; text-align: center; }

1. Locate the '#actionbuttons' id in the stylesheet content. If '#actionbuttons' is not found, then one can be created at the end of the existing content:

   Open

   
   #actionbuttons { width: auto; position: fixed; left: inherit; right: 172px ! important; bottom: 52px ! important; }

2. Move the action buttons from right to left by removing 'right: 172px ! important;' and changing 'left: inherit;' to 'left: 90px ! important;'.

3. Move the action button on top of the info button by changing the 'bottom: 52px ! important;' to 'bottom: 137px ! important;':

   #actionbuttons { width: auto; position: fixed; left: 90px; bottom: 137px ! important; }

4. Locate the '#extendmeeting', '#startmeeting', '#startmeeting1', '#endmeeting', '#booknow' ID's in the stylesheet content. If they are not found, then they can be created at the end of the existing content:

   #extendmeeting, #startmeeting, #startmeeting1, #endmeeting, #booknow { padding-left: 16px; float: right; }

5. Place all action buttons vertically by adding 'padding-top: 2px' and removing 'padding-left: 16px;' and 'float: right;':

   #extendmeeting, #startmeeting, #startmeeting1, #endmeeting, #booknow { padding-top: 2px; }

1. Locate the '#info' ID in the stylesheet content. If '#info' is not found, then one can be created at the end of the existing content:

   Open

   
   #info { position: fixed; bottom: 52px ! important; right: 30px ! important; left: auto; }

2. Move the info button from right to left by removing 'right: 30px ! important' and changing 'left: auto;' to 'left: 90px ! important;':

   #info { position: fixed; bottom: 52px !important; left: 90px !important; }

1. Locate the '#logoffbutton' ID in the stylesheet content. If '#logoffbutton' is not found, then one can be created at the end of the existing content:

   Open

   
   #logoffbutton { position: fixed; bottom: 52px !important; left: 20px; display: none; }

2. Move the logoff button from left to right by adding 'right: 30px;' and changing 'left: 20px;' to 'left: auto;':

   #logoffbutton { position: fixed; bottom: 52px !important; right: 30px; left: auto; display: none; }