Change The Images Of A RadSplitBar

[Seth]

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

[Svetlina Anati]

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
    {
       background: url('Images/splitbar_expand_h.gif') !important;
    }
    .collapseBarExpandOver
    {
       background: url('Images/splitbar_expand_v.gif') !important;
    }

    .collapseBarCollapse
    {
       background: url('Images/splitbar_collapse_h.gif') !important;

    }
     .collapseBarCollapseOver
    {
       background: url('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

[Seth]

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:

	.RadSplitter_Vista .collapseBarCollapse
	{
	cursor: pointer;
	width: 3px;
	height: 5px;
	text-align:center;
	background: url(RadControls/Splitter/splitbar_collapse_h.gif) !important;
	}
	.RadSplitter_Vista .collapseBarCollapseOver
	{
	cursor: pointer;
	width: 3px;
	height: 5px;
	text-align:center;
	background: url(RadControls/Splitter/splitbar_collapse_h.gif) !important;
	}
	.RadSplitter_Vista .collapseBarCollapseError
	{
	cursor: pointer;
	width: 3px;
	height: 5px;
	text-align:center;
	background: red url(RadControls/Splitter/splitbar_collapse_h.gif) !important;
	}

What am I doing wrong?

Seth

[Svetlina Anati]

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

[Seth]

Thank you Svetlina,

That extra explanation and example were perfect.

Seth

[Ram]

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?

[Svetlina Anati]

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.