We are using radPanelBar as a menu for our customer facing site. It seems to be doing a good job so far. I have couple of issues though.
I need to be able to indent items beyond the second level it supports by default. How do I go about doing that?
Any pointers/help will be appriciated.
Thanks
Sid
Heres an example:
This is how the menu is organized:
Home
+ Section 1
+ Sub-Section 1
- Sub-Sub - Section 1
- Sub-Sub - Section 2
+ Sub-Sub Section 3
- Item 1
- item 2
- item 3
I have my CSS style defined and working fine for upto Sub-Section 1, there after the indenting for Sub-Sub Section 3 is same as Sub-Section1. Can someone give me an idea of what I should be doing to achieve the new level of indent.
Heres my CSS code for your reference:
------------------- Start CSS code -------------------
/* telerik r.a.d.panelbar 4 eNora2 skin */
/* panelbar wrapper */
.RadPanelbar_eNora2
{
/*background-color: #3767A5;*/
white-space: nowrap;
width: 200px !important; /* this skin requires fixed width */
}
.RadPanelbar_eNora2 ul,
.RadPanelbar_eNora2 li
{
text-align:left;
font-size: 8pt;
line-height: 19px;
}
.RadPanelbar_eNora2 .rootGroup
{
border: solid 1px #8EA95C;
}
/* global text class declaration */
.RadPanelbar_eNora2 .text
{
padding: 0px 15px; /* vertical - horizontal */
font: bold 8pt Arial, Verdana, Sans-serif;
}
/* panelbar icon [if any] */
.RadPanelbar_eNora2 .image
{
margin: 0px 0px;
}
.RadPanelbar_eNora2 .rootGroup .text
{
/*background: url('Img/horzarrow.png') no-repeat 1px center;*/
line-height: 19px;
}
/* main item link */
.RadPanelbar_eNora2 .rootGroup a.link
{
background: url('Img/MainItemNormal.gif') repeat-x;
color: #FFFFFF;
line-height: 19px;
border-bottom: solid 1px #3767A5;
}
/* main item link:hover */
.RadPanelbar_eNora2 .rootGroup a.link:hover
{
background: url('Img/MainItemSelected.gif') repeat-x;
color: #3767a5;
}
/* child items enclosing parent element */
.RadPanelbar_eNora2 .group
{
/*background: url('Img/ChildItemNormal.gif') repeat-y;*/
/*background: #f6d101 url('Img/level1_bg.jpg') no-repeat;*/
}
/* child item link */
.RadPanelbar_eNora2 .rootGroup .group a.link
{
/*background: url('Img/ChildItemSeparator.gif') no-repeat left bottom;*/
background: #f6d101 url('Img/level1_bg.png') no-repeat;
color: black;
border-bottom: 0px;
}
/* child item link:hover */
.RadPanelbar_eNora2 .group a.link:hover
{
/*background: url('Img/ChildItemSeparator.gif') no-repeat left bottom;*/
color: white;
}
/* child item .text declaration */
.RadPanelbar_eNora2 .group .text
{
padding: 0px 20px;
line-height: 19px;
font-weight: normal;
}
.RadPanelbar_eNora2 .level1 .first a.link,
.RadPanelbar_eNora2 .level1 .first a.link:hover
{
background: #f6d101 url('Img/level1top_bg.png') no-repeat;
}
.RadPanelbar_eNora2 .group .level1 a.link,
.RadPanelbar_eNora2 .group .level1 a.link:hover
{
background: #f6d101 url('Img/level1_bg.png') no-repeat;
}
.RadPanelbar_eNora2 .level1 .text
{
padding-left: 25px;
line-height: 19px;
/*background: url('Img/Bullet.gif') no-repeat 36px center;*/
}
.RadPanelbar_eNora2 .group .level2 a.link
{
background: #f6d101 url('Img/level2_bg.png') no-repeat;
color: Black;
}
.RadPanelbar_eNora2 .group .level2 a.link:hover
{
background: #f6d101 url('Img/level2_bg.png') no-repeat;
color: White;
}
/*.RadPanelbar_eNora2 .group .level2 .last a.link,
.RadPanelbar_eNora2 .group .level2 .last a.link:hover
{
background: url('Img/ChildItemNormal.gif') repeat-y;
}*/
.RadPanelbar_eNora2 .level2 .text
{
padding-left: 38px;
line-height: 19px;
/*background: url('Img/Bullet.gif') no-repeat 36px center;*/
}
.RadPanelbar_eNora2 .rootGroup .expandable .text
{
background: url('Img/horzarrow.png') no-repeat left center;
line-height: 19px;
}
.RadPanelbar_eNora2 .level1 .expandable .text
{
background: url('Img/horzarrow2.png') no-repeat left center;
}
/* selected main panelbar item */
.RadPanelbar_eNora2 .rootGroup .expanded .text
{
background: url('Img/vertarrow.png') no-repeat left center;
line-height: 19px;
}
.RadPanelbar_eNora2 .level1 .expanded .text
{
background: url('Img/vertarrow2.png') no-repeat left center;
}
.RadPanelbar_eNora2 .group .level1 .selected .text
{
padding-left: 45px;
background: url('Img/vertarrow.png') no-repeat left center;
line-height: 19px;
}
/* selected child panelbar item */
/*.RadPanelbar_eNora2 .group .selected .text
{
background: transparent;
}*/
.RadPanelbar_eNora2 .rootGroup .disabled:hover,
.RadPanelbar_eNora2 .disabled .text
{
display:none;
background: url('Img/MainItemNormal.gif') no-repeat;
color: #ccc;
cursor: default;
}
.RadPanelbar_eNora2 .rootGroup .group .disabled:hover,
.RadPanelbar_eNora2 .rootGroup .group .disabled .text
{
text-decoration: none;
background: #f6d101 url('Img/Level2Bg.gif') repeat-y;
color: #ccc;
cursor: default;
}
.RadPanelbar_eNora2 .group .level2 .disabled,
.RadPanelbar_eNora2 .group .level2 .disabled:hover
{
background: #f6d101 url('Img/Level2Bg.gif') repeat-y;
}
.RadPanelbar_eNora2 .group .level2 .disabled .text,
.RadPanelbar_eNora2 .group .level2 .disabled:hover .text
{
background: url('Img/Bullet.gif') no-repeat 36px center;
}
.RadPanelbar_eNora2 .haschildren
{
background: url('Img/horzarrow.png') no-repeat 4px center;
}
---------------- End CSS Code -------------