Modifying the Appearance of Astro Room Screen

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

1. Locate the stylesheet to be changed, 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 move the clock to the left and change its colour.

   Timebar classes are only available in the RX Astro V3 Timebar stylesheet.

2. 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:

   #clock { 
   	position: absolute;
   	top: 280px;
   	left: 20px; 
   	font-size: 4em ! important; 
   }

   
   

3. Move the clock to the left 10 pixels by changing 'left: 20;' to 'left: 10;'.

4. Change the colour of the clock by adding 'color: red ! important;' or 'color: #FF9500 ! important;':

   #clock {
   	position: absolute;
   	top: 280px;
   	left: 10px;
   	font-size: 4em ! important; 
   	color: #FF9500 ! important; 
   }

   
   

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