Change Title ICon

[Ramjet]

Hello,

In a RadWindow I thought I had interpreted the documentation correctly and added the following code to replace the default menu icon in the title bar. It is behaving as though the image was not found (in other words no menu icon but my image doesn't show either) but that doesn't seem likely as the path works fine for other css url statements. I have tried both image types.

.RadWindow .rwShadow .rwIcon
{
     background-image:url(Images/Icons/Rockies.ico) !important;
}

.RadWindow .rwShadow .rwIcon
{
     background-image:url(Images/Icons/Rockies.png) !important;
}

Just a little nudge in the right direction would be greatly appreciated.
JB

[Princy]

Hello,

Try the following approaches to change the Title icon.

1) Set the IconUrl of RadWindowManager.

  ASPX:

<telerik:RadWindowManager ID="WindowManager" runat="server" Modal="true" EnableViewState="true" Overlay="true"  IconUrl="~/Images/button_edit_grey.gif"  />

2) CSS:

<style type="text/css">
.RadWindow_Default a.rwIcon
 {
    background-image: url('./Images/button_edit_grey.gif') !important;
 }
.RadWindow .rwIcon
 {
    background-position:0 0px !important;
 }
</style>

Note: Make sure that you set the url of the image correctly.

Thanks,
Princy.

[Ramjet]

Your post definately helped. All three methods in the post work....but the image will not show if it is larger than 16 X 16. I figured it would handle the resize from a larger image...nope. Once I resized down to 16 X 16 all methods work for customizing the image. I used the png version and a slight modification to Princy's css.
ASPX:

<telerik:RadWindowManager ID="SomeName" runat="server" Modal="true" EnableShadow="true" Skin="Telerik" IconUrl="~/Images/Icons/Rockies.png" />

CSS:

.RadWindow .rwIcon
{
     background-image:url('Images/Icons/Rockies.png') !important;
     background-position:0 0px !important
}

[Marin Bratanov]

Hi John,

I am glad to hear that you have managed to resolve this. I would only like to add that a larger image may look like it isn't there if there is enough white space in its top left corner. It is applied as a background image for an anchor element and thus the normal CSS rules apply for it.

You also need to consider transparency, as a transparent background image would also appear as non-existent - when you set the IconUrl property the RadWindow adds the following rule for the anchor element background:

transparent url('your-image-here.png') no-repeat scroll 0px 0px

Also, if you set the IconUrl property you do not need to add the CSS override, this will be done by the RadWIndow.


Kind regards,
Marin
the Telerik team

[Ramjet]

*Forehead slap*

Yes the image was showing all along! You are correct on what was happening.