This is a migrated thread and some comments may be shown as answers.

Changing radUpload browse button style

6 Answers 1030 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 30 Jul 2012, 03:56 AM
I'm using VS2010, C# to develop my ASP.NET web app. I want to use a radControl Upload component, (http://www.telerik.com/products/aspnet-ajax/upload.aspx), I want to change browse button style, I've tested several methods, I've explored your samples and forums but I've found nothing helpful! I'm searching for an easy way to style my browse button, I want to change its background image and size, also how can I change filename textbox beside browse button?
thanks

6 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 30 Jul 2012, 06:31 AM
Hi Ali,

Try the following CSS to style Browse Button.

CSS:
<style type="text/css">
 div.RadUpload .ruBrowse
   {
     background-image: url('../Images/Hydrangeas.jpg') !important;
     height: 24px !important;
     width: 150px !important;
   }
</style>

About your second scenario by default filename textbox is beside the browse button. Please elaborate your scenario a bit more.

Hope this helps.

Regards,
Princy.
0
Ali
Top achievements
Rank 1
answered on 30 Jul 2012, 06:44 AM
Thanks

I'm going to change this textbox style, is it possible? for instance I want to change its border or its size, how can I do it?
0
Ali
Top achievements
Rank 1
answered on 30 Jul 2012, 01:53 PM
It worked great but how can I change its hover style? :hover doesn't work

thanks
0
Princy
Top achievements
Rank 2
answered on 31 Jul 2012, 04:11 AM
Hi Ali,

Try overriding the default CSS as follows.

CSS:
<style type="text/css">
 div.RadUpload .ruBrowse, div.RadUpload .ruBrowse .ruButtonHover//To change its hover style of Browse Button
  {
    background-image: url('../Images/Image.jpg') !important;
    background-position: 0 -23px !important;
    height: 24px !important;
    width: 150px !important;
  }
 div.RadUpload .ruFakeInput//For styling RadUpload input textbox.
  {
    border: 1px solid red !important;
    width: 20px !important;
  }
</style>

Try setting InputSize property of RadUpload to an integer value to increase the width of all file input elements.

ASPX:
<telerik:RadUpload ID="RadUpload1" runat="server" InputSize="25">
</telerik:RadUpload>

Hope this helps.

Regards,
Princy.
0
Ali
Top achievements
Rank 1
answered on 01 Aug 2012, 07:53 AM
thanks Princy, but it didn't work:
div.RadUpload .ruBrowse, div.RadUpload .ruBrowse .ruButtonHover

it just changed style of normal state (and not the hover)

also div.RadUpload .ruFakeInput worked, but right border of my textbox is missing, how can I solve it? what does InputSize  do?
0
Kate
Telerik team
answered on 03 Aug 2012, 06:55 AM
Hello Ali,

Please take a look at the following help articles where it is explained in details how you can alter the look of the RadAsyncUpload control:
http://www.telerik.com/help/aspnet-ajax/asyncupload-increase-button-width.html

I also tested the code below and it works as expected form my side (see the attached image):
div.RadUpload .ruFakeInput {
  border:1px solid;
  border-color: red !important;
     }

Regards,
Kate
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.
Tags
Upload (Obsolete)
Asked by
Ali
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Ali
Top achievements
Rank 1
Kate
Telerik team
Share this question
or