This is a migrated thread and some comments may be shown as answers.
Add icon in select button
2 Answers 35 Views
This is a migrated thread and some comments may be shown as answers.
Jin
Top achievements
Rank 1
Jin asked on 15 Aug 2012, 04:40 AM
Is there a way to add an icon in select button?

2 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 15 Aug 2012, 12:22 PM
Hello, Jin.

You could that but it basically requires you to create a custom skin: the select button is a single image background that's part of a bigger sprite. To add an icon you should either

-- modify the sprite with the icon of your choice and the override the skin. Downside is that all upload buttons will have the same icon;

/** use this to set it to all skins */
html .RadUpload .ruButton,
html .RadUploadProgressArea .ruButton {
    background-image: url("path/to/new/ruSprite.png");
}
 
 
/** use this to set jsut one skin */
html .RadUpload_SKIN_NAME .ruButton,
html .RadUploadProgressArea_SKIN_NAME .ruButton {
    background-image: url("path/to/new/ruSprite.png");
}
 
 
/** use this to set to selected instances */
html .RadUpload.myUpload .ruButton,
html .RadUploadProgressArea.myUploadProgressArea .ruButton {
    background-image: url("path/to/new/ruSprite.png");
}

-- Use simpler look for the buttons (e.g. done with css only) and set the background just to button you want.

/** use this to set it to all skins */
html .RadUpload .ruBrowse,
html .RadUploadProgressArea .ruBrowse {
    padding-left: 20px;
    border: 1px solid black;
    backgorund: #f0f0f0 url("path/to/icon.png") left center no-repeat;
    backgr
}
 
 
/** use this to set jsut one skin */
html .RadUpload_SKIN_NAME .ruBrowse,
html .RadUploadProgressArea_SKIN_NAME .ruBrowse {
    padding-left: 20px;
    border: 1px solid black;
    backgorund: #f0f0f0 url("path/to/icon.png") left center no-repeat;
}
 
 
/** use this to set to selected instances */
html .RadUpload.myUpload .ruBrowse,
html .RadUploadProgressArea.myUploadProgressArea .ruBrowse {
    padding-left: 20px;
    border: 1px solid black;
    backgorund: #f0f0f0 url("path/to/icon.png") left center no-repeat;
}

Of course you may need to tweak the styles slightly if your project is a bit more complicated.

Attached is an image depicting which parts of the sprite you need to tweak. The sprite is a full color PNG with transparency. Make sure you save it with transparency too.

All the best,
Ivan Zhekov
the Telerik team
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 their blog feed now.
0
Jin
Top achievements
Rank 1
answered on 15 Aug 2012, 03:04 PM
I think the feature should be included the next release because it's not easy to handle as your description for a normal developer.
Asked by
Jin
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Jin
Top achievements
Rank 1
Share this question
or