Home / Community & Support / Knowledge Base / RadControls for ASP.NET AJAX / ListBox / Restore pre-Q2 2010 RadListBox Button Sprites

Restore pre-Q2 2010 RadListBox Button Sprites

Article Info

Rating: Not rated

Article information

Article relates to

RadListBox for ASP.NET AJAX 

Created by

 Kamen Bundev

Last modified

 July 19, 2010

Last modified by

 Kamen Bundev


HOWTO
Restore the old pre-Q2 2010 RadListBox button sprites.

SOLUTION
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. background: transparent url('something.gif') no-repeat 0 0; to just background-image: url('something.gif');) to avoid breaking something else. At the end, raise the specificity of all selectors by 1 by adding div in front of the main skin class. 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.

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.