This task will require some CSS skills. First, open your old RadControls
for ASP.NET AJAX archive and locate the Skins directory. Open the
folder of the skin you are using and find the ListBox sub-folder which
contains all the sprites for the control. Copy the whole folder in your
project, for instance in the folder where your page that uses RadListBox
resides (the folder should be placed relatively to your CSS location, so
if you put the CSS below in a file somewhere in your project structure,
the folder with images should be in the same folder as you CSS file).
Now, in the RadControls archive, locate the CSS file for your skin, for
instance ListBox.Windows7.css and open it in your favorite editor. Copy
all the rules that contain background image URLs and place them in a
separate style tag in your page (or the CSS file mentioned earlier).
Remove all unneeded styles and leave only the images. Also convert all
short-hand styles to full (e.g.
) to avoid breaking something else. At the end,
. At the end you should have CSS like this:
<style
type="text/css">
div.RadListBox_Windows7
.rlbDropClue
{
background-image: url('ListBox/rlbDropClue.png');
}
div.RadListBox_Windows7
.rlbButtonText
{
background-image: url('ListBox/rlbSprite.png');
}
div.RadListBox_Windows7
.rlbButton:hover .rlbButtonTL,
div.RadListBox_Windows7
.rlbButton:hover .rlbButtonTR,
div.RadListBox_Windows7
.rlbButton:hover .rlbButtonBL,
div.RadListBox_Windows7
.rlbButton:hover .rlbButtonBR
{
background-image: url('ListBox/rlbButtonHover.png');
}
* html div.RadListBox_Windows7 .rlbButton:hover
.rlbButtonTL,
* html div.RadListBox_Windows7 .rlbButton:hover
.rlbButtonTR,
* html div.RadListBox_Windows7 .rlbButton:hover
.rlbButtonBL,
* html div.RadListBox_Windows7 .rlbButton:hover
.rlbButtonBR
{
background-image: url('ListBox/rlbButtonHoverIE6.png');
}
div.RadListBox_Windows7
.rlbButton .rlbButtonTL,
div.RadListBox_Windows7
.rlbButton .rlbButtonTR,
div.RadListBox_Windows7
.rlbButton .rlbButtonBL,
div.RadListBox_Windows7
.rlbButton .rlbButtonBR
{
background-image: url('ListBox/rlbButtonNormal.png');
}
* html div.RadListBox_Windows7 .rlbButton
.rlbButtonTL,
* html div.RadListBox_Windows7 .rlbButton
.rlbButtonTR,
* html div.RadListBox_Windows7 .rlbButton
.rlbButtonBL,
* html div.RadListBox_Windows7 .rlbButton
.rlbButtonBR
{
background-image: url('ListBox/rlbButtonNormalIE6.png');
}
div.RadListBox_Windows7
.rlbDisabled .rlbButtonTL,
div.RadListBox_Windows7
.rlbDisabled .rlbButtonTR,
div.RadListBox_Windows7
.rlbDisabled .rlbButtonBL,
div.RadListBox_Windows7
.rlbDisabled .rlbButtonBR,
div.RadListBox_Windows7
.rlbDisabled:hover .rlbButtonTL,
div.RadListBox_Windows7
.rlbDisabled:hover .rlbButtonTR,
div.RadListBox_Windows7
.rlbDisabled:hover .rlbButtonBL,
div.RadListBox_Windows7
.rlbDisabled:hover .rlbButtonBR
{
background-image: url('ListBox/rlbButtonDisabled.png');
}
* html div.RadListBox_Windows7 .rlbDisabled
.rlbButtonTL,
* html div.RadListBox_Windows7 .rlbDisabled
.rlbButtonTR,
* html div.RadListBox_Windows7 .rlbDisabled
.rlbButtonBL,
* html div.RadListBox_Windows7 .rlbDisabled
.rlbButtonBR,
* html div.RadListBox_Windows7 .rlbDisabled:hover
.rlbButtonTL,
* html div.RadListBox_Windows7 .rlbDisabled:hover
.rlbButtonTR,
* html div.RadListBox_Windows7 .rlbDisabled:hover
.rlbButtonBL,
* html div.RadListBox_Windows7 .rlbDisabled:hover
.rlbButtonBR
{
background-image: url('ListBox/rlbButtonDisabledIE6.png');
}
</style>
Save the file and that should be all. Your pre-Q2 2010 sprites are
restored.