Custom skin not working

[newbie]

I have a RadPanelBar on my master page.
I have registered the custom skin on the page and set the EnableEmbeddedSkin property to False.My custome skings are not working properly.

<

telerik:RadPanelBar ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" Skin="MySkin" EnableEmbeddedSkins="false" Style="margin-right: 0px"></telerik:RadPanelBar>

I am using Images in my custome skin but somehow the Images do not load.
It just shows plain text.

This is how my css file looks like:

/* Default RadPanelBar Custom skin */

.RadPanelbar_MySkin
{
background: #e0e0e0;
white-space: nowrap;
width: 167px !important;
font: normal 11px Arial, Verdana, Sans-serif;
}

.RadPanelbar_MySkin .rpText
{
padding-left: 23px;
vertical-align: super;
}

.RadPanelbar_MySkin .rpImage
{
margin: 4px 0px;
}

.RadPanelbar_MySkin

.rpRootGroup .rpLink
{
background: #e0e0e0 url('PanelBar/vNavHeader.gif') no-repeat;
line-height: 24px;
height: 30px;
color: white;
font-weight: bold;
}

.RadPanelbar_MySkin

.rpRootGroup .rpLink:hover
{
color: #e0e0e0;
}

.RadPanelbar_MySkin

.rpRootGroup .rpExpanded,
.RadPanelbar_MySkin .rpRootGroup .rpLink:hover .rpExpanded
{
background: #e0e0e0 url('PanelBar/vNavHeaderExpanded.gif') no-repeat !important;
height: 25px;
}

.RadPanelbar_MySkin .rpRootGroup .rpSelected
{
text-decoration: underline;
}

.RadPanelbar_MySkin

.rpGroup .rpLink
{
background: #e0e0e0 url('PanelBar/vNavSubMidMenuItemOut.gif') no-repeat;
line-height: 23px;
height: 23px;
font-weight: normal;
}

.RadPanelbar_MySkin .rpGroup .rpExpanded,
.RadPanelbar_MySkin .rpGroup .rpLink:hover .rpExpanded
{
background: #e0e0e0 url('PanelBar/vNavSubMidMenuItemOut.gif') no-repeat !important;
height: 23px !important;
line-height: 27px !important;
overflow: hidden !important;
color: white !important;
}

.RadPanelbar_MySkin

.rpGroup .rpLast .rpLink
{
background: #e0e0e0 url('PanelBar/vNavSubBtmMenuItemOut.gif') no-repeat;
height: 31px;
}

.RadPanelbar_MySkin

.rpGroup .rpLast .rpLink:hover
{
background: #e0e0e0 url('PanelBar/vNavSubBtmMenuItemOver.gif') no-repeat;
height: 31px;
}

.RadPanelbar_MySkin

.rpGroup .rpLink
{
color: white;
} 

.RadPanelbar_MySkin

.rpGroup .rpLink:hover
{
color: #0066cc;
background: #e0e0e0 url('PanelBar/vNavSubMidMenuItemOver.gif') no-repeat;
} 

.RadPanelbar_MySkin

.rpGroup .rpSelected
{
background: #e0e0e0 url('PanelBar/vNavSubMidMenuItemOver.gif') no-repeat;
text-decoration: underline;
color: white;
} 

.RadPanelbar_MySkin

.rpGroup .rpLast .rpSelected
{
background: #e0e0e0 url('PanelBar/vNavSubBtmMenuItemOver.gif') no-repeat;
text-decoration: underline;
color: white;
} 

.RadPanelbar_MySkin

.rpRootGroup .rpExpanded .rpText
{
line-height: 25px;
color: white;
font-weight: bold;
} 

.RadPanelbar_MySkin

.rpGroup .rpSelected .rpText
{
font-weight: normal;
} 

.RadPanelbar_MySkin

.rpGroup .rpExpanded .rpText
{
color: white;
font-weight: normal;
} 

.RadPanelbar_MySkin

.rpLevel2 .text
{
background: no-repeat left center;
margin-left: 15px;
padding-left: 18px;
line-height: 23px;
} 

.RadPanelbar_MySkin

.rpLevel2 .selected .text
{
background: no-repeat left center;
margin-left: 15px;
padding-left: 18px;
}

.RadPanelbar_MySkin

.rpDisabled .text
{
color: #ccc;
cursor: default;
}

 .RadPanelbar_MySkin ul.rpRootGroup .rpDisabled:hover,
.RadPanelbar_MySkin .rpRootGroup .rpDisabled .text
{
background: #e0e0e0 url('PanelBar/vNavHeader.gif') no-repeat;
color: #ccc;
cursor: default;
} 

.RadPanelbar_MySkin

.rpRootGroup .rpGroup .rpDisabled:hover,
.RadPanelbar_MySkin .rpRootGroup .rpGroup .rpDisabled .rpText
{
text-decoration: none;
background: #e0e0e0 url('PanelBar/vNavSubMidMenuItemOut.gif') no-repeat;
color: #ccc;
cursor: default;
}

 .RadPanelbar_MySkin .rpRootGroup .rpGroup .rpLevel2 .rpDisabled .rpText
{
background: no-repeat left center;
margin-left: 15px;
padding-left: 18px;
line-height: 23px;
}


Please suggest what I am doing wrong here?

[Atanas Korchev]

Hi,

Do the other parts of the skin apply correctly? If not you may have not properly registered your CSS file. Please check our online documentation regarding the skinning of RadControls.

If fonts and colors apply you can check if the path to the background images is correct. You can use the FireBug plugin for FireFox to see if the images are successfully downloaded.

Kind regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[tw08]

try RadPanelBar instead of RadPanelbar. I have the same problem. After corrected the single letter, my skin works for me. Hope this helps!

[Andrew]

I am having the exact same problem.  Renaming the class to use Bar instead of bar allowed the bgcolor to show up, but thats it.

Essentially i just get a box with text links - no images or styles work at all.

Please help if you can.

Thanks,

-A

[Helen]

Hello,

Did you register the base css class of RadPanelBar on the page?
It is located in the C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2008\Skins\PanelBar.css if you use the default installation.

Hope this helps.

Regards,
Helen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andrew]

Hello Helen,

We figured it out. After some digging and this link: http://www.telerik.com/help/aspnet-ajax/migrating_skins_from_radpanelbar_asp.net_to_asp.net_ajax.html

We discovered that when we upgraded to the latest version of telerik, all of the CSS class names changed - so blamo, there went our custom skins.

Now that we know to change them, we should be good to go.

Thanks for the quick response.

-A