New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Using the built-in icons in RadNotification with a custom skin

How to

Use the built-in ContentIcon and TitleIcon when you are not using one of the built-in skins (i.e. with a custom skin). The article applies to the Classic RenderMode only.

Description

The built-in icons work only for the built-in skins, as they are designed to match the look and feel of the specific skin. This means that setting them via shorthand strings like ContentIcon="deny" will not work if you are using a custom skin.

Solution

The easiest approach is to slice the icons Telerik provides and use them as static resources. Most skins use a common icon that you can find in [UI for ASP.NET AJAX installation folder]\Skins\Common\Notification, and Black, Vista and Windows7 have special icons under UI for ASP.NET AJAX installation folder]\Skins[SkinName]\Notification.

Alternatively, you can set the ContentIcon and TitleIcon URLs to point to the required images from the Telerik.Web.UI.Skins assembly like you would with a custom icon of your choice. To do so you can utilize the GetWebResourceUrl() method of the SkinRegistrar class, and add some CSS to mimic the built-in rules for the icons:

  1. Mimic the CSS that the RadNotification outputs for its built-in icons:

    .RadNotification_MyCustomSkin .rnCustomIcon
    {
       clip: rect(16px, 32px, 48px, 0pt) !important;
       position: absolute !important;
       top: -17px !important;
       margin-top: 16px !important;
    }
    /*Fix for IE7*/
    ** + HTML .RadNotification_MyCustomSkin .rnCustomIcon
    {
       width: 32px !important;
    }
    ** + HTML .RadNotification_MyCustomSkin .rnCustomIcon img
    {
       top: -16px !important;
       position: absolute !important;
    }
    
  2. Add a RadNotification instance to your page. For example:

    <telerik:RadNotification ID="RadNotification1" runat="server" EnableEmbeddedSkins="false" Skin="MyCustomSkin"
      Position="Center" VisibleOnPageLoad="true" AutoCloseDelay="0" Width="200px" Height="100px">
    </telerik:RadNotification>
    
  3. Get the webresource URL for the icon:

    protected void Page_Load(object sender, EventArgs e)
    {
       //note: this code is used for demonstration purposes so you can see the logic of  building the webresource name
       //you can simplify and refactor it for your actual project, or you can simply slice the  sprites Telerik provides and use them as static resources
       if (!IsPostBack)
       {
           string baseSkin = "Default"; //set the built-in skin you want to use as base. Note  the casing - the first letter must be capital
           string icon = "info"; //use one of the built-in ones (info, delete, deny, edit, ok,  warning): http://www.telerik.com/help/aspnet-ajax/notification-embedded-icons.html
           string skinResource = baseSkin;
           //three skins have their own special icons, the rest are common
           switch (skinResource)
           {
               case "Black":
                   break;
               case "Vista":
                   break;
               case "Windows7" :
                   break;
               default:
                   skinResource = "Common";
                   break;
           }
           //build the final resource name
           skinResource = string.Format("Telerik.Web.UI.Skins.{0}.Notification.{1}.png",  skinResource, icon);
           //you can use different icons, just change the icon string to the desired one
           RadNotification1.TitleIcon = Telerik.Web.SkinRegistrar.GetWebResourceUrl(this,  typeof(Telerik.Web.UI.RadNotification), skinResource);
           RadNotification1.ContentIcon = Telerik.Web.SkinRegistrar.GetWebResourceUrl(this,  typeof(Telerik.Web.UI.RadNotification), skinResource);
       }
    }
    

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        'note: this code is used for demonstration purposes so you can see the logic of building the webresource name
        'you can simplify and refactor it for your actual project, or you can simply slice the sprites Telerik provides and use them as static resources
        If Not IsPostBack Then
            Dim baseSkin As String = "Default"
            'set the built-in skin you want to use as base. Note the casing - the first letter must be capital
            Dim icon As String = "info"
            'use one of the built-in ones (info, delete, deny, edit, ok, warning): http://www.telerik.com/help/aspnet-ajax/notification-embedded-icons.html
            Dim skinResource As String = baseSkin
            'three skins have their own special icons, the rest are common
            Select Case skinResource
                Case "Black"
                    Exit Select
                Case "Vista"
                    Exit Select
                Case "Windows7"
                    Exit Select
                Case Else
                    skinResource = "Common"
                    Exit Select
            End Select
            'build the final resource name
            skinResource = String.Format("Telerik.Web.UI.Skins.{0}.Notification.{1}.png", skinResource, icon)
            'you can use different icons, just change the icon string to the desired one
            RadNotification1.TitleIcon = Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(Telerik.Web.UI.RadNotification), skinResource)
            RadNotification1.ContentIcon = Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(Telerik.Web.UI.RadNotification), skinResource)
        End If
    End Sub
    
    

    More information on how to create a custom skin is available in this help article.

In this article