Change Title ICon

5 posts, 1 answers
  1. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 14 Nov 2011 Link to this post

    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
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Nov 2011 Link to this post

    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.
  3. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 15 Nov 2011 Link to this post

    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
    }


  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4531 posts

    Posted 16 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 16 Nov 2011 Link to this post

    *Forehead slap*

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