New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Styling Custom Commands

Every skin provides a default icon that appears in the RadDock title bar for custom commands. Typically, however, you will want to change this icon to a more meaningful image.

To modify the image that appears as a custom command's icon, you need to follow these steps:

  1. Define a CSS class that identifies a background image to represent the custom command. You can use a separate CSS file and link to it, or you can define the CSS class in the tag of the Web page. The CSS class you define is applied to the <a> element for the command on the rendered Web page.
CSS
.MyCustomStyle
{
    width: 15px !important;
    background: url(../MyImages/CustomCommand.gif) !important;
}
  1. Set the CssClass property of the command to your new CSS class:
XML
<telerik:RadDock runat="server" id="RadDock1" text="Custom Command">  
    <Commands>    
        <telerik:DockCommand 
            CssClass="MyCustomStyle"        
            Name="doSomething"        
            OnClientCommand="HandleDoSomething" />    
        <telerik:DockExpandCollapseCommand />  
    </Commands>
</telerik:RadDock>

If the custom command has two states (when using Telerik.Web.UI.DockToggleCommand), set the AlternateCssClass property of the command to supply an image for the alternate state.

See Also

In this article
See Also
Not finding the help you need?
Contact Support