Window Custom Skin Doesn't Work

[Bruno Coelho]

Hi!

I've spent hours with this problem, and I'm going insane.

I've seen all documentation regarding the use of custom skins with Rad controls. Fine.
I've tried to use a custom skin (based on a default, WebBlue) within the TabStrip control and It WORKS awesomelly!
It is very easy and fast to deploy; thank you guys!

(That's not the insane part.)

However, I try the EXACT SAME THING with the Window control and it doesn't work at all! The window pops up without any CSS, just the functionality! Default and direct skin use works (of course).

The really strange part is that other controls' custom skins work, as I said, so the steps taken are correct!

Can you help me please?

Thanks in advance!

[Georgi Tunev]

Hi Bruno,

What were the steps that you tried? A detailed information on how to set a custom skin for RadWindow can be found here. For convenience I attached a small sample project that shows how to use external skin with the RadWindow control - I hope it will be of help.


All the best,
Georgi Tunev
the Telerik team

[sitefinitysteve]

Have you checked firebug to make sure the Css is indeed coming down?  Really there should be no reason as long as

1. The Css file is linked in
2. The Skin and EnableEmbeddedSkins="false" are set
3. The items inside the Css file have your custom skin name

Perhaps a typo on the skin name?

[Bruno Coelho]

Hi!

Thanks for the responses so far.

It's weekend now, so I'll only take a look at this again on monday.

HOWEVER, I see a little difference of steps from the link that Georgi Tunev gave me.

You see, in the TabStrip control example, I ONLY had to copy Window.Skin.css and the Window folder.
BUT, in the Window control case, there is ALSO another Window.css file that needs to be copied, something that I did not do.

I'll check back with you on monday, thanks in advance!

Bruno Coelho

[Bruno Coelho]

Hi!

I'm sorry to say that nothing works...

I've copied and renamed all necessary files, but the CSS keeps not getting plugged in.
No Steve, the CSS is not coming down.

I tried to put things in only one page (since the default scenario includes nested masterpages), because clearly the problem is the CSS linking, but the problem continues.

I cannot give you guys the files since this is a secured environment, but the main lines of code follow.

The page itself:



<Telerik:RadWindowManager runat="server" ID="RadWindowManagerInstance"
        ReloadOnShow="True" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
        Skin="CustomBlue" VisibleStatusbar="False" ShowContentDuringLoad="false">
        <Windows>
            <Telerik:RadWindow ID="HistoryWindow" KeepInScreenBounds="true"
                EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"
                Skin="CustomBlue" VisibleOnPageLoad="false" Width="850px"
                Height="550px" ReloadOnShow="true" Modal="true" VisibleStatusbar="false"
                runat="server">
            </Telerik:RadWindow>
        </Windows>
</Telerik:RadWindowManager>

The masterpage:

<link href="~/Shared/Styles/CustomBlue/Window.CustomBlue.css"
        rel="Stylesheet" type="text/css" />
<link href="~/Shared/Styles/Window.css" rel="Stylesheet" type="text/css" />

The CSS:

div.RadWindow_CustomBlue table td.rwCorner
{
    width: 1px;
}

div.RadWindow_CustomBlue table td.rwTopLeft
{
    background: transparent url('Window/TitleBar.gif') no-repeat left bottom;
    height: 1px;
}

div.RadWindow_CustomBlue table td.rwTopRight
{
    background: transparent url('Window/TitleBar.gif') no-repeat right bottom;
    height: 1px;
}

Folder structure is attached as a picture (believe me that the files inside are correct), as well as the proof of the CSS not being plugged in (the picture is of the title bar CSS).

Thanks for the help so far!

Bruno Coelho

[sitefinitysteve]

Can you try to remove the relative notation from the css links (to test)

<link href="~/Shared/Styles/CustomBlue/Window.CustomBlue.css"

        rel="Stylesheet" type="text/css" />

so

<link href="../../Shared/Styles/CustomBlue/Window.CustomBlue.css"

        rel="Stylesheet" type="text/css" />

(or whatever it should be)

[Bruno Coelho]

Hi!

Nah, doesn't work...

Thanks for all the help nevertheless!

Bruno Coelho

[sitefinitysteve]

Ok, what if you ditch IE and go with Firefox with Firebug to figure this one out :) ...like using the net tab to see the skin actually coming down (make sure it's not red)

I ONLY use custom skins, and there's nothing I can see that would cause issues aside from maybe EnableEmbeddedBaseStylesheet="false"

Typically that's required with a custom skin...simple custom one anyway

[Bruno Coelho]

Hi!

I never used Firebug, since the application only needs to work properly on IE.

I did what you told, and that panel is supposed to state which files are getting downloaded right?
Yes, all custom CSS files ARE coming in, BUT the images that they reference ARE NOT.

Plus, I checked the CSS file that the Window control is in fact being attached to, which is something like Telerik.Web.UI.WebResource.axd?compress=1&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%3apt-PT%3a40af2a53-a50b-4848-aa77-958f331424d9%3aa7a9ab12%3abeb72792%3a42d1d057%3a92753c09%3a311bfd78%3a648927c0%3ac73cf106%3a4c651af2.

This file is very large but it's interesting to see that all Default skins I have ever selected (Web20 and WebBlue) are listed there; however, my CustomBlue is not, which might be normal because this file comes from the Telerik DLL which contains no custom skins.

Am I really supposed to see that file linked to the Window control, or would it be logical to simply see Window.CustomBlue.css (which is being plugged in because I can select it on the list os CSS files)?

Thanks Steve!

Bruno Coelho

[sitefinitysteve]

You know what...there's no tool even remotely close to firebug on any other browser use and abuse firebug :)

The Telerik.Web.UI.WebResource.axd you have there contains all bits that make the telerik suite work, all mashed into one assembly.  This is generated by the Telerik.Web.UI, so it wont have your custom skin included in it...

Attached is a screenshot of what you should see if you're skin is coming down...it'll be red if it can't find it.  So the images you specify in your CustomBlue skin can't be found?  Normally they're relative to the directory the .css file is in.

So is your structure
root\skins\images? or something like that?

[Bruno Coelho]

Hi!

Regarding what you said, everything is fine: the CSS is being pushed successfully.

It seems to be a problem with the images and / or the folder Window.

The images' paths were not touched, it's just "Window/ModalDialogButtonSprites.gif" (for example).

Furthermore, as I said earlier, another folder within the CustomBlue folder (the same skin!), RadStrip, works just fine, and the images are pulled correctly, and they're path system is exactly the same.

I've tried other Window skins (based on Default ones), and the problem remains.

Thanks for the help.

Bruno Coelho

[sitefinitysteve]

Can you zip up the skin folder and attach it by any chance?

[Bruno Coelho]

Hi!

Yeah, here it is.

Link

I haven't even got to the point of CHANGING the skin, so it's basically the same as WebBlue.

Thanks!

PS - Rename to zip.

Bruno Coelho

[Duy]

Was there ever a solution to this? I am experience some issues with custom skins with a 2009 Q2 release. It was working just fine on a 2008 Q3 release.

[Georgi Tunev]

Hello Duy,

Have you tried using the skin converter? It converts pre-Q1 2009 skins to work with the new skinning mechanism presented in Q1.

Regards,
Georgi Tunev
the Telerik team

[Adam Toth]

I'm having the exact same problem, and it stems from the fact that EnableEmbeddedSkins=false and EnableEmbeddedBaseStylesheet=false is not working. It is still rendering out the WebResource.axd links to the embedded skins, which are placed in the markup after the links to my custom css in the head tags and overriding my custom styles.

Can we get a fix for RadWindow so that EnableEmbeddedSkins=false will actually work?

In my case, I am dynamically creating radwindow objects after Page_Load and adding them to a RadWindowManager control. I'm not sure if that helps you to troubleshoot why the custom skinning is not working for the current release.

[Georgi Tunev]

Hi Adam,

I just answered your support ticket on the subject. I was not able to reproduce the problem and I sent you a sample test case that shows my setup. Please modify it so the problem is reproducible and send it back in the ticket. I will check it and do my best to help you.


Best wishes,
Georgi Tunev
the Telerik team

[Adam Toth]

In my case, I had other RadWindow controls on the page that I used as modal dialogs, and they were the ones rendering out the base stylesheets. I had to give these custom skins as well.