Home / Community & Support / Knowledge Base / RadControls for ASP.NET AJAX / Notification / Using the built-in icons with a custom skin

Using the built-in icons with a custom skin

Article Info

Rating: Not rated

Article information

Article relates to

 RadNotification for ASP.NET AJAX from Q2 2011 SP1

Created by

 Marin Bratanov, Telerik

Created on

 11th of October, 2011




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).

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.


RadControls for ASP.NET AJAX

SOLUTION:

Since Q2 2011 SP1 (2011.2.915) 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, for example:
[C#]
RadNotification1.ContentIcon = Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(Telerik.Web.UI.RadNotification), "Telerik.Web.UI.Skins.Sitefinity.Notification.deny.png");

[VB]
RadNotification1.ContentIcon = Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(Telerik.Web.UI.RadNotification), "Telerik.Web.UI.Skins.Sitefinity.Notification.deny.png")

An alternative is to simply point these properties to a file in your site where you have placed the original images from the [RadControls for ASP.NET AJAX installation folder]\Skins\[SkinName]\Notification for skins that have specific images, or the default ones from  [RadControls for ASP.NET AJAX installation folder]\Skins\Common\Notification.

You would also need to 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;
}


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

You can find attached a VB and C# versions of several simple pages that illustrate the approach and have the Black skin externalized under the MyCustomSkin name.

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.