How to change CSS properties of Sliding Panes?

3 posts, 1 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 26 Apr 2010 Link to this post

    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.

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 27 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 27 Apr 2010 Link to this post

    Thank you, Bozhidar!
Back to Top