# Changing the Command Button Images

Change the images used for the buttons in the Command bar by providing replacement images or by adding your own buttons.

## Content

You can change the images used for the buttons in the command bar. By default, the command buttons are displayed as images (or icons) since the [ButtonType](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ButtonType.html) property in the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) class is set to ImageButton by default. You can change the images by providing replacement images or by adding your own buttons in code. In addition, you can change the buttons by setting the [Theme](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.Theme.html) property.
You can put images of any size in the command bar; the only limit to the size is the size of the command bar.
You can change the existing images by replacing them in the images subdirectory of the fp\_client folder.
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 Code

Use the properties of the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) class to define the appearance of the buttons.

## Example

In this example, the default images are changed to XP theme images.

```csharp
FpSpread1.Sheets[0].RowCount = 20;
FpSpread1.CommandBar.ButtonType = FarPoint.Web.Spread.ButtonType.ImageButton;
FpSpread1.CommandBar.Theme = FarPoint.Web.Spread.ImageButtonTheme.Xp;
```

```vbnet
FpSpread1.Sheets(0).RowCount = 20
FpSpread1.CommandBar.ButtonType = FarPoint.Web.Spread.ButtonType.ImageButton
FpSpread1.CommandBar.Theme = FarPoint.Web.Spread.ImageButtonTheme.Xp
```

## Using Code

Change the image for the **Print** button using the [CreateButton](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.CreateButton.html) event.

## Example

In this example, the print button image is changed.

```csharp
private void FpSpread1_CreateButton(object sender, FarPoint.Web.Spread.CreateButtonEventArgs e)
{
if (e.Command == "Print")
{
e.EnabledImgUrl = "happy.bmp";
}
}
```

```vbnet
Protected Sub FpSpread1_CreateButton(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.CreateButtonEventArgs) Handles FpSpread1.CreateButton
If e.Command = "Print" Then
e.EnabledImgUrl = "happy.bmp"
End If
End Sub
```

## Using Code

![Custom Button](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/mybutton.png)

1. You can also create your own buttons with code as displayed by the above image.
2. Override the **Render** event.
3. Create a new table cell.
4. Create a button control and set the button properties.
5. Add the button to the table cell.

## Example

In this example, add the My Button button.

```csharp
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
Control updateBtn = FpSpread1.FindControl("Update");
if ((updateBtn != null))
{
TableCell tc = (TableCell)updateBtn.Parent;
TableRow tr = (TableRow)tc.Parent;
TableCell tc1 = new TableCell();
tr.Cells.Add(tc1);
Button btn = new Button();
btn.CausesValidation = false;
btn.Text = "My Button";
btn.Attributes.Add("onclick", "javascript:" + this.Page.GetPostBackEventReference(FpSpread1, "my command") + "; return false;");
tc1.Controls.Add(btn);
}
base.Render(writer);
}
```

```vbnet
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
       Dim updateBtn As Control = FpSpread1.FindControl("Update")
       If Not updateBtn Is Nothing Then
       
            Dim tc As TableCell = updateBtn.Parent
            Dim tr As TableRow = tc.Parent
            
            Dim tc1 As New TableCell()
            tr.Cells.Add(tc1)
            
            Dim btn As New Button()
            btn.CausesValidation = False
            btn.Text = "My Button"
            btn.Attributes.Add("onclick", "javascript:" + Me.Page.GetPostBackEventReference(FpSpread1, "my command") + "; return false;")
            tc1.Controls.Add(btn)
       End If
       
       MyBase.Render(writer)
End Sub
```

You can process the button command by adding an event handler to the [ButtonCommand](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.ButtonCommand.html) event.

```csharp
private void FpSpread1ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e)
{
}
```

```vbnet
Private Sub FpSpread1_ButtonCommand(ByVal sender As Object, ByVal e As
  FarPoint.Web.Spread.SpreadCommandEventArgs) HandlesFpSpread1.ButtonCommand
End Sub
```