RadSlidingPane Tabs, Need to implement Hover over Image??

2 posts, 0 answers
  1. Michael Okon
    Michael Okon avatar
    3 posts
    Member since:
    Jul 2009

    Posted 05 Jan 2010 Link to this post

    I am looking to implement 2 images to be used for the tabs on RadSlidingPanes. The second I hope to use when the user hovers over with the mouse . Is this possible ?? I have not been able to find any documentation regarding this implementation. Any help or just point in right direction Most welcome.

    Thanks In advance

  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 07 Jan 2010 Link to this post

    Hi Michael,
    You can use the following CSS selectors to style the tabs of the sliding panes in a RadSplitter:
    <head runat="server">
        <style type="text/css">
        /* Selector for SlideDirection=Right */
        .CustomsSlidingPaneTabs .rspPaneTabContainer,
        /* Selector for SlideDirection=Left */
        .CustomsSlidingPaneTabs .rspRight .rspPaneTabContainer
            background-image:url('Splitter/ExpandCollapseBarsCommands.gif') !important;
            background-position:-81px 0 !important;
            background-repeat:repeat-y !important;
        /* Selector for SlideDirection=Bottom */
        .CustomsSlidingPaneTabs .rspBottom .rspPaneTabContainer,
        /* Selector for SlideDirection=Top */
        .CustomsSlidingPaneTabs .rspTop .rspPaneTabContainer
            background-image:url('Splitter/slideTitleContainerBgr.gif') !important;
            background-repeat:repeat-x !important;
            background-position:0 -1px !important;
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
            <telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="CustomsSlidingPaneTabs">
                <telerik:RadPane ID="RadPane1" runat="server" Width="22px">
                    <telerik:RadSlidingZone ID="RadSlidingZone" runat="server">
                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Test"></telerik:RadSlidingPane>
                <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
                <telerik:RadPane ID="RadPane3" runat="server" Width="22px">
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Left">
                        <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Test"></telerik:RadSlidingPane>
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane4" runat="server" Height="22px">
                    <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" SlideDirection="Bottom">
                        <telerik:RadSlidingPane ID="RadSlidingPane3" runat="server" Title="Test"></telerik:RadSlidingPane>
                <telerik:RadPane ID="RadPane5" runat="server"></telerik:RadPane>
                <telerik:RadPane ID="RadPane6" runat="server" Height="22px">
                    <telerik:RadSlidingZone ID="RadSlidingZone3" runat="server" SlideDirection="Top">
                        <telerik:RadSlidingPane ID="RadSlidingPane4" runat="server" Title="Test"></telerik:RadSlidingPane>

    In case you want to change the look of most splitter elements, I would recommend that you create a custom skin, instead of overriding the CSS selectors from the embedded skin as demonstrates above. For information on how skins work and instructions how to create a custom skin, please refer to our online documentation.

    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top