Add icon in select button

3 posts, 0 answers
  1. Jin
    Jin avatar
    80 posts
    Member since:
    Jun 2012

    Posted 14 Aug 2012 Link to this post

    Is there a way to add an icon in select button?
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 15 Aug 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jin
    Jin avatar
    80 posts
    Member since:
    Jun 2012

    Posted 15 Aug 2012 Link to this post

    I think the feature should be included the next release because it's not easy to handle as your description for a normal developer.
Back to Top