As I mentioned in my previous post, checkbox colors are coming from a background image sprite. That means that they could not be changed by a CSS property, but you have to open the current background image in a image editing software such as Adobe Photoshop and to change the colors as you like. Creating RadButton Custom Sprite
explains in details how to do that. Placed bellow are the necessary steps. Even if the images sprites location and/or names are different, the process is istill the same to edit the image.
Modifying the Image Sprites to Achieve Totally New Looks for the Skin
Each skin of RadButton consists of two image sprites that are contained in the Skins/SkinName/Button folder. These are:
1. ButtonSprites.gif contains horizontal and vertical buttons and split border and arrows also.
2. ToggleSprites.gif contains check boxes and radio buttons images.
Explained below is a simple method for modifying the image sprites of RadButton with Adobe© PhotoShop to achieve new looks without creating a new design.
1. Drag ToggleSprites.gif and ButtonSprites.gif in Adobe© PhotoShop.
2. From the menu bar select Image » Mode » RGB Color to prepare the images for editing (convert from optimized Indexed Color to RGB Color):
3. Press Set Foreground Color in PhotoShop's toolbox to invoke the color picker dialog:
4. Select a color that you like from the color dialog and then close it:
5. Choose the first image you will modify, for example ToggleSprite.gif, and select Image » Adjustments Hue » / Saturation to open the Hue / Saturation dialog of Adobe© PhotoShop:
6. Check the colorize checkbox in the Hue / Saturation dialog, and the image you have selected will be immediately colorized in the hue you have selected from the toolbox:
You may then play with the Hue, Saturation and Lightness sliders to fine tune or further modify the image. Make sure you memorize the values of the sliders, as you will need to add the same settings to all other images in order to achieve consistent looks
7. Press "OK" when you are finished
8. Select Image » Mode » Indexed Color to flatten the layers of the image
9. Save and close the image
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed