Different themes not applied correctly with several panelbars on a page

Article information
Article relates to	RadPanelBar v3.x RadMenu v3.x RadTabStrip v2.x
Created by	Paul, Telerik
Last modified by	Veskoni, Telerik

PROBLEM
When using several panelbars with different themes on the same page, the theme definition of the last one is applied to all of them.
Note: This problem does not exist in RadPanelBar v.4.x and RadPanelBar for ASP.NET AJAX (Prometheus)


SOLUTION
Basically, the panelbar is rendered as a table in the HTML code of the page and every instance of the control determines the ID of the Table tag in which it is embedded by the ID property of the RadPanelBar.However the CSS style definitions of the panelbars are applied globally to the page and since the classes of each panelbar often have equal names, the css specification of the last panelbar overrides the rest.

Fortunately, there is a workaround. If you have a couple of panelbars on the same page and the names of their instances are RadPanelBar1 and RadPanelBar2, i.e.

<radp:RadPanelBar id="RadPanelBar1" Runat="server" Theme="PinkDrop">
    <PanelItems>
      <radp:PanelItem Text="panel1">
       <radp:PanelItem Text="subpanel1"></radp:PanelItem>
     </radp:PanelItem>
     <radp:PanelItem Text="panel2"></radp:PanelItem>
   </PanelItems>
</radp:RadPanelBar>
<radp:RadPanelBar id="RadPanelBar2" Runat="server" Theme="Folders">
   <PanelItems>
     <radp:PanelItem Text="item1">
       <radp:PanelItem Text="subitem1"></radp:PanelItem>
     </radp:PanelItem>
     <radp:PanelItem Text="item2"></radp:PanelItem>
   </PanelItems>
</radp:RadPanelBar>

edit the css file of the first panelbar as follows:

#RadPanelBar1 .panelbarHeaderCollapsed
{   
 FONT-SIZE: 11px;
 COLOR: White;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 height: 39px;
 background-repeat: no-repeat;
 background-position: center;
 padding: 7px 0px 0px 67px;
 background-image: url(../Img/HeaderCollapsed.jpg);
}

#RadPanelBar1 .panelbarHeaderHover
{   
 FONT-SIZE: 11px;
 COLOR: Blue;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 height: 39px;
 background-repeat: no-repeat;
 background-position: center;
 padding: 7px 0px 0px 67px;
 background-image: url(../Img/HeaderCollapsed.jpg);
}

#RadPanelBar1 .panelbarHeaderExpand
{
 FONT-SIZE: 11px;
 COLOR: Black;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 height: 39px;
 background-repeat: no-repeat;
 background-position: center;
 padding: 12px 0px 0px 67px;
 background-image: url(../Img/HeaderExpanded.jpg);
}

#RadPanelBar1 .panelbarItem
{
 FONT-SIZE: 11px;
 COLOR: Black;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 padding-bottom: 9px;
 padding-left: 67px;
 height: 16px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 background-image: url(../Img/itemsArrow.gif);
 background-repeat: no-repeat;
 background-position:  20px 5px;
}

#RadPanelBar1 .panelbarItemHover
{
 FONT-SIZE: 11px;
 COLOR: Red;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 padding-bottom: 9px;
 padding-left: 67px;
 height: 16px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 background-image: url(../Img/itemsArrow.gif);
 background-repeat: no-repeat;
 background-position:  20px 5px;
}
#RadPanelBar1 .panelbarItemSelected
{
 FONT-SIZE: 11px;
 COLOR: White;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 padding-bottom: 9px;
 padding-left: 67px;
 height: 16px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 background-image: url(../Img/itemsArrow.gif);
 background-repeat: no-repeat;
 background-position:  20px 5px; 
}
#RadPanelBar1 .panelbarItemGroup
{
 background-image: url(../Img/itemsBg.jpg);
 background-repeat: no-repeat;
 background-position: bottom;
}

#RadPanelBar1 .Panelbar
{
 background-image: url(../Img/bg.gif);
}

Thus you will force the browser to be aware that those css conventions should be enclosed to the panel items of the first panelbar control. Those changes are also applicable if you appear to have three, four, etc. panelbars on the page - just alternate the css file of the respective panelbar objects (#RadPanelBar2 , #RadPanelBar3 , etc.).

To use a skin from several panelbars at the same time do the following:

#RadPanelBar1 .panelbarItem,#RadPanelBar3 .panelbarItem
{
 FONT-SIZE: 11px;
 COLOR: Black;
 FONT-FAMILY: Arial,Verdana;
 cursor: hand;
 cursor: pointer;
 padding-bottom: 9px;
 padding-left: 67px;
 height: 16px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 background-image: url(../Img/itemsArrow.gif);
 background-repeat: no-repeat;
 background-position:  20px 5px;
}          

Note that similar modifications can be made for RadMenu and RadTabStrip when used in a situation like the one described above.