Edit this page

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

    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            .MyCustomStyle
            {
                width: 15px !important;
                background: url(../MyImages/CustomCommand.gif) !important;
            }
        </style>
    </head>
    
  2. Set the CssClass property of the command to your new CSS class:

    ASP.NET

    <telerik:RaDock runat="server" id="RadDock1" text="Custom Command">  
        <Commands>    
            <telerik:DockCommand 
                CssClass="MyCustomStyle"        
                Name="doSomething"        
                OnClientCommand="HandleDoSomething" />    
            <telerik:DockExpandCollapseCommand />  
        </Commands>
    </telerik:RaDock>
    
tip

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