Change The Images Of A RadSplitBar

7 posts, 0 answers
  1. Seth
    Seth avatar
    90 posts
    Member since:
    Jun 2007

    Posted 23 May 2008 Link to this post

    I am using the Vista skin for my RadSplitter.  Some users have requested that I make the collapse/expand arrows larger.  I have changed the expand/collapse images found in the C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2008\Skins\Vista\Splitter folder.  To my dismay, this did not change my control.  Is there something else I need to do?

    Seth
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 27 May 2008 Link to this post

    Hello Seth,

    In order to change the RadSplitBar images you should override the default ones in the CSS classes collapseBarExpand and collapseBarCollapse. If you want to change also the images which are shown when you mouseover the RadSplitBar you should also override them in the CSS classes collapseBarExpandOver and collapseBarCollapseOver.

    What you should do is to change the background image as shown below:

        .collapseBarExpand  
        {  
           backgroundurl('Images/splitbar_expand_h.gif') !important;  
        }  
        .collapseBarExpandOver  
        {  
           backgroundurl('Images/splitbar_expand_v.gif') !important;  
        }  
          
        .collapseBarCollapse  
        {  
           backgroundurl('Images/splitbar_collapse_h.gif') !important;  
     
        }  
         .collapseBarCollapseOver  
        {  
           backgroundurl('Images/splitbar_collapse_v.gif')  !important;  
     
        } 

    Please, note that you should use the keyword !important in order to override the skin - if it is missing your changes will not take effect.


    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Seth
    Seth avatar
    90 posts
    Member since:
    Jun 2007

    Posted 27 May 2008 Link to this post

    Where do I make these changes?  I tried changing the Splitter.Vista.css file in the C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2008\Skins\Vista folder, but there is still no effect.  I also moved the image to a subfolder under my project as you can see in my changes:

    1 .RadSplitter_Vista .collapseBarCollapse  
    2 {     
    3     cursorpointer;  
    4     width3px;  
    5     height5px;  
    6     text-align:center;  
    7     backgroundurl(RadControls/Splitter/splitbar_collapse_h.gif) !important;  
    8 }  
    9  
    10 .RadSplitter_Vista .collapseBarCollapseOver  
    11 {     
    12     cursorpointer;  
    13     width3px;  
    14     height5px;  
    15     text-align:center;  
    16     backgroundurl(RadControls/Splitter/splitbar_collapse_h.gif) !important;  
    17 }  
    18  
    19 .RadSplitter_Vista .collapseBarCollapseError  
    20 {     
    21     cursorpointer;  
    22     width3px;  
    23     height5px;  
    24     text-align:center;  
    25     backgroundred url(RadControls/Splitter/splitbar_collapse_h.gif) !important;  
    26 }  
    27  

    What am I doing wrong?

    Seth
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 May 2008 Link to this post

    Hi Seth,

    You have to put these setting in your page's head, within a <style> tag. Please, also note that you do not need to add a sufix with the skin's name.

    For your convenience I am attaching a sample demo project. I hope that you will find it helpful.

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Seth
    Seth avatar
    90 posts
    Member since:
    Jun 2007

    Posted 28 May 2008 Link to this post

    Thank you Svetlina,

    That extra explanation and example were perfect.

    Seth
  7. Ram
    Ram avatar
    4 posts
    Member since:
    Mar 2010

    Posted 21 Apr 2010 Link to this post

    Hi,

    I took this code which was sent in the zip file and tried running it, it still gives me the default images for splitters and if I specify a skin, it gives that skin. The images do not override the default ones. Is there something else I need to change?
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Apr 2010 Link to this post

    Hello Ram,

    Would you please provide more details about the version you are using? This thread is very old and the skins have been changed since then. If you are using the latest version I suggest to test with the following CSS:

    .rspCollapseBarExpand
            {
                background-image: url('Images/splitbar_expand_h.gif') !important;
            }
            .rspCollapseBarExpandOver
            {
                background-image: url('Images/splitbar_expand_v.gif') !important;
            }
            .rspCollapseBarCollapse
            {
                background-image: url('Images/splitbar_collapse_h.gif') !important;
            }
            .rspCollapseBarCollapseOver
            {
                background-image: url('Images/splitbar_collapse_v.gif') !important;
            }
     

    Kind regards,
    Svetlina
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017