RadSplitter custom skin...

[Alexander Kotchkin]

I was able to create a new skin for a RadSplitter Control, everything works fine, except when I tried to change the size of the text that shows in the SlidingZone Tabs.  I was able to change the font color but the font size doesn't change.
Am I doing something wrong?

I have the 2009 trial version, and I'm deciding wether to buy the developer version or not, and this issue is affecting my decision.

I'll appreciate your help with this.

Regards,

Jesus.

[Princy]

Hello Jesus,

You can try out the following css style setting to set the font size of the sliding zone tabs of your splitter control:
css:

 .RadSplitter .rspPaneTabText
    {
      font-size : 15px !important;
      color:Red !important;
    }

Thanks
Princy.

[Tsvetie]

Hi Jesus,
You can either use important as Princy suggested, or you can increase the specificity of your CSS selectors. For example:

.RadSplitter .rspPaneTabContainer .rspPaneTabText
{
    font-size: 15px;
    color: Red;
}

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.

[LUDOVIC]

Perfect!
but just an additional question : how to identify specific splitter to apply new style when you have several splitter in the same page ?

regards

[Princy]

Hello,

If you are setting the CSS as Tsvetie suggested, it will be applicable to all the RadSplitter controls in your page. If you want to style a particular RadSplitter only, you should specify the ID along with the CSS class. Please have a look into the sample CSS.

CSS:

#RadSplitter1.RadSplitter .rspPaneTabContainer .rspPaneTabText
{
    font-size: 15px !important;
    color: Red !important;
}

Thanks,
Princy.

[LUDOVIC]

thank for your quick answer!

my previous request was not really clear: actually I have one radsplitte with 2 RadSlidingPane and this is this sliding panes I would lkike to customize specifically. to have for instance the left one with bold and color red attribute and the right one no bold and green.

thank a lot

[Princy]

Hello,

Please have a look into the following code to give different style to SlidingPanel content.

ASPX:

<telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22px" SlideDirection="Bottom">
    <telerik:RadSlidingPane ID="Radslidingpane1" Title="Pane1" runat="server" Height="150px">
        Pane1</telerik:RadSlidingPane>
    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Height="150px">
        Pane2</telerik:RadSlidingPane>
</telerik:RadSlidingZone>

CSS:

<style type="text/css">
    #RAD_SLIDING_PANE_CONTENT_Radslidingpane1.rspSlideContent
    {
        color: red;
        font-weight: bold;
    }
    #RAD_SLIDING_PANE_CONTENT_Radslidingpane2.rspSlideContent
    {
        color: Green;
        font-weight: normal;
    }
</style>

Thanks,
Princy.