# Modifying the Appearance of the OutBar

Get started with Menus and Toolbars for WinForms. Create versatile menus and docking/floating toolbars. See more in documentation here.

## Content



To modify the appearance of the [C1OutBar](/componentone/docs/win/online-menus-toolbar/) at design time, complete the following steps:

1.  Place the [C1OutBar](/componentone/docs/win/online-menus-toolbar/) component from the toolbox to your form using a drag-and-drop operation. The default [C1OutBar](/componentone/docs/win/online-menus-toolbar/) control contains a [C1OutPage](/componentone/docs/win/online-menus-toolbar/) with a [C1ToolBar](/componentone/docs/win/online-menus-toolbar/) control inside it.
2.  In the Properties window for the [C1OutBar](/componentone/docs/win/online-menus-toolbar/) control, select **C1OutPage1** from its Properties window drop-down list.
3.  Select the **Text** property and change it from "Page1" to "Going Places".
4.  Right-click the [C1ToolBar](/componentone/docs/win/online-menus-toolbar/) control on the form and select **Append Item** from its context menu. A new command and the **Link to Command** designer appears.
5.  In the **Link to Command** designer set the following properties:
    *   **Text** to "Air Tickets"
    *   **Name** to "cmdGPAirTicket"
6.  Select **C1Command** from the **Create a new command** listbox and click OK to close the dialog box.

### Adding a text and image to the command link

1.  Select the **C1CommandLink1** from the Properties window drop-down list and set its [ButtonLook](/componentone/docs/win/online-menus-toolbar/) property to **TextAndImage**.
2.  In the **C1CommandLink1**'s Properties window, expand the Command properties node and click on the **ellipses** button in the image properties field. The **Open** dialog box appears.
3.  Browse for an image to add to the Air tickets command link. The new image appears in the Air tickets command link.

### Adding a new command link

1.  Right-click the Air tickets commandlink on the toolbar and select **Append Item** from its context menu. A new commandlink appears in the toolbar.
2.  In the **Link to Command** designer set the following properties:
    *   Text to **City Guides**
    *   Name to **cmdGPCityGuides**
    *   Command Type in the create a new command listbox to **C1Command**
3.  Select **OK** to apply the changes and close the **Link to Command** designer.

### Adding a text and image to the command link

1.  Select the **C1CommandLink2**, **City Guides**, on the toolbar and set its [ButtonLook](/componentone/docs/win/online-menus-toolbar/) property to **TextAndImage**.
2.  Expand the Command properties node in **CommandLink2**'s Properties window and click on the **ellipses** button in the image properties field. Select the desired image and click on the **Open** button in the **Open** dialog box. The new image will appear above **C1CommandLink2**'s text.

### Modifying the Appearance properties for C1OutPage1 and C1ToolBar1

1.  Select **C1OutPage1** from the Properties drop-down list and modify its properties to the following:
    *   Expand the **Font** property and set **Bold** to **True**.
    *   Select the **BorderStyle** property and select **FixedSingle** from its drop-down list.
2.  Select the **C1ToolBar1** on the form and set its properties to the following:
    *   BackColor to **White**
    *   BackHiColor to **SkyBlue**
3.  Select **C1OutBar1**from the Properties drop-down list and set its properties to the following:
    *   BackColor to **#CC99FF**
    *   Font.Size to **9**
    *   Bold to **True**

### Adding a new C1OutPage

1.  Right-click on **Going Places** and select **Add Page with Toolbar** from its context menu. A new **C1OutPage2** appears below the **C1OutPage1**, **Going Places.**
2.  Select **C1OutPage2** from the drop-down list in the Properties window and set its **Text** property to **Browse**.
3.  Right-click in the **C1ToolBar2** on the form and select **Append Item** from its context menu. The **Link to Command** designer appears.
4.  In the **Link to Command** designer set the following properties:
    *   **Text** to Electronics
    *   **Name** to cmdBrowseElectronics
5.  Select [C1Command](/componentone/docs/win/online-menus-toolbar/) from the Create a new command link listbox and click **OK** to close the designer
6.  Select the **C1CommandLink3**, Electronics, on the toolbar and set its [ButtonLook](/componentone/docs/win/online-menus-toolbar/) property to **Text**.
7.  Select **C1ToolBar2** from the Properties window drop-down list and set its properties to the following:
    *   **BackColor** to **Teal**
    *   **BackHiColor** to **MediumAquamarine**
    *   **ButtonAlign** to **Near**
8.  Build and the run the application.

The **C1OutBar**'s Browse out page at run time appears like following image:

<br />![New form](https://cdn.mescius.io/document-site-files/images/a27cb622-e6d9-4efc-a0b0-0c31245fd632/imagesext/image10_61.png)

## See Also

[TopicBar Tasks](/componentone/docs/win/online-menus-toolbar/menusandtoolbarsforw2/topicbartasks)