Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > background image for first hover panel not working?
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered background image for first hover panel not working?

Feed from this thread
  • Karl Intermediate avatar

    Posted on Dec 2, 2010 (permalink)

    I've created a new skin for a PanelBar and applied it to my test panel but am getting some unexpected results when I hover over the first panel.

    If I hover over the first panel the backgroung image dissapears and shows as plain white. if I hover over the second panel this effect is not seen.

    Can anyone point me in the right direction as to how to fix this?

    I have attached an image to show whats happening and an image which is the PanelBar backgrond image, along with the css for the panel and css below...


    HTML code for the Panel...

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PanelTestForm.aspx.cs" Inherits="ServiceTrack.Net.PanelTestForm" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Src="~/CustomControls/PanelHeader.ascx" TagPrefix="PES" TagName="PanelHeader"  %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title></title>
        <link href="Skins/FavouriteOrdersPanel/PanelBar.FavouriteOrdersPanel.css" rel="stylesheet" type="text/css" />
        <script language="javascript" type="text/javascript">
      
            var myTotals = new Array();
      
            function CalculateValues(arrayValue, control,itemQty, itemValue)
            {
                if (!isNaN(itemQty) && !isNaN(itemValue))
                {
                    myTotals[arrayValue] = itemQty * itemValue;
                }
                GetTotal();
            }
      
            function GetTotal()
            {
                var x;
                var newTotal = 0;
                for (x in myTotals)
                {
                    newTotal += myTotals[x];
                }
                var panelTotals = document.getElementById('PanelTotals');
                panelTotals.innerHTML = '£' + newTotal;
            }
      
        </script>
      
      
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
      
            <asp:ScriptManager runat="server" /> 
                  
            <%--#######################################################################################--%>
            <telerik:RadPanelBar 
                    ID="TestPanelBar" 
                    runat="server" 
                    EnableViewState="true" 
                    AllowCollapseAllItems="true"
                    ExpandMode="MultipleExpandedItems"
                    EnableEmbeddedSkins="false" 
                    Skin="FavouriteOrdersPanel" 
                    Width="700"
                    >
                <Items>
                          
                    <telerik:RadPanelItem Text="India" runat="server" Value="10" ImagePosition="Left" >
                        <Items>
                            <telerik:RadPanelItem Text="Delhi" runat="server"   >
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Bangalore" runat="server" >
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
      
                    <telerik:RadPanelItem Text="America" runat="server" Value="100" ImagePosition="Left">
                        <Items>
                            <telerik:RadPanelItem Text="Texas" runat="server" >
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Akansas" runat="server" >
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
      
                </Items>
                      
            </telerik:RadPanelBar>
            <%--#######################################################################################--%>
            <br />
            <br />
            <div style="margin-left: 505px;">
                <label id="PanelTotals">£0.00</label>
            </div>
      
        </div>
        </form>
    </body>
    </html>



    Code behind...
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Web.UI.HtmlControls;
      
    namespace ServiceTrack.Net
    {
        public partial class PanelTestForm : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                BuildPanel(1, "India", "IndiaTB", (decimal)9.99);
                BuildPanel(2, "America", "AmericaTB", (decimal)149.75);
            }
      
            protected void BuildPanel(int summaryTotal, string panelText, string textBoxId, decimal lineValue)
            { 
                RadPanelItem panel = (RadPanelItem)TestPanelBar.FindItemByText(panelText);
      
                HtmlGenericControl header = new HtmlGenericControl("div");
                header.Attributes["style"] = "margin-top: -24px; margin-left: 440px; height: 20px; width: 260px; float: left;";
                panel.Controls.Add(header);
      
                Label quantityLabel = new Label();
                quantityLabel.Text = "Quantity ";
                quantityLabel.Width = Unit.Pixel(65);
      
                TextBox qtyTextBox = new TextBox();
                qtyTextBox.ID = textBoxId;
                qtyTextBox.Width = Unit.Pixel(50);
                qtyTextBox.Height = Unit.Pixel(14);
                qtyTextBox.Attributes["onBlur"] = "CalculateValues(" + summaryTotal + ", this, this.value, " + lineValue + ")";
                qtyTextBox.CssClass = "TextBoxTest";
      
                Label valueLabel = new Label();
                valueLabel.ID = textBoxId + "LabelValue";
      
                HyperLink removeFavouriteLink = new HyperLink();
                removeFavouriteLink.ImageUrl = "~/App_Themes/ServiceTrack.Net/Images/SmallButtons/btn_Cross.png";
                removeFavouriteLink.Attributes["style"] = "position: relative; top: 2px; ";
                removeFavouriteLink.NavigateUrl = "#";
      
                header.Controls.Add(quantityLabel);
                header.Controls.Add(qtyTextBox);
                header.Controls.Add(valueLabel);
                header.Controls.Add(removeFavouriteLink);
      
            }
      
        }
    }


    finally, the css files for the PanelBar...

    .RadPanelBar_FavouriteOrdersPanel
    {
        background: #fff;
    }
      
    .RadPanelBar_FavouriteOrdersPanel .rpRootGroup
    {
        border-color: #999;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpLink,
    .RadPanelBar_FavouriteOrdersPanel .rpTemplate
    {
        color: #000;
        font: normal 12px/24px "Segoe UI", Arial, sans-serif;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpLink
    {
        background-color: #e4e4e4;
        border-color: #999;
    }
      
    /* compensate for borders */
      
    .RadPanelBar_FavouriteOrdersPanel .rpOut
    {
        border-color: #e4e4e4;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded
    {
        border-color: #3d556c;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpLink:hover,
    .RadPanelBar_FavouriteOrdersPanel a.rpFocused,
    .RadPanelBar_FavouriteOrdersPanel a.rpSelected
    {
        color: #892500;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpLink:hover,
    .RadPanelBar_FavouriteOrdersPanel a.rpFocused
    {
        background-color: #ffe79c;
        border-color: #c98400;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpSelected,
    .RadPanelBar_FavouriteOrdersPanel a.rpSelected:hover
    {
        background-color: #ffa517;
        border-color: #ca4b0c;
    }
      
    div.RadPanelBar_FavouriteOrdersPanel a.rpLink .rpOut,
    div.RadPanelBar_FavouriteOrdersPanel a.rpFocused .rpOut, 
    div.RadPanelBar_FavouriteOrdersPanel a.rpLink:hover .rpOut, 
    div.RadPanelBar_FavouriteOrdersPanel a.rpSelected .rpOut, 
    div.RadPanelBar_FavouriteOrdersPanel a.rpSelected:hover .rpOut
    {
        padding-bottom: 1px;
        border: 0;
    }
      
    /* <disabled items> */
    .RadPanelBar_FavouriteOrdersPanel a.rpDisabled,
    .RadPanelBar_FavouriteOrdersPanel a.rpDisabled:hover
    {
        color: #bbb;
        background-color: #e4e4e4;
        border-color: #999;
        cursor: default;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpDisabled:hover .rpOut
    {
        border-color: #e4e4e4;
    }
    /* </disabled items> */
      
    /* <subitems> */
    .RadPanelBar_FavouriteOrdersPanel .rpGroup
    {
        background-color: #fff;
    }
      
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpLink,
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup .rpTemplate
    {
        color: #000;
        background-color: transparent;
        background-image: none;
        border: 0;
        margin: 0 2px;
        padding: 1px;
    }
      
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpLink:hover,
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpFocused,
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected,
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected:hover
    {
        color: #892500;
        border: 1px solid #c98400;
        background-color: #ffe79c;
        padding: 0;
    }
      
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected
    {
        background-color: #ffa517;
        border-color: #ca4b0c;
    }
      
    /* <subitems (disabled)> */
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpDisabled,
    div.RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpDisabled:hover
    {
        color: #bbb;
        text-decoration: none;
        background-color: #fff;
        border: 0;
        padding: 1px;
    }
    /* </subitems (disabled)> */
      
    /* <subitems> */
      
    /* <background positioning> */
    .RadPanelBar_FavouriteOrdersPanel a.rpFocused,
    .RadPanelBar_FavouriteOrdersPanel a.rpLink:hover,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded:hover
    {
        background-position: 0 -200px;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpLink,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded,
    .RadPanelBar_FavouriteOrdersPanel .rpItem a.rpLinkExpandHovered
    {
        background-position: 0 0;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpSelected,
    .RadPanelBar_FavouriteOrdersPanel a.rpSelected:hover
    {
        background-position: 0 -400px;
    }
      
    .RadPanelBar_FavouriteOrdersPanel .rpFirst a.rpLink,
    .RadPanelBar_FavouriteOrdersPanel .rpFirst a.rpExpanded
    {
        background-position: 0 -1px;
    }
      
    .RadPanelBar_FavouriteOrdersPanel .rpFirst a.rpFocused,
    .RadPanelBar_FavouriteOrdersPanel .rpFirst a.rpLink:hover
    {
        background-position: 0 -201px;
    }
      
    .RadPanelBar_FavouriteOrdersPanel .rpFirst a.rpSelected,
    .RadPanelBar_FavouriteOrdersPanel .rpFirst a.rpSelected:hover
    {
        background-position: 0 -401px;
    }
      
    /*      <expand arrows> */
    /* <expand arrows> */
    .RadPanelBar_FavouriteOrdersPanel a.rpExpandable .rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded .rpExpandHandle
    {
        background-color: transparent;
        background-image: url('PanelBar/Expandable.png');
        background-repeat: no-repeat;
    }
      
    .RadPanelBar_FavouriteOrdersPanel_rtl .rpGroup .rpText
    {
        padding: 0 10px;
    }
      
    .RadPanelBar_FavouriteOrdersPanel a.rpExpandable .rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpandable:hover .rpNavigation .rpExpandHandle { background-position: 0 -5px; }
    .RadPanelBar_FavouriteOrdersPanel a.rpExpandable:hover .rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpandable:hover .rpNavigation .rpExpandHandleHovered { background-position: 100% -5px; }
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded .rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded:hover .rpNavigation .rpExpandHandle { background-position: 0 -181px; }
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded:hover .rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel a.rpExpanded:hover .rpNavigation .rpExpandHandleHovered { background-position: 100% -181px; }
      
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpandable span.rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpandable:hover .rpNavigation span.rpExpandHandle { background-position: 0 -343px; margin: 4px 0 0 0; }
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpandable:hover span.rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpandable:hover .rpNavigation span.rpExpandHandleHovered { background-position: 100% -343px; margin: 4px 0 0 0; }
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpanded span.rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpanded:hover .rpNavigation span.rpExpandHandle { background-position: 0 -482px; margin: 4px 0 0 0; }
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpanded:hover span.rpExpandHandle,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpExpanded:hover .rpNavigation span.rpExpandHandleHovered { background-position: 100% -482px; margin: 4px 0 0 0; }
      
    /*      </expand arrows> */
      
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpLink,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpLink .rpOut { background-position: 0 200px; }
      
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpLink:hover,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpFocused { background-position: 100% -22px; }
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpLink:hover .rpOut,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpFocused .rpOut { background-position: 0 0; }
      
    /*      <subitems (selected)> */
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected:hover { background-position: 100% -222px; background-color: transparent; }
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected .rpOut,
    .RadPanelBar_FavouriteOrdersPanel .rpGroup a.rpSelected:hover .rpOut { background-position: 0 -200px; }
    /*      </subitems (selected)> */
      
    /* </background positioning> */
      
      
      
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup {
      
        BORDER-BOTTOM: 0px solid;
      
        BORDER-LEFT: 0px solid;
      
        BORDER-TOP: #FFFFFF 0px solid;
      
        BORDER-RIGHT: 0px solid;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpLink {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
      
        BORDER-BOTTOM: #FFFFFF 1px solid;
      
        BACKGROUND-COLOR: #FFFFFF;
      
        BACKGROUND-POSITION: 0px 0px;
      
        COLOR: #888888;
      
        FONT-WEIGHT: bold;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpLink:hover {
      
        BACKGROUND-COLOR: #FFFFFF;
      
        COLOR: #888888;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpExpandable {
      
        BACKGROUND-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpDisabled {
      
        BACKGROUND-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpDisabled:hover {
      
        BACKGROUND-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpLink .rpText {
      
        PADDING-LEFT: 70px;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpLink:hover {
      
        BORDER-TOP-COLOR: #FFFFFF;
      
        BORDER-RIGHT-COLOR: #FFFFFF;
      
        BORDER-LEFT-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpSelected {
      
        BACKGROUND-COLOR: #FFFFFF;
      
        BORDER-TOP-COLOR: #FFFFFF;
      
        BORDER-RIGHT-COLOR: #FFFFFF;
      
        BORDER-LEFT-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpExpanded {
      
        BACKGROUND-COLOR: #FFFFFF;
      
        BORDER-TOP-COLOR: #FFFFFF;
      
        BORDER-RIGHT-COLOR: #FFFFFF;
      
        BORDER-LEFT-COLOR: #FFFFFF;
      
    }
      
      
      
      
      
      
      
      
      
      
     DIV.RadPanelBar_FavouriteOrdersPanel {
      
        BACKGROUND-COLOR: transparent;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpLink {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_A.png');*/
      
        BORDER-BOTTOM-COLOR: transparent;
      
        BACKGROUND-COLOR: transparent;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpLink:hover {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_B.png');*/
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpExpandable {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_C.png');*/
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpExpanded {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_D.png');*/
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpSelected {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_D.png');*/
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpDisabled {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_E.png');*/
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpRootGroup .rpDisabled:hover {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG.png');
        /*BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_E.png');*/
      
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpLink {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_Plain.png');
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpLink:hover {
      
        BORDER-BOTTOM-COLOR: #FFFFFF;
      
        BACKGROUND-POSITION: 0px 0px;
      
        BORDER-LEFT-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpSelected {
      
        BORDER-BOTTOM-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpExpanded {
      
        BORDER-BOTTOM-COLOR: #FFFFFF;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpLink .rpOut {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_Plain.png');
      
        BACKGROUND-POSITION: 0px 0px;
      
    }
      
     DIV.RadPanelBar_FavouriteOrdersPanel .rpItem .rpGroup .rpLink .rpText {
      
        BACKGROUND-IMAGE: url('PanelBar/FavouriteOrdersPanelBG_Plain.png');
      
    }

  • Kamen Bundev Kamen Bundev avatar

    Posted on Dec 8, 2010 (permalink)

    Hello Karl,

    Can you also attach the images that you use in this skin, so I can be able to correctly test the solution?

    Greetings,
    Kamen Bundev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  • Karl Intermediate avatar

    Posted on Dec 8, 2010 (permalink)

    Thanks Kamen,

    It is worth noting that the skin was created using the BETA tekerik style builder  so I dont expect it to be fully functional. Ive attached a couple of images so you have an idea of what Im after. The plain background image is the one used for the panel bars and the btn_ images are used for showing the expanded and collapsed panels.

    The Images Expanded.png and Collapsed.png are only examples of what the panel sshould look like in that state...

  • Kamen Bundev Kamen Bundev avatar

    Posted on Dec 16, 2010 (permalink)

    Hi Karl,

    I've modified your skin to fix the hover and I also applied your expand and collapse images instead. Check the attached skin.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > background image for first hover panel not working?