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

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy