Page Comparison

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

1. Locate the stylesheet to be changed (see page ), 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.

   Image Added

   Timebar classes are only available in the RX Astro V1 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;
}
Image Added

1. Move the clock to the left 10 pixels by changing 'left: 20;' to 'left: 10;'.
2. Change the colour of the clock by adding 'color: red ! important;' or 'color: #FF0000 ! important;'.

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

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