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

RadPanelBar custom skin not working

1 Answer 64 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Farhad Billimoria
Top achievements
Rank 1
Farhad Billimoria asked on 30 Aug 2008, 10:36 PM

Hi

We have been using Telerik controls since years , but ever since we installed your latest

RadControls for ASP.NET AJAX , I am really fighting to have our custom skins within our apps.

 

I have followed your tutorial Tutorial: Creating A Custom Skin

But have not able to get it to work.

 

Please tell me where I am going wrong?

 

I have the following in my page:

 

<link href="FHFBNAV/PanelBar.FHFBNAV.css" rel="stylesheet" type="text/css" />

 

<div id="navigation">

            <telerik:RadPanelBar

                id="radNavigation"

                Width="210px"

                Runat="server"                                               

                ExpandMode="SingleExpandedItem"

                Skin="FHFBNAV"

                Font-Names="Verdana"

                OnClientItemClicking="collapseRoots" AllowCollapseAllItems="True"

                EnableEmbeddedSkins="false">

                <CollapseAnimation Type="Linear" Duration="100"></CollapseAnimation>

                <ExpandAnimation Type="Linear" Duration="100"></ExpandAnimation>

          </telerik:RadPanelBar>

 

I have this directory structure for the css file:

FHFBNAV

                PanelBar

                                PanelBar. FHFBNAV.css

 

My css file looks like this :

 

.RadPanelbar_FHFBNAV

{

      /*background: white;*/

      background: url(PanelBar/itemsBg.gif) repeat-y;

      white-space: nowrap;

      border: solid 1px #608058;

      border-top: 0px;

      text-align:left;

}

 

.RadPanelbar_FHFBNAV .rpText

{

      padding: 0px 20px; /* vertical - horizontal */

      font: bold 11px Verdana, Arial, Sans-serif;

      line-height: 31px;

}

 

.RadPanelbar_FHFBNAV .rpImage

{

      margin: 4px 0px; /* vertical - horizontal */

}

 

 

.RadPanelbar_FHFBNAV .rpRootGroup .rpLink

{

      border-top: solid 1px #608058;

      background: url('PanelBar/RootItemBkg.gif') repeat-x;

      color: #10110f;

}

 

/* span class="text" */

.RadPanelbar_FHFBNAV .rpRootGroup .rpText

{

      font-weight: bold;

}

 

.RadPanelbar_FHFBNAV .rpRootGroup .rpLink:hover

{

      background: url('PanelBar/RootItemFocusedBkg.gif') repeat-x;

}

 

 

.RadPanelbar_FHFBNAV .rpRootGroup .rpDisabled:hover

{

      border-top: solid 1px #608058;

      background: url('PanelBar/RootItemBkg.gif') repeat-x;

      color: #10110f;

}

 

.RadPanelbar_FHFBNAV .rpGroup .rpText

{

      background: transparent;

      font-weight: normal;

      padding: 0px 20px; /* vertical-horizontal */

      border: 0px;

      line-height: 25px;

}

 

.RadPanelbar_FHFBNAV .rpLevel2 .rpText

{

      padding-left: 43px;

      line-height: 23px;

}

 

.RadPanelbar_FHFBNAV .rpRootGroup .rpExpanded .rpText

{

      background: url('PanelBar/RootItemBkgActive.gif') repeat-x;

}

 

/* child item link */

.RadPanelbar_FHFBNAV .rpGroup .rpLink

{

      background: url(PanelBar/itemsBg.gif) repeat-y;

      border: 0px;

}

 

/* child item link:hover */

.RadPanelbar_FHFBNAV .rpGroup .rpLink:hover,

.RadPanelbar_FHFBNAV .rpGroup .rpSelected .rpText

{

      background: url(PanelBar/itemSelected.gif) repeat-y;

      text-decoration: underline;

}

 

.RadPanelbar_FHFBNAV .rpRootGroup .rpDisabled:hover,

.RadPanelbar_FHFBNAV .rpRootGroup .rpDisabled .rpText

{

      background: url('PanelBar/RootItemBkg.gif') repeat-x;

      color: #ccc;

      cursor: default;

}

 

.RadPanelbar_FHFBNAV .rpRootGroup .rpGroup .rpDisabled:hover,

.RadPanelbar_FHFBNAV .rpRootGroup .rpGroup .rpDisabled .rpText

{

      text-decoration: none;

      background: url(PanelBar/itemsBg.gif) repeat-y;

      border-top: none;

      color: #ccc;

      cursor: default;

}

 

Please help I am in the middle of a release..

 

Thanks

Farhad Billimoria

 

1 Answer, 1 is accepted

Sort by
0
Farhad Billimoria
Top achievements
Rank 1
answered on 31 Aug 2008, 01:19 AM
thanks i got it working ,

i noticed that RadPanelbar was to be spelt RadPanelBar

whoever created css  if only it could send out some good error messages...developers can save a lot of time..
or may be telerik can figure out how to throw an error when it cannot read the css file or if it finds a mismatch in the class names..

Tags
PanelBar
Asked by
Farhad Billimoria
Top achievements
Rank 1
Answers by
Farhad Billimoria
Top achievements
Rank 1
Share this question
or