Add a Background to the Logo
Now that the logo has been added to the window it would be nice to put a border around it and further tidy the UI up.
The Current State of Affairs
Edit Rectangle Properties
Set Rectangle Width
The rectangle that was just created is going to be the same width as the field displaying the list of videos. You can see the width of the field by selecting it (1) and looking at the Size & Position pane in the property inspector (2). The width field displays the width of the field (3).
Make note of the width as you are going to assign the same value to the graphic.
Align the Logo and the Graphic
Select the Graphic & the Logo
Align Objects Using Property Inspector
Group the Graphic and the Logo
Now you are going to group the logo and the rectangle graphic. Grouping multiple objects enables you to treat all of the objects as one single object. This can make it easier to reposition the objects on the screen.
With both the logo and the rectangle graphic still selected select the Object > Group Selected menu item.
Look at Group in the Application Browser
The Application Browser
The Application Browser shows all of the controls in your stack window. To see them the group you just created do the following:
1) Expand the arrow next to the Video Library stack.
2) Click on the card that appears under the stack.
3) Make sure that the list of controls is sorted by Layer.
As you can see, the rectangle and logo are grouped together.
A Note About "Select Grouped"
Now that you have grouped two controls together it is worth mentioning the Select Grouped feature of the Revolution IDE.
When Select Grouped is turned on (the text appears bold in the toolbar or the menu item is checked in the Edit menu) any control you click on will be selected, even if the control is in a group.
When Select Grouped is turned off clicking on a control selects the group that the control is in.
Make sure that Select Grouped is turned off for the time being.
Set Margins of Group to 0
Now you will want to left align the group you just created with the video list. Before you do that you should change the Margins property of the group to 0.
When you select the group you will notice that the selection handles are offset slightly from the sides of the graphic (1). This is because the margins property of a new group defaults to 4 pixels. If you were to use the IDE alignment tools to align the group with the video list the group would end up 4 pixels off of where you actually wanted it to appear.
In the Text Formatting pane (2) of the group property inspector change the Margins property to 0 (3).