Hi -

We decided to use telerik controls on our website, therefore initially we are testing how far we go to change look and feel of controls so they match and fit to our needs graphically.
I am using RadSplitter, and please find below codes :-
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500" Skin="Forest">
           <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px">
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="All Dashboard Reports" runat="server"
                    Width="150px" >
                        <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientMouseOver= "OnClientMouseOver"
                        EnableDragAndDrop="True" OnClientNodeDropping="OnClientNodeDropping">
                    </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None">
                <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                    <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane ID="Radpane2" runat="server">
                        <div id="SummaryDiv2" style="width:925px;height:480px;"></div>
                        
                        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false"
                            VisibleTitlebar="true" VisibleStatusbar="false"
                            ReloadOnShow ="true" ShowContentDuringLoad="true" RestrictionZoneID="SummaryDiv2"
                            Overlay="true" Animation="Fade"
                            MinimizeZoneID="MyMinWins" OnClientCommand="oCCWindow">
                        </telerik:RadWindowManager>
                        
                        <telerik:RadToolTipManager Width="300px" Height="300px" RelativeTo="element"
                            ID="RadToolTipManager1" runat = "server" OffsetX="15" Skin="Telerik" Position="MiddleRight"
                            OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate" >
                        </telerik:RadToolTipManager>
                
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None">
                <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" SlideDirection="Left">
                    <telerik:RadSlidingPane ID="Radslidingpane5" Title="Company Dashboards" runat="server" Width="150px">
                        <telerik:RadTreeView id="CompTree" runat="server">
                    </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane6" Title="Personal Dashboards" runat="server" Width="150px">
                       <telerik:RadTreeView ID="DBDTree" runat="server" OnNodeClick="DBDTree_NodeClick">
                        </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>

Now you can see that I am having one pane in left and 2 panes in right, what I want to have different colors to each panes, is it possible to have?

Please suggest me a way!

Thanks in advance
Regards
Arindam R

Hello Arindam,

The color of a RadPane can be set through its CSSClass property, e.g as shown below:

head:



markup declaration:




Let me know whether this works for you.

All the best,
Svetlina
the Telerik team

Hi Svetlina,

Thanks for you reply!

But I applied in my page, it doesn't affect at all, and also another point to tell you I am using Master-Content pages, so I put the style in Master pages

<style type="text/css">  
           
        .MiddlePaneCSS  
        {  
           background-color: red;  
        }  
          
        .EndPaneCSS  
         {  
           background-color: yellow;  
        }  
         .LeftPaneCSS  
        {  
           background-color: blue;  
        }  
          
</style>



and the below code in content page :-

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="950" Height="500">
           <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none" CssClass="LeftPaneCSS">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px" >
                    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="All Dashboard Reports" runat="server"
                    Width="150px">
                        <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientMouseOver= "OnClientMouseOver"
                    EnableDragAndDrop="True" OnClientNodeDropping="OnClientNodeDropping">
                    </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None" CssClass="MiddlePaneCSS">
                <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Horizontal" VisibleDuringInit="false">
                    <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>
                    <telerik:RadPane ID="Radpane2" runat="server">
                        <div id="SummaryDiv2" style="width:925px;height:480px;"></div>
                        
                        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false"
                            VisibleTitlebar="true" VisibleStatusbar="false"
                            ReloadOnShow ="true" ShowContentDuringLoad="true" RestrictionZoneID="SummaryDiv2"
                            Overlay="true" Animation="Fade"
                            MinimizeZoneID="MyMinWins" OnClientCommand="oCCWindow">
                        </telerik:RadWindowManager>
                        
                        <telerik:RadToolTipManager Width="300px" Height="300px" RelativeTo="element"
                            ID="RadToolTipManager1" runat = "server" OffsetX="15" Skin="Telerik" Position="MiddleRight"
                            OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate" >
                        </telerik:RadToolTipManager>
                
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server" Width="22px" Scrolling="None" CssClass="EndPaneCSS">
                <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22px" SlideDirection="Left">
                    <telerik:RadSlidingPane ID="Radslidingpane5" Title="Company Dashboards" runat="server"
                    Width="150px">
                        <telerik:RadTreeView id="CompTree" runat="server">
                    </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                    <telerik:RadSlidingPane ID="Radslidingpane6" Title="Personal Dashboards" runat="server"
                    Width="150px">
                       <telerik:RadTreeView ID="DBDTree" runat="server" OnNodeClick="DBDTree_NodeClick" AllowNodeEditing="true"
                         OnClientContextMenuItemClicking="onClientContextMenuItemClicking"  OnClientContextMenuShowing="onClientContextMenuShowing"
                          OnClientNodeClicked="ClientNodeClicked" OnNodeEdit="DBDTree_NodeEdit"
                         OnContextMenuItemClick="DBDTree_ContextMenuItemClick" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true"
                          OnNodeDrop="DBDTree_HandleDrop">
                         <ContextMenus>
                            <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">
                            <Items>
                            <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" PostBack="false"></telerik:RadMenuItem>
                                                     <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                                         <telerik:RadMenuItem Value="Copy" Text="Copy">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                                         <telerik:RadMenuItem Value="Paste" Text="Paste">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="NewFolder" Text="New Folder">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="CreateCanvas" Text="Create Canvas">
                            </telerik:RadMenuItem>
                             <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="Delete" Text="Delete">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="Save" Text="Save">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="SaveAs" Text="Save As">
                            </telerik:RadMenuItem>
                            
                            </Items>
                            <CollapseAnimation Type="none" />
                            </telerik:RadTreeViewContextMenu>
                            </ContextMenus>
                        </telerik:RadTreeView>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>

What I seen that the middle pane is red in color but others i.e left and right pane are having default color, no change.

Another point to note, I want something else, I want to apply CssClass to SlidingPanes, not in RadPane neither to RadSlidingZone, so the Sliding Panes will having multiple colors one in left (lets say yellow) and other two in right (lets say blue and red). Is that possible?

Please suggest!

Thanks
Arindam R

Hi Arindam,


I apologise for the misunderstanding and for styling the RadPanes instead of RadSlidingPanes.
In order to get the desired result, you should apply the CSS classes to the RadSlidingPanes as done below:


For your convenience I also attached my demo page and a screenshot for a reference of the result on my side.



Greetings,
Svetlina
the Telerik team

Thanks Svetlina - For your help
But the way you did I already done that, I need it in a bit twist.

When my RadSlidingPanes are collapsed  at that time only I wan't to have yellow, blue and red color means sliding panes. I hope you got my point.

Thanks
Arindam R

Hello Arindam,

The only visible part concerning a RadSlidingPane when it is collapsed is the tab which triggers it to expand. That is why I assuem that you do not want to actually style the RadSlidingPane but the RadSlidingPane tab.

In order to do this you should find teh DIV element of teh tab and set its color. Once possible approach is to find its ID by using the IEDevToolBar or FireBug tools and to hard code it but I do not recommend this because hardcodeing is not a good practice. That is why I suggest to dynamically evaluate the ClientID at runtime in the following manner:



Note, that your style block should have runatat=server because otherwise you will not be able to evaluate the IDs.

All the best,
Svetlina
the Telerik team