This is a migrated thread and some comments may be shown as answers.

Custom Skin RadPanelBar

1 Answer 136 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Vineet Belani
Top achievements
Rank 1
Vineet Belani asked on 24 Oct 2008, 03:49 AM
Hi,

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

Sort by
0
Alex Gyoshev
Telerik team
answered on 27 Oct 2008, 04:17 PM
Hi Vineet Belani,

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.
Tags
PanelBar
Asked by
Vineet Belani
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or