Browse Button style of RadUpload

[Sigma]

Hi,

I want to change the style of browse button of RadUpload. I want to change its background image and size. Please help me to achieve this.

Thanks in advance.
Sigma

[Princy]

Hi,

Try setting the following CSS.
CSS:

div.RadUpload .ruBrowse
{
  background-image: url('../Images/img.jpg') !important;
  height: 60px !important;
}

Thanks,
Princy.

[Ivan Zhekov]

That's mostly so.

In addition to the background image, there is the background position that's been set in the base stylesheet of the RadUpload control.

If you examine this image (also attached in the thread) -- http://aspnet-skins.telerikstatic.com/ajaxz/2012.2.815/Office2010Silver/Upload/ruSprite.png -- you'll notice it three button parts on the left and three button parts on the right. Those are the parts of each button type (short, medium, long) plus their hover state).

If you want to use use implied dimensions of the button, I suggest you customize the sprite and set the background image, the way Princy showed.

If you want to use different dimensions, than the ones implied by the base stylesheet, you'll need to override the background positions of the button as well.

You can also check a very nice help article on customizing the skins of the Upload control -- http://www.telerik.com/help/aspnet-ajax/upload-appearance-custom-skins.html.

Kind regards,
Ivan Zhekov
the Telerik team