Rank 1
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
Rank 1
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..