# Customizing the Command Bar on the Component

Customize the Command Bar on the component by specifying its color, setting its position, specifying the font style of text in the sheet name tabs and buttons, etc.

## Content

The command bar is a tool bar that is displayed at the top or bottom of the component. This bar includes the sheet name tabs (if there is more than one sheet) and the command buttons. By default, page navigation aids are also displayed on the command bar but can be repositioned or not displayed on the command bar.
![Command Bar Parts](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbar-parts.png)

## Customizations

The customizations are made possible with the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) object. You can do the following customizations:

* Customize the color of the command bar
* Customize the font style of the text in the sheet name tabs and buttons
* Hide the command bar if there is only one sheet
* Set the position of the command bar to be either at the top or bottom of the component

To set the color of the command bar, use the [BackColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.BackColor.html) property. To change the font of the text that appears in the buttons, use the [Font](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.Font.html) property.
To hide the command bar when there is only one sheet (and thus no sheet name tabs to display), use the [Visible](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.Visible.html) property.
By default, the command bar is displayed at the bottom of the component. You can display it at the top by setting the [CommandBarOnBottom](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.CommandBarOnBottom.html) property in the [FpSpread](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.html) class.

| Command Bar Position | Example Spread |
| -------------------- | -------------- |
| On Top | ![Command Bar on Top Example Spread](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbar-attop.png) |
| On Bottom | ![Command Bar at Bottom Example Spread](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbar-atbottom.png) |

## Postbacks

Several, but not all, of the buttons in the command bar trigger a postback to the server. These include:

* Delete button (AJAX postback)
* Print button
* Pager buttons (AJAX postback)
* Sheet buttons (AJAX postback)
* Update button (AJAX postback)

For information on other aspects of the appearance of the command bar buttons, refer to [Customizing the Command Buttons](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-toolbars/spweb-cmdbar-buttons).

## Using the Properties Window

1. Select the FpSpread component.
2. With the **Properties** window open, select the **CommandBar** property drop-down list, and set any of the command bar properties. In order to set the BackColor setting for the command bar, set the **Enable** property to **False** in the **Background** section.

## Using Code

Use the properties of the [FpSpread](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.html) class to define the position of the command bar and use the command bar properties to customize the look of the command bar.

## Example

In this example, set the command bar to display at the top of the component and set the color to yellow.

```csharp
FpSpread1.CommandBarOnBottom = false;
FpSpread1.CommandBar.Background = null;
FpSpread1.CommandBar.BackColor = Color.Yellow;
```

```vbnet
FpSpread1.CommandBarOnBottom = False
FpSpread1.CommandBar.Background = Nothing
FpSpread1.CommandBar.BackColor = Color.Yellow
```

## Using the Spread Designer

1. Select the **Settings** menu.
2. Select the **Command Bar** icon under the **Spread Settings** section (the property grid has additional settings that are not available in the designer).
3. Select the various options.
4. Click **Apply** and **OK**.
5. Click **Apply and Exit** to close the Spread Designer.

## See Also

[Displaying the Sheet Names](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-toolbars/spweb-sheettab-custom)
[Customizing Page Navigation](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-toolbars/spweb-pagenav-custom)