Pane title image

[Jon]

Hi All,

Is there a way to get a title on a pane to include an image?  As per the attached.  The left part shows what it is now and the right is roughly how I'd like it to look.

Obviously not a critical requirement but enhances the appearance of the page.

Regards,

Jon

[Marin Bratanov]

Hello Jon,

I do not see an image attached, but I assume that you are referring to a RadSlidingPane, as the "regular" RadPane does not have a titlebar. To add an image to that you can add a custom CSS rule to add a background image to the titlebar. In the code snippets below you can see how to do that and also the usage of its parent RadPane's CssClass property to distinguish one splitter from the other. Please note that this approach has the limitation that the SlidingPanes that are declared in the same RadPane can only have the same image.
The CSS rule:

.myClass .rspSlideTitle
 {
     background-image: url(images/title.jpeg);
     background-position:left;
     background-repeat:no-repeat;
 }

This splitter will have the icon in it titlebars:

<telerik:RadSplitter runat="server" id="rs1" Skin="Black">
    <telerik:RadPane runat="server" ID="rp1" CssClass="myClass">
        <telerik:RadSlidingZone runat="server" ID="rsz1" Width="22px" >
            <telerik:RadSlidingPane runat="server" ID="rsp1" IconUrl="~/Images/title.jpeg" ></telerik:RadSlidingPane>
            <telerik:RadSlidingPane runat="server" ID="rsp2"></telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane runat="server" ID="rp2"></telerik:RadPane>
</telerik:RadSplitter>

This one will not:

    <telerik:RadSplitter runat="server" id="RadSplitter1">
    <telerik:RadPane runat="server" ID="RadPane1">
        <telerik:RadSlidingZone runat="server" ID="RadSlidingZone1" Width="22px" >
            <telerik:RadSlidingPane runat="server" ID="RadSlidingPane1" IconUrl="~/Images/title.jpeg" ></telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane runat="server" ID="RadPane2"></telerik:RadPane>
</telerik:RadSplitter>

You can also use the RadSlidingPane's IconUrl property to set an icon in the sliding zone as shown in the following demo: http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_tabview/defaultcs.aspx.


Best wishes,
Marin
the Telerik team

[Jon]

Many thanks Marin,  that's exactly what I needed.  I added padding-left:24px; to the css to move the text element over as it was on top of the text to start with - seems to work just fine (in IE anyway!).

Yeah I'd already got the IconUrl bit done - I was kind of suprised that if you could set it for the tab that it wasn't a property for the pane title.  

Best Regards,

Jon