Page Comparison

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

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.

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; 
}

...

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

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; 
}

...

Click Save.

Review the effect of the changes by returning to the Resource List and click

...

 to preview the profile

...

.