Applying background-position to panel item

[scott]

I'm having trouble overriding the style applied to a rad panel item, the css shows that the background-position style is 0px 0px and it is being set from webResource.axd.  I'm trying to apply the "selected" look all the time (which has a background-position settting of 0px -400px.

I'm using the default skin (ie. no skin is set on the panelBar or panelItem).

this is a snippet of my page just before the radpanelbar:

<style type="text/css">
     .RadPanelBar a.rpLink,
     .RadPanelBar div.rpHeaderTemplate,
     .RadPanelBar a.rpExpanded,
     .RadPanelBar div.rpExpanded,
     .RadPanelBar .rpItem a.rpLinkExpandHovered
     .RadPanelBar_Default DIV.rpExpanded
     {
               background-position: 0 -400 !important;
               font: 14px/24px "Segoe UI", Arial, sans-serif;
               padding-bottom: 0px;
               padding-top: 0px;
               background-image: images/button_downloadtopdf.gif;
     }
     .myStyle DIV.rpExpanded
         {
                background-position: 0 -400 !important;
            }

          </style>

Directly following the style tag I have the following panel bar with the following panel item

<telerik:RadPanelBar id="pbApplicantDetail" runat="server" Width="782px" OnClientItemClicked="pbApplicantDetail_ItemClicked" BackColor="#FFFFCC" CssClass="myStyle"  >
                                    <Items>
                                        <telerik:RadPanelItem Text="Applicant Details" Value="piApplicantDetail">
                                            <HeaderTemplate>
                                                <Applicant:Message runat="server" id="UCApplicantDetail"></Applicant:Message>
                                            </HeaderTemplate>
                                        </telerik:RadPanelItem>

                                        <telerik:RadPanelItem runat="server" Text="Rule Information" Visible="true" Expanded="true" BorderStyle="None" Width="779px" CssClass="myStyle" >
                                            <HeaderTemplate>
                                                <asp:PlaceHolder ID="ruleHeaderPlaceholder" runat="server"></asp:PlaceHolder>
                                                <%--<RuleHeader:Message runat="server" ID="UCRulesHeader" />--%>
                                            </HeaderTemplate>
                                            <ContentTemplate>
                                                <%--<asp:PlaceHolder ID="ruleBodyPlaceholder" runat="server"></asp:PlaceHolder>--%>
                                                <Rules:Message runat="server" id="UCRulesDetail"></Rules:Message>
                                            </ContentTemplate>
                                        </telerik:RadPanelItem>

I'm looking at getting the style applied to the "Rule Information" panel item in the header.  It always shows up with the background position set to 0px 0px until the header is clicked, then it changes to 0px -400px which is what I want it to always be.  Setting the selected property to true shows it correct, but once it is not selected then it changes back.

[Kate]

Hi Scott,

To have the desired background position applied to the header of the RadPanelBar you will need to use the following css class selector instead of the one that you currently apply:

<style type="text/css">
    div.RadPanelBar_Default a.rpLink,
     div.RadPanelBar_Default div.rpHeaderTemplate,
      div.RadPanelBar_Default a.rpExpanded,
       div.RadPanelBar_Default div.rpExpanded,
        div.RadPanelBar_Default .rpItem a.rpLinkExpandHovered {
    background-position: 0 -400px;
}

    </style>

Regards,
Kate
the Telerik team