Michael Okon
Top achievements
Rank 1
Rank 1
Michael Okon
asked on 05 Jan 2010, 07:28 PM
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
Michael
Thanks In advance
Michael
1 Answer, 1 is accepted
0
Hi Michael,
You can use the following CSS selectors to style the tabs of the sliding panes in a RadSplitter:
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.
Regards,
Tsvetie
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.
You can use the following CSS selectors to style the tabs of the sliding panes in a RadSplitter:
<head runat="server"> <title></title> <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; } </style></head><body> <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:RadSlidingZone> </telerik:RadPane> <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:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> <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:RadSlidingZone> </telerik:RadPane> <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> </telerik:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> </form></body>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.
Regards,
Tsvetie
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.