How to change CSS properties of Sliding Panes?

[Robert]

I'm investigating using your Sliding Pane feature to allow the user to hide a navigation tree that's only periodically used.  From your examples, the closest to my application would be this: http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_tabview/defaultcs.aspx   Just imagine it with only "Pane 1".

My question has to do with how to change the grey background of the top header.  I've looked at the examples on the website.  It appears they have something to do with registering tags and ascx files.  Huh?  Whatever happened to either setting properties or at least referring to a CSS element?

I would appreciate learning of an industry standard way to change such style info.

Sincerely,

Robert W.

[Bozhidar]

Hi Robert,

The background color of RadSplitter Header is created with a background image which is repeated from left to right.  If you want to change it, you should create your own image with the same dimensions  - width 25 pixels, height 25 pixels.

Next step should be to overwrite the existing style in the header of your page to have the new image background visible:

<style type="text/css">
.RadSplitter_Default .rspSlideHeader
  {
   background-image: url(slideTitleContainerBgr.gif) !important;
  }
</style>

Please, note that it is important to use the !important rule to overwrite the existing one. Also you should be careful which one of the existing skins you are modifying. In that case the modified skin is the Default one. If you choose to modify for example the Black skin, the CSS selector should be changed this way:

<style type="text/css">
.RadSplitter_Black .rspSlideHeader
  {
   background-image: url(slideTitleContainerBgr.gif) !important;
  }
</style>

You can find attached the slidetitlecontainerbgr.gif, which is the background image that should be edited to change the background color of RadSplitter Header.

As this is a small change you could make it in the header of your page. If you like to have more visual changes it would be good to crate a Custom Skin for the Telerik Control you are using. You could find useful to read the following articles: Tutorial: Creating a Custom Skin for RadSplitter and RadSplitter CSS Skin File Selectors.

Best regards,
Bozhidar Ruzhenov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Robert]

Thank you, Bozhidar!