We will now add a border around the logo. The video player window should look similar to this.

Select the Rectangle graphic tool in the Tools palette.

Draw a rectangle around the logo.

Make the graphic opaque by checking the Opaque checkbox in the Basic Properties pane of the rectangle graphic's inspector.

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.

Now select the graphic (1) and set the width in the property inspector. Since the field is 250 pixels wide the graphic is going to be 250 pixels wide (2).

Now that the graphic is the right width you will center the logo within the graphic.

Select the rectangle graphic and the logo (hold down the SHIFT key to select multiple objects).

When multiple objects are selected the property inspector includes an Align Objects pane. Click the Align Objects Center and Align Objects Middle buttons to align the graphic and the logo.

The result should look like this.

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.

After grouping the objects the group will be selected.

While there are no visual cues in the window that the graphic and logo are grouped you can see that they are in the Application Browser. To open the Application Browser choose the Tools > Application Browser menu item.

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.

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.

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).

When aligning objects in Revolution all objects are positioned relative to the FIRST object that you select. Since the video list is already in the proper position select it first. Then hold down the SHIFT key and click on the logo group to add it to the selection.

In the Object Inspector make sure the Align Objects panel is displayed (1). Click on the Align Objects Left button (2).

Now the left edges of the logo group and the video list line up.

Now select the list of videos and resize it using the selection handles. Make the bottom of the field match up with the bottom of the video. You can select objects and use the arrow keys on your keyboard to fine-tune their position.

Now the logo has a nice border around it and all of the controls appear more balanced.