Rad Sliding Zone

[shafeequl]

Sir,
I just started to develop asp.net web application using Rad Controls.In a web page i added a radtoolbar,radsplitter radpane radslidingzone,radsliding pane as shown in attached image.I have some doubts about the controls.And i explained my questions in the attached image.
Am a beginer in rad controls.
Please let me out of this.

[Vessy]

Hi Shafeequl,

Thank you for contacting the Telerik support.

The answers to the questions it he attached image are as follows:

How can I access this part of a RadSlidingPane, I need to change color and other properties? How can I set this part to 100% height?
This is the SlidingZone's ab container and you can access the each tab in it with the following selector:

.RadSplitter div.rspPaneTabContainer
{
    background-image: none !important;
    background-color: blueviolet;
    cursor: help;
}

It is not possible to make the tabs occupy 100% of the height, but you can set the BackColor of the SlidingZone's parent RadPane in order to make it look like a part of the tabs.

Can I remove this title part?
Yes, you can do with a similar CSS style:

.RadSplitter tr.rspSlideHeader
{
    display: none;
}

How can I change the background color of a toolbar?
In order to add background color to the ToolBar, you will need first to remove the used background image in a similar way:

.RadToolBar div.rtbMiddle
{
    background-image: none !important;
    background-color: blueviolet;
}

This control need to be anchor to right side of tool bar (width 100%). How can I achieve that?
I am not quite sure whether I understand the exact issue properly. If you want to float the split button the the rightmost part of the ToolBar, it could be achieved by making the split button absolutely positioned. For this purpose you will need first to make the ToolBar relatively positioned:

<telerik:RadToolBar ID="RadToolbar1" runat="server" Width="100%" CssClass="toolBarPosition">
    <Items>
        <telerik:RadToolBarButton Text="Compose"></telerik:RadToolBarButton>
        <telerik:RadToolBarButton Text="Reply"></telerik:RadToolBarButton>
        <telerik:RadToolBarButton Text="Reply to all"></telerik:RadToolBarButton>
        <telerik:RadToolBarButton Text="Forward"></telerik:RadToolBarButton>
        <telerik:RadToolBarSplitButton>
            <Buttons>
                <telerik:RadToolBarButton ImageUrl="Images/telerik_16x16.png"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Button 1"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Button 2"></telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarSplitButton>
    </Items>
</telerik:RadToolBar>

.toolBarPosition
{
    position: relative;
}
.RadToolBar div li.rtbSplBtn
{
    position: absolute;
    right: 50px;
}

For your convenience I am attaching a simple page with the above configurations applied. I hope this information will be helpful for you.

Regards,
Vessy
Telerik