Rank 1
I have been stuck on an issue for a long time now and in need of some assistance.
I am currently working on a DotNetNuke module with the Telerik DLL which is being referenced. I have Telerik file version: 2008.02.0826.20.
I am trying to make a custom skin for the RadPanel Bar and followed the instructions outlined the Telerik "Basics of Telerik RAD Controls Skinning" and it doesn't seem to work.
The following is the code I am using which is nice and simple.
ASCX:
<
telerik:RadPanelBar runat="server" Width="200px" Height="450px" ID="MyMenu"
Skin="WindowsXP" ExpandMode="FullExpandedItem"
PersistStateInCookie="False" EnableEmbeddedSkins="false" >
<CollapseAnimation Type="InBounce" Duration="100"></CollapseAnimation>
<ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
</
telerik:RadPanelBar>
The structure for the Folders is as follows:
root
|__RadControls
|__PanelBar
|__Skins
|__PRMS
|__img
| |__arrow-collapse.png
| |__arrow-expand.png
| |__panel_bar_bg_selected.png
| |__panel_bar_bg_unselected.png
|__Style.css
.RadPanelBar_PRMS
{
background: #FFFFFF;
color: #000000;
}
.RadPanelBar_PRMS
.rpRootGroup
{
border: 1px solid #000000;
border-bottom-color: #000000;
}
.RadPanelBar_PRMS
.rpRootGroup .rpItem
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/panel_bar_bg_selected.png') repeat-x top left;
background: #FFFFFF;
}
.RadPanelBar_PRMS
.rpRootGroup .rpLink
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/panel_bar_bg_selected.png') no-repeat top left;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #000000;
overflow: hidden;
}
.RadPanelBar_PRMS
.rpRootGroup .rpLink:hover .rpText
{
color: #000;
}
.RadPanelBar_PRMS
.rpGroup .rpLink:hover .rpText
{
color: #000;
}
.RadPanelBar_PRMS
.rpRootGroup .rpText
{
margin-left: 10px;
}
.RadPanelBar_PRMS_rtl
.rpRootGroup .rpText
{
margin-right: 10px;
}
.RadPanelBar_PRMS
.rpGroup .rpItem,
.RadPanelBar_PRMS
.rpGroup .rpLink
{
height: auto;
border: 0;
background: none;
}
.RadPanelBar_PRMS
.rpText
{
margin-right: 7px;
overflow-x: hidden;
}
.RadPanelBar_PRMS_rtl
.rpText
{
margin-right: 0;
margin-right: 7px;
}
.RadPanelBar_PRMS
.rpExpandable .rpText
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/arrow-expand.png') no-repeat right 7px;
}
.RadPanelBar_PRMS
.rpExpanded .rpText
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/arrow-collapse.png') no-repeat right 7px;
}
.RadPanelBar_PRMS
.rpGroup .rpExpanded .rpText
{
background-position: right 5px;
}
.RadPanelBar_PRMS_rtl
.rpExpandable .rpText
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/arrow-expand.png') no-repeat left 7px;
}
.RadPanelBar_PRMS_rtl
.rpExpanded .rpText
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/arrow-collapse.png') no-repeat left 7px;
}
.RadPanelBar_PRMS_rtl
.rpGroup .rpExpanded .rpText
{
background-position: left 5px;
}
.RadPanelBar_PRMS
.rpRootGroup .rpText
{
font: normal 12px Verdana, Arial, sans-serif;
line-height: 30px;
color: #000000;
padding: 0 0 0 0;
}
.RadPanelBar_PRMS_rtl
.rpRootGroup .rpText
{
padding: 0 0 0 0;
}
.RadPanelBar_PRMS
.rpGroup .rpText
{
font-size: 11px;
padding: 0 0 0 0;
color: #000;
}
.RadPanelBar_PRMS_rtl
.rpRootGroup .rpText
{
padding: 0 0 0 0;
}
.RadPanelBar_PRMS
.rpGroup .rpLink
{
margin-right: 2px;
display: block;
width: auto;
}
.RadPanelBar_PRMS_rtl
.rpGroup .rpLink
{
text-indent: 3px;
}
.RadPanelBar_PRMS
.rpLevel1 .rpLink
{
margin-left: 0;
}
.RadPanelBar_PRMS
.rpLevel2 .rpLink
{
margin-left: 10px;
}
.RadPanelBar_PRMS
.rpLevel3 .rpLink
{
margin-left: 20px;
}
.RadPanelBar_PRMS_rtl
.rpLevel1 .rpLink
{
margin-right: 0;
margin-left: 0;
}
.RadPanelBar_PRMS_rtl
.rpLevel2 .rpLink
{
margin-right: 10px;
margin-left: 0;
}
.RadPanelBar_PRMS_rtl
.rpLevel3 .rpLink
{
margin-right: 20px;
margin-left: 0;
}
.RadPanelBar_PRMS_rtl
.rpGroup .rpLink
{
margin-left: 2px;
}
.RadPanelBar_PRMS
.rpGroup .rpText
{
margin-right: 0;
}
.RadPanelBar_PRMS
.rpGroup .rpLink:hover
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/subitem-hover.png') no-repeat 2px top;
}
.RadPanelBar_PRMS
.rpGroup .rpExpandable:hover
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/subitem-expandable-hover.png') no-repeat 2px top;
}
.RadPanelBar_PRMS
.rpGroup .rpExpanded:hover
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/subitem-expanded-hover.png') no-repeat 2px top;
}
.RadPanelBar_PRMS_rtl
.rpGroup .rpExpandable:hover
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/subitem-expandable-hover-rtl.png') no-repeat 12px top;
}
.RadPanelBar_PRMS_rtl
.rpGroup .rpExpanded:hover
{
background: transparent url('http://localhost/prms/RadControls/PanelBar/Skins/PRMS/img/subitem-expanded-hover-rtl.png') no-repeat 12px top;
}
/* these should be checked */
.RadPanelBar_PRMS
.rpRootGroup .rpSelected .rpText
{
font-weight: bold;
}
.RadPanelBar_PRMS
.rpGroup .rpSelected .rpText
{
font-weight: normal;
text-decoration: underline;
}
.RadPanelBar_PRMS
.rpDisabled .rpText
{
cursor: default;
color: #bbb;
}
.RadPanelBar_PRMS
.rpRootGroup .rpDisabled:hover
{
cursor: default;
text-decoration: none;
}
.RadPanelBar_PRMS
.rpRootGroup .rpDisabled:hover .rpText
{
color: #bbb;
}
.RadPanelBar_PRMS
.rpGroup .rpDisabled:hover
{
border-bottom: 0;
cursor: default;
text-decoration: none;
background: none;
}
.RadPanelBar_PRMS
.rpGroup .rpDisabled:hover .rpText
{
background: none;
}
.RadPanelBar_PRMS
.rpGroup .rpLast
{
zoom: 1;
}
1 Answer, 1 is accepted
The skin registration model has been changed for RadControls for ASP.NET AJAX.
Please consider reading the skin registration help topic in our online help.
Regards,
Alex
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.