[Solved] [urgent] Please help! How do I custom skin of panel bar

[louis chan]

Hi all,
It is not easy for me to set custom css into each of radcontrol...Now I have a question, I have downloaded a style sheet from telerik and read this topic already:
http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html
But I cannot change its css with the following code and the result is attached.

style sheet 

.RadPanelBar_JonDan
{
    background: #f8f8f8 !Important;
    font-family: Verdana, Arial, helvetica, sans-serif !Important;
    font-size: 11px !Important;
    line-height: 24px !Important;
}

.RadPanelBar_JonDan .rpRootGroup
{
    border: solid 1px #f0f0f0;
}

.RadPanelBar_JonDan .rpRootGroup .rpLink
{
    background: #fff !Important;
    font-weight: bold;
    font-size: 12px;
    border: none !Important;
    color: #cc0000;
}

.RadPanelBar_JonDan .rpRootGroup .rpFocused,
.RadPanelBar_JonDan .rpRootGroup .rpLink:hover
{
    background: #fff url('PanelBar/RootItemBg.png') 0 -1px !Important;
    color: #fff;
}

.RadPanelBar_JonDan .rpGroup .rpLink
{
    background: #f8f8f8 none !Important;
    border-top: solid 1px #fff !Important;
    border-bottom: solid 1px #f0f0f0 !Important;
    border-left: solid 1px #f8f8f8 !Important;
    border-right: solid 1px #f8f8f8 !Important;
    font-weight: normal;
    color: #666 !Important;
}

.RadPanelBar_JonDan .rpGroup .rpFocused,
.RadPanelBar_JonDan .rpGroup .rpLink:hover
{
    background: #fff none !Important;
    border-top: solid 1px #fff !Important;
    border-bottom: solid 1px #e6e6e6 !Important;
    border-left: solid 1px #f8f8f8 !Important;
    border-right: solid 1px #f8f8f8 !Important;
    font-weight: normal;
    color: #ff0000 !Important;
}

.RadPanelBar_JonDan .rpOut
{
    border-color: #f8f8f8 !Important;
}


.RadPanelBar_JonDan .rpExpanded
{
    border-color: #f8f8f8;
}


/* <disabled items> */
.RadPanelBar_JonDan .rpDisabled,
.RadPanelBar_JonDan .rpDisabled:hover
{
    color: #ccc;
}

.RadPanelBar_JonDan .rpDisabled:hover
{
    border-color: #002d96;
}

.RadPanelBar_JonDan .rpDisabled .rpOut,
.RadPanelBar_JonDan .rpDisabled:hover .rpOut
{
    border-color: #89aee5;
}
/* </disabled items> */

/* <expand arrows> */
.RadPanelBar_JonDan .rpExpandable .rpText,
.RadPanelBar_JonDan .rpExpanded .rpText
{
    background-color: transparent;
    background-image: url('PanelBar/Expandable.gif');
}

/* </expand arrows> */

/*      <expand arrows override> */
.RadPanelBar .rpExpandable .rpText,
.RadPanelBar .rpExpanded .rpText
{
    padding-right: 20px;
    background-repeat: no-repeat;
}

.RadPanelBar_rtl .rpExpandable .rpText,
.RadPanelBar_rtl .rpExpanded .rpText
{
    padding-left: 20px;
}

.RadPanelBar_rtl .rpGroup .rpText
{
    padding: 0 10px;
}

.RadPanelBar .rpExpandable .rpText { background-position: 100% 0; }
.RadPanelBar .rpExpanded .rpText { background-position: 100% -176px; }
.RadPanelBar_rtl .rpExpandable .rpText { background-position: 0 0; }
.RadPanelBar_rtl .rpExpanded .rpText { background-position: 0 -176px; }

.RadPanelBar .rpExpandable:hover .rpText,
.RadPanelBar .rpExpandable.rpSelected .rpText,
.RadPanelBar .rpExpandable.rpSelected:hover .rpText
{
    background-position: 100% -337px;
}

.RadPanelBar .rpExpanded:hover .rpText,
.RadPanelBar .rpExpanded.rpSelected .rpText,
.RadPanelBar .rpExpanded.rpSelected:hover .rpText
{
    background-position: 100% -476px;
}

.RadPanelBar_rtl .rpExpandable:hover .rpText,
.RadPanelBar_rtl .rpExpandable.rpSelected .rpText,
.RadPanelBar_rtl .rpExpandable.rpSelected:hover .rpText
{
    background-position: 0 -337px;
}

.RadPanelBar_rtl .rpExpanded:hover .rpText,
.RadPanelBar_rtl .rpExpanded.rpSelected .rpText,
.RadPanelBar_rtl .rpExpanded.rpSelected:hover .rpText
{
    background-position: 0 -476px;
}

/*      </expand arrows override> */

/* <subitems> */
.RadPanelBar_JonDan .rpGroup
{
    background-color: #fff;
}

.RadPanelBar_JonDan .rpGroup .rpLink,
.RadPanelBar_JonDan .rpGroup .rpTemplate
{
    color: #000;
    background-color: transparent;
    background-image: none;
    line-height: 20px;
    min-height: 20px;
}
* html .RadPanelBar_JonDan .rpGroup .rpLink { height: 20px; }

.RadPanelBar_JonDan .rpGroup .rpLink
{
    background-color: transparent;
    background-image: none;

    padding: 1px;
    margin: 0 1px;
}

.RadPanelBar_JonDan .rpGroup .rpOut
{
    border-bottom: 0;
    margin-right: 3px;
}

/* <subitems (disabled)> */
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled,
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover,
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover .rpOut
{
    background-image: none;
}

.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled,
.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover
{
    color: #999;
    text-decoration: none;
    background-color: #fff;
    border: 0;
    padding: 1px;
}

.RadPanelBar_JonDan .rpGroup .rpItem .rpDisabled:hover .rpOut
{
    border-bottom: 0;
}
/* </subitems (disabled)> */

/* <subitems> */

ascx

<link href="../Styling/ProductPanel.css" rel="stylesheet" type="text/css" /> <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" DataFieldID="productID"

DataFieldParentID="productParentID" DataSourceID="adsProducts"

DataTextField="productTitle" DataValueField="productID" Width="250px" EnableEmbeddedSkins="false" Skin="RadPanelBar_JonDan">

</telerik:RadPanelBar>

[Shinu]

Hi Louis,

Please make sure that you set the SkinName properly. I hope your custom skin will work fine if you change Skin="JonDan" for your PanelBar.

Hope it helps,

Shinu.

[louis chan]

Great, that's work! thx a lot!